前言
书接上回, 上次开篇中已经实现了一个可以运动的太阳系模型, 但是太简单了. 最明显的就是星球竟然都一样大小, 这就太不严谨😂了. 这次我们就给它再加点东西, 调整一下细节吧.
本篇文章转载自个人网站三排三号, 更多文章可以直接访问浏览😄
月亮
首先我们来看下我们的地球, 目前它还是孤孤单单一个球, 必须要给它把月亮安排上… 同时要考虑到, 地球和月球都是是有自转的, 也就是说地球自转的同时绕着太阳旋转, 月亮自转的同时绕着地球旋转. 所以总结一下:
- 给地球和月亮加上自转
- 让月亮围绕地球旋转
这里有个问题需要说明一下: 在之前的代码中, 我们把所有的星球都放在了太阳节点中, 成为了太阳的子节点. 同样的, 月亮也要放在地球的节点中.
加月亮
上代码:
<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 id="moon" position="1 0 0" radius="0.1" pivot="-1 0 0" color="#a9acac" animation="property: rotation; to: 0 0 360; loop: true; dur: 833 ;easing:linear">
</a-sphere>
</a-sphere>
因为月亮属于地球的子节点, 所以它的位置,旋转, 缩放都是相对于它的父节点(地球)来说的, 上面代码设置距离地球1个单位. 现在月亮已经可以围绕地球旋转了, 地球终于不孤单了💕, 但是现在还有自转的问题没有解决.
现在地球是绕着太阳公转的, 如何让它自转呢? 要让它自转, pivot就需要设置为0 0 0,让它绕着自身原点旋转, 可是公转就实现不了了. 这里似乎出现矛盾了. 思考一下, 应该如何解决呢?
修复自转
其实答案也很简单, 既然一个a-sphere标签实现不了, 那我们就再增加一个. aframe中有一个a-entity标签, 这个标签是一个空标签, 类似于html中的div标签, 什么都不做,只是一个做承载作用的标签. 我们可以定义一个a-entity标签, 让它代替地球围绕太阳旋转, 地球作为它的子节点就可以自转了. 如下:
<a-entity id="earth_container" position="6 0 0" pivot="-6 0 0"
animation="property: rotation; to: 0 0 360; loop: true; dur: 10000 ;easing:linear">
<a-sphere id="earth" position="0 0 0" radius="0.3" pivot="0 0 0" color="#2a5caa"
animation="property: rotation; to: 0 0 360; loop: true; dur: 27 ;easing:linear">
</a-sphere>
<a-sphere id="moon" position="1 0 0" radius="0.1" pivot="-1 0 0" color="#a9acac"
animation="property: rotation; to: 0 0 360; loop: true; dur: 833 ;easing:linear">
</a-sphere>
</a-entity>
这样就可以实现地球自转的同时绕太阳旋转, 月亮绕地球旋转. 可以注意到, 月亮同样是a-entity的的子节点, 因为如果还放在地球节点中会受到地球旋转影响. 所以需要提出来. 另外月亮自转并没有写, 因为不想写了😎
土星环
太阳系中还有个比较明显的东西, 就是土星环. 这个就没什么说的了, 简简单单一个a-ring就可以了, 代码如下:
<a-sphere id="saturn" position="15 0 0" radius="0.8" pivot="-15 0 0" color="#8e7437"
animation="property: rotation; to: 0 0 360; loop: true; dur: 294474 ;easing:linear">
<a-ring id="saturn_ring"color="white" radius-inner="0.5" radius-outer="0.7"></a-ring>
</a-sphere>
同样的, 这个环也要放在土星节点里面, 作为它的子节点.
调整星球的大小
现在每个星球都还是一样的大小, 需要给它们调整一下. 于是去百度了一下太阳系, 发现如果按照真实的比例来做的话, 大的太大, 小的太小, 根本就没法看, 所以为了展示的好看些, 还是要做一些妥协…
<!-- 太阳 -->
<a-sphere id="sun" position="0 1 0" rotation="0 0 0" radius="3" color="#f47920">
水星
<a-ring id="mercury_orbit"color="white" radius-inner="4.95" radius-outer="5.05"></a-ring>
<a-sphere id="mercury" position="5 0 0" radius="0.3" pivot="-5 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="6.95" radius-outer="7.05"></a-ring>
<a-sphere id="venus" position="7 0 0" radius="0.47" pivot="-7 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="8.95" radius-outer="9.05"></a-ring>
<a-entity id="earth_container" position="9 0 0" pivot="-9 0 0"
animation="property: rotation; to: 0 0 360; loop: true; dur: 10000 ;easing:linear">
<a-sphere id="earth" position="0 0 0" radius="0.5" pivot="0 0 0" color="#2a5caa"
animation="property: rotation; to: 0 0 360; loop: true; dur: 27 ;easing:linear">
</a-sphere>
<a-sphere id="moon" position="1 0 0" radius="0.1" pivot="-1 0 0" color="#a9acac"
animation="property: rotation; to: 0 0 360; loop: true; dur: 833 ;easing:linear">
</a-sphere>
</a-entity>
<!-- 火星 -->
<a-ring id="mars_orbit"color="white" radius-inner="10.95" radius-outer="11.05"></a-ring>
<a-sphere id="mars" position="11 0 0" radius="0.27" pivot="-11 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="12.95" radius-outer="13.05"></a-ring>
<a-sphere id="jupiter" position="13 0 0" radius="1" pivot="-13 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="14.95" radius-outer="15.05"></a-ring>
<a-sphere id="saturn" position="15 0 0" radius="0.8" pivot="-15 0 0" color="#8e7437"
animation="property: rotation; to: 0 0 360; loop: true; dur: 294474 ;easing:linear">
<a-ring id="saturn_ring"color="white" radius-inner="0.5" radius-outer="0.7"></a-ring>
</a-sphere>
<!-- 天王星 -->
<a-ring id="uranus_orbit"color="white" radius-inner="16.95" radius-outer="17.05"></a-ring>
<a-sphere id="uranus" position="17 0 0" radius="0.7" pivot="-17 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="18.95" radius-outer="19.05"></a-ring>
<a-sphere id="neptune" position="19 0 0" radius="0.6" pivot="-19 0 0" color="#1b315e"
animation="property: rotation; to: 0 0 360; loop: true; dur: 1647913 ;easing:linear"></a-sphere>
</a-sphere>
所以我就自己调整了大小, 完全没有参照查出来的资料😁. 调整完之后, 我总结了两点:
- 这种标签式的写法, 调整数值真是太痛苦了,要改的地方太多. 以后会用js来写场景.
- 以后代码会越来越长, 不会也不可能全部粘出来了, 会放到github上.
一些参数放在这里, 有心人可以自己修改参数~~
行星 | 轨道半长轴(AU) | 公转周期 | 赤道半径:地球 | 自转周期 |
---|---|---|---|---|
水星 | 0.38709 | 87.9674天 | 0.3825 | 58.6462天 |
金星 | 0.72332 | 224.6960天 | 0.9488 | 243.0187天 |
地球 | 1.00000 | 365.2564天 | 1.0000 | 23.9345小时 |
火星 | 1.52366 | 686.9649天 | 0.53226 | 24.6230小时 |
木星 | 5.20336 | 11.862615年 | 11.209 | 9.9250小时 |
土星 | 9.53707 | 29.447498年 | 9.449 | 10.6562小时 |
天王星 | 19.19126 | 84.016846年 | 4.007 | 17.2399小时 |
海王星 | 30.06869 | 164.79132年 | 3.883 | 16.1100小时 |
展示
这里没办法插入代码, 看不到动态效果, 所以只能贴一个动图来代替,实际效果可以访问原文章地址
总结一下
目前每个星球离太阳的距离都是等差递增的, 虽说不合理, 但也还能看. 经过这两篇大家应该可以完成真实比例的场景了, 我这里就不继续调整这些内容了. 接下来就是给这些光秃秃的星球穿上漂亮的衣服–贴图. 这个内容也比较多, 要放在下一篇中了,下次再见👀…