用arjs和aframe打造太阳系-开篇

最新推荐文章于 2024-06-11 09:43:42 发布

三排三号~

最新推荐文章于 2024-06-11 09:43:42 发布

阅读量818

点赞数

分类专栏： webar 文章标签： html5

本文链接：https://blog.csdn.net/weixin_44133672/article/details/114372938

版权

webar 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

为什么要做这个

因为本身的工作经历, 做过3D建模, 也做过程序开发, 如果能将两者结合起来, 那真的是太酷了. 由此想到了做游戏, 但是在研究了一段时间之后, 发现独立做游戏太苦逼, 而且还需要比较高的美术素养, 无奈放弃. 于是又想到了AR, 把现实和虚拟放在同一个屏幕中, 完全可以利用上我所有的技能, 就他了.

AR的设备, 平台, 框架也是多的数不胜数, 以后会单独写一下. 总之最后选择了WebAR, 因为无需安装额外的app, 加上近年来手机性能的快速发展, 5G的到来, 场景的加载和渲染都已经不是很大的问题, 十分适合就此入门AR.

目标及介绍

目标

这个系列的目标就是实现一个逼真的太阳系模型, 至于最后的效果还在构思中, 目前也是在边学边做, 尽量能做的牛逼一些.😄

介绍

如标题, 本项目基于ARjs和AFrame来开发, arjs用来实现图像追踪, 位置追踪等, aframe实现虚拟场景的展示与交互. 其中arjs基于jsartookit5, 而aframe则是封装了threejs, 如果对这些框架有过了解那真是再好不过.

对这两个框架不熟悉的也没关系, 我会在文章中逐步介绍, 但是基本的Html和js的认知程度还是要有的, 因为我也是学习中, 所以我会尽可能把每个步骤都写的详细一些.

本篇文章转载自个人网站三排三号, 更多文章可以直接访问浏览😄

话不多说, 先开始吧.

一个球

首先, 太阳系中的各个行星都是绕着太阳旋转, 所以我们要先把太阳的位置确定好. 而一个球形是最适合来描述圆滚滚的太阳的, 就先做个球吧~

万事开头难

第一步就是要引入对应的js文件, 这个项目使用到了arjs和aframe, 但是由于本篇只是个开始, 暂时只是实现一个虚拟场景, 还用不到ar方面的内容, 所以只引入aframe即可.

<head>
	 <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
</head>

以上为官方示例中展示的引入url, 但是国内比较慢, 建议下载到本地, 直接引用本地文件来开发测试

代码

<body>
    <a-scene>
      <!-- 太阳 -->
     <a-sphere id="sun" position="0 0 0" rotation="0 0 0" radius="1" color="#f47920">	  </a-sphere>
     <a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>

光秃秃的太阳

解释一下:

以上添加了一个球形, 位置为世界原点, 旋转角度为0, 半径为1米, 颜色为橘黄色
所有代码都写在body里面, a-scene代表整个虚拟场景.
aframe使用用html自定义标签来组织整个场景, a-sphere就代表一个圆球, 同样, 还会有a-box立方体, a-plane平面等等.
a-sphere还有各种属性, 如位置position, 旋转角度rotation, 半径radius等, 在aframe中叫做component.
场景中默认包含了一个摄像机, 两盏灯光, 这个以后有机会再细说.

简简单单, 我们的太阳就有了(虽然极度的简陋…). 其他的行星一样也是球形, 我们可以很简单的复制粘贴, 调整下参数就行.

好多球

代码如下:

