使用Three.js实现太阳系八大行星的自转公转示例代(2)

具体作用就是创建一个球体元素,先构建框架,在用行星的平面图将它包裹起来,就形成了一颗行星,再把这颗行星添加到组里,之后再把组添加到场景里。这里就构建单个元素的过程。

那么为什么太阳直接添加到组里,而水星要用两个组层级添加,且给它的位置设偏移呢。我们来到第三节。

三. 自转同时公转

旋转方式:我们要实现旋转功能有三种方式

1.旋转照相机  2.旋转整个场景(Scene)  3.旋转单个元素。

因为我们这里每个行星的自转速度,公转速度都不一样。所以设置整体旋转并不可行,所以要给每个元素设置不同的旋转属性。

旋转机制:这里介绍物体的rotation属性,相对于自身旋转。

例如:

scene.rotation.y += 0.04; //整个场景绕自身的Y轴逆时针旋转

进入正题

使用Three.js实现太阳系八大行星的自转公转示例代

Scene中的所有元素使用rotation.y属性,默认旋转轴都为这根Y轴,因为它们初始化Y轴就是这根轴。
所以让太阳旋转直接让它的组旋转就行了group.rotation.y += 0.04;

而其它行星需要让它们围绕着太阳转,就要先给它们自身设置一个位置偏移。例如水星:group1.position.x -= 300;  而此时设置group1.rotation.y属性,它就会实现自转。因为它的Y轴位置已经改变了。

使用Three.js实现太阳系八大行星的自转公转示例代

那么此时要想再实现公转,在这个对象中是找不到默认Y轴这根线的。所以我们给group1再设置了一个“父元素”groupParent1。groupParent1.add(group1);

当我们移动了group1时,groupParent1的位置是没有变的,自然它的Y轴也不会变,又因为groupParent1包含了group1,所以旋转groupParent1时,group1也会绕着初始的默认Y轴旋转。所以设置那么多组,是为了实现每颗行星不同的速度和公转的同时自转。

使用Three.js实现太阳系八大行星的自转公转示例代

四. 其他实现函数

function render() { renderer.render(scene, camera); camera.lookAt(scene.position); //让相机盯着场景的位置 场景始终在中间 } //设置公转 function revolution(){ groupParent1.rotation.y += 0.15; groupParent2.rotation.y += 0.065; groupParent3.rotation.y += 0.05; groupParent4.rotation.y += 0.03; groupParent5.rotation.y += 0.001; groupParent6.rotation.y += 0.02; groupParent7.rotation.y += 0.0005; groupParent8.rotation.y += 0.003; } //设置自转 function selfRotation(){ group.rotation.y += 0.04; group1.rotation.y += 0.02; group2.rotation.y -= 0.005; group3.rotation.y += 1; group4.rotation.y += 1; group5.rotation.y += 1.5; group6.rotation.y += 1.5; group7.rotation.y -= 1.5; group8.rotation.y += 1.2; } function Animation() { render(); selfRotation(); revolution(); requestAnimationFrame(Animation); }

最后再调用一下 init()和Animation()函数就OK了。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/51abc65f977463d2beffc037852cf91c.html