用arjs和aframe打造太阳系-第二章

前言

书接上回, 上次开篇中已经实现了一个可以运动的太阳系模型, 但是太简单了. 最明显的就是星球竟然都一样大小, 这就太不严谨😂了. 这次我们就给它再加点东西, 调整一下细节吧.

月亮

首先我们来看下我们的地球, 目前它还是孤孤单单一个球, 必须要给它把月亮安排上…. 同时要考虑到, 地球和月球都是是有自转的, 也就是说地球自转的同时绕着太阳旋转, 月亮自转的同时绕着地球旋转. 所以总结一下:

给地球和月亮加上自转
让月亮围绕地球旋转

这里有个问题需要说明一下: 在之前的代码中, 我们把所有的星球都放在了太阳节点中, 成为了太阳的子节点. 同样的, 月亮也要放在地球的节点中.

加月亮

上代码:

1
2
3
4
5


<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标签, 让它代替地球围绕太阳旋转, 地球作为它的子节点就可以自转了. 如下:

1
2
3
4
5
6
7
8
9


<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就可以了, 代码如下:

1
2
3
4


<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>

土星环

同样的, 这个环也要放在土星节点里面, 作为它的子节点.

调整星球的大小

现在每个星球都还是一样的大小, 需要给它们调整一下. 于是去百度了一下太阳系, 发现如果按照真实的比例来做的话, 大的太大, 小的太小, 根本就没法看, 所以为了展示的好看些, 还是要做一些妥协…

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


<!-- 太阳 -->
<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小时

展示

总结一下

目前每个星球离太阳的距离都是等差递增的, 虽说不合理, 但也还能看. 经过这两篇大家应该可以完成真实比例的场景了, 我这里就不继续调整这些内容了. 接下来就是给这些光秃秃的星球穿上漂亮的衣服–贴图. 这个内容也比较多, 要放在下一篇中了,下次再见👀..