<a-sphere id="sun" position="0 1 0" rotation="0 0 0" radius="1" color="#f47920">
            <!-- 水星 -->
   <a-sphere id="mercury" position="2 0 0" radius="0.3" color="#afb4db"></a-sphere>
            <!-- 金星 -->
   <a-sphere id="venus" position="4 0 0" radius="0.3" color="#fdb933"></a-sphere>
            <!-- 地球 -->
   <a-sphere id="earth" position="6 0 0" radius="0.3" color="#2a5caa"></a-sphere>
            <!-- 火星 -->
   <a-sphere id="mars" position="8 0 0" radius="0.3" color="#f15a22"></a-sphere>
            <!-- 木星 -->
   <a-sphere id="jupiter" position="10 0 0" radius="0.3" color="#1d953f"></a-sphere>
            <!-- 土星 -->
   <a-sphere id="saturn" position="12 0 0" radius="0.3" color="#8e7437"></a-sphere>
            <!-- 天王星 -->
   <a-sphere id="uranus" position="14 0 0" radius="0.3" color="#3e4145"></a-sphere>
            <!-- 海王星 -->
   <a-sphere id="neptune" position="16 0 0" radius="0.3" color="#1b315e"></a-sphere>
        </a-sphere>

暂时没有动画

这一段代码似乎也没什么解释的, 唯一值得注意的地方就是位置position, 因为所有的行星都放在了sun的标签里面, 所以就成了sun的子节点, 这里的位置为相对位置, 也就是相对于太阳来说的偏移位置.

为什么要这么做, 因为太阳系是一个系统, 将来如果要调整位置, 角度的话, 只调整太阳节点就行,不必每个都调整.

PS: 因为只是示范用, 这里的球体大小都设置为一样, 没有按真实比例, 自己有兴趣可以查阅资料设置.

动起来

每个星球都有了, 接下来就是让他们动起来 ✊, 这个步骤其实卡了我挺久, 因为一开始只能让星球们自转, 无法让他们绕着太阳转. 在我查阅了各种资料之后, 终于在官方的示例项目代码中找到了pivot这个属性, 官方文档中竟然都没有, 藏挺深…

要动起来需要使用animation这个组件, 这个组件可以指定该元素的运动方式, 目标, 时间等等信息, 为了让文章不显得那么啰嗦, 这里只展示一个, 完整代码会在文章最后:

 <!-- 水星 -->
<a-sphere id="mercury" position="2 0 0" radius="0.3" pivot="-2 0 0" color="#afb4db"  animation="property: rotation; to: 0 0 360; loop: true; dur: 2410 ;easing:linear"></a-sphere>

动起来之后

上面可以看到, 我把pivot位置设置到了-2 0 0的位置, 也就是太阳的圆心处. 这样就能让星球绕着太阳旋转了.

用到的animation组件属性如下:

属性
property: rotation	说明运动方式是旋转
to: 0 0 360	绕Z轴旋转360度
loop: true	此动作重复播放
dur: 2410	一个动画周期持续2410毫秒
easing: linear	运动速度为线性, 也就是速度都一样

加个呼啦圈

为了让行星运动轨迹也显示出来, 我们可以使用a-ring这个标签, 来模拟出轨道的效果. 这个最简单 , 完整的代码也会展示在下面:

 <a-scene inspector="false" vr-mode-ui="false" embedded>
        <!-- 太阳 -->
        <a-sphere id="sun" position="0 1 0" rotation="0 0 0" radius="1" color="#f47920">
            <!-- 水星 -->
            <a-ring id="mercury_orbit"color="white" radius-inner="1.95" radius-outer="2.05"></a-ring>
            <a-sphere id="mercury" position="2 0 0" radius="0.3" pivot="-2 0 0" color="#afb4db"
                animation="property: rotation; to: 0 0 360; loop: true; dur: 2410 ;easing:linear"></a-sphere>
            <!-- 金星 -->
            <a-ring id="venus_orbit"color="white" radius-inner="3.95" radius-outer="4.05"></a-ring>
            <a-sphere id="venus" position="4 0 0" radius="0.3" pivot="-4 0 0" color="#fdb933"
            animation="property: rotation; to: 0 0 360; loop: true; dur: 6136 ;easing:linear"></a-sphere>
            <!-- 地球 -->
            <a-ring id="earth_orbit"color="white" radius-inner="5.95" radius-outer="6.05"></a-ring>
            <a-sphere id="earth" position="6 0 0" radius="0.3" pivot="-6 0 0" color="#2a5caa"
            animation="property: rotation; to: 0 0 360; loop: true; dur: 10000 ;easing:linear"></a-sphere>
            <!-- 火星 -->
            <a-ring id="mars_orbit"color="white" radius-inner="7.95" radius-outer="8.05"></a-ring>
            <a-sphere id="mars" position="8 0 0" radius="0.3" pivot="-8 0 0" color="#f15a22"
            animation="property: rotation; to: 0 0 360; loop: true; dur: 18794 ;easing:linear"></a-sphere>
            <!-- 木星 -->
            <a-ring id="jupiter_orbit"color="white" radius-inner="9.95" radius-outer="10.05"></a-ring>
            <a-sphere id="jupiter" position="10 0 0" radius="0.3" pivot="-10 0 0" color="#1d953f"
            animation="property: rotation; to: 0 0 360; loop: true; dur: 118626 ;easing:linear"></a-sphere>
            <!-- 土星 -->
            <a-ring id="saturn_orbit"color="white" radius-inner="11.95" radius-outer="12.05"></a-ring>
            <a-sphere id="saturn" position="12 0 0" radius="0.3" pivot="-12 0 0" color="#8e7437"
            animation="property: rotation; to: 0 0 360; loop: true; dur: 294474 ;easing:linear"></a-sphere>
            <!-- 天王星 -->
            <a-ring id="uranus_orbit"color="white" radius-inner="13.95" radius-outer="14.05"></a-ring>
            <a-sphere id="uranus" position="14 0 0" radius="0.3" pivot="-14 0 0" color="#3e4145"
            animation="property: rotation; to: 0 0 360; loop: true; dur: 840168 ;easing:linear"></a-sphere>
            <!-- 海王星 -->
            <a-ring id="neptune_orbit"color="white" radius-inner="15.95" radius-outer="16.05"></a-ring>
            <a-sphere id="neptune" position="16 0 0" radius="0.3" pivot="-16 0 0" color="#1b315e"
            animation="property: rotation; to: 0 0 360; loop: true; dur: 1647913 ;easing:linear"></a-sphere>
        </a-sphere>
        <a-entity camera position="0 1 20"></a-entity>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>

完成展示

动起来截图

这里不知道怎么插入代码, 所以只能贴一个动图来代替,实际效果可以访问原文章地址

总结

以上只是实现了一个最最最简单的场景, 用到的功能也不多 , 甚至连ar的影子都没看到😂, 但是这是一个很好的开始, 只要有行动 , 就是有进步.

这篇文章只是一个开始, 后续会逐步丰富这个场景, 在这里简单列一下将来可能会涉及到的部分:

星球自转以及各自的卫星添加
给光秃秃的星球穿上衣服, 添加材质与贴图
某些星球可能不是规则的球形 , 用模型来替代
添加交互, 点击星球可拉近观察
实现ar效果, 制作image based, location based, marker三种触发场景
其他… 想到再说

第一次写这么长的文章, 花了一天的时间, 希望自己能坚持下去, 完成这个系列, 下次再见👀.

三排三号~

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
用arjs和aframe打造太阳系-开篇

为什么要做这个因为本身的工作经历, 做过3D建模, 也做过程序开发, 如果能将两者结合起来, 那真的是太酷了. 由此想到了做游戏, 但是在研究了一段时间之后, 发现独立做游戏太苦逼, 而且还需要比较高的美术素养, 无奈放弃. 于是又想到了AR, 把现实和虚拟放在同一个屏幕中, 完全可以利用上我所有的技能, 就他了.AR的设备, 平台, 框架也是多的数不胜数, 以后会单独写一下. 总之最后选择了WebAR, 因为无需安装额外的app, 加上近年来手机性能的快速发展, 5G的到来, 场景的加载和渲染都已经不
复制链接

扫一扫