用三个js实现太阳系八大行星的自转和公转

一、三网融合框架介绍

Three.js是一个用javascript编写的WebGL第三方库。用Three.js的框架写3D程序，就像观察现实生活中的3D场景一样。要介绍three.js，我们必须提到它的三个组件，场景，相机，渲染渲染。它们是整个框架的基础。只有有了这三个组件，我们才能将对象渲染到网页上，并构建整个场景。

场景(场景)

顾名思义，它用于放置所有元素。

var场景=新三。场景()；//设置场景摄像机

相机，我们要去哪里，如何看待这些元素。

相机种类很多，就不介绍了。这里我们使用透视相机。

var camera=new THREE。透视摄像机(60，window . inner width/window . inner height，1，10000)；//将相机设置为60度角，长宽比，最近的Z轴为1，最远的Z轴为10000。我们可以通过three.js文档中的图片来理解这些属性。

渲染器

当场景中的一切都准备好了，我们就可以渲染场景并展示我们是如何绘制这些元素的。

渲染器有很多种，这里使用的是WebGLRenderer。

var渲染器=new THREE。WebGLRenderer()；具体步骤：构建元素-定义相机-构建场景-将元素和相机放入场景-渲染场景

我们后面会介绍具体的代码，然后我们先来看看渲染。

二.基本初始化

在这里直接介绍三. js给CDN

script src=' http :https://cdn . bootcss.com/three . js/r83/three . min . js '/脚本注意：由于部分行星大小、速度、距离差异较大，所以做了一些不平衡的调整。

下面将逐一分析这些元素是如何放入的。

1 .画布

我们没有将场景直接安装到主体中，而是在主体中放置一个画布并在上面显示。

2.背景

我们没有制作3D旋转背景，而是直接放一张背景图片作为小太阳系的背景。这张背景图片直接放在画布上。

canvas id=' webglcanvas '/canvas renderer=new three . webglrenderer({//定义renderer alpha: true，//使背景透明，默认为黑色显示我们自己的背景图片})；renderer . setclearalpha(0)；//css文件# webglcanvas { background : URL()。/images/bg4.jpg)不重复；背景尺寸：封面；}但是，这样简单操作是没有用的，因为添加渲染器后，默认会添加一个背景色为黑色。因此，我们应该在渲染器中设置其alpha属性(WebGL渲染器和属性方法)，以使背景透明，从而显示我们自己的背景图像

3.定义基本组件

定义场景

场景=新三。场景()，//建立场景定义摄像机位置

相机=新的三。透视摄像机(60，window . inner width/window . inner height，1，10000)；//将相机设置成60度角，宽高比，最近的Z轴为1，最远的Z轴为10000 camera . position . Z=2000；//调整相机位置camera . position . y=500；建立一个小组

组可以看作是一些元素的容器，一些具有共同特征的元素被放入一个组中。

Group=new THREE。Group()，//设置一个组。我会解释为什么要在第三部分增设16个小组。

//用下面几组来建立每颗行星的母元素，实现八颗行星不同速度的公转和自转。var group1=new THREE。group()；groupParent1=new THREE。group()；group2=新的THREE。group()；groupParent2=新的THREE。group()；group3=新的THREE。group()；groupParent3=new THREE。group()；group4=新的THREE。group()；groupParent4=新的THREE。group()；组5=新的三。group()；groupParent5=new THREE。group()；组6=新的三。group()；groupParent6=new THREE。group()；group7=新的THREE。group()；groupParent7=new THREE。group()；group8=新的THREE。group()；groupParent8=new THREE。group()；定义渲染器

在WebGLRenderer中有一个用于绘制输出的画布对象。现在获取设置画布，并将其放入渲染器中的画布对象

varcanvas=document . getelementbyid(' webglcanvas ')，渲染器=new three . webglrenderer({//定义渲染器alpha3360true，//使背景透明，默认为黑色显示我们自己的背景图片Canvas: canvas，//一个用于绘制输出抗锯齿的canvas对象： true //抗锯齿})；renderer . setsize(window . inner width，window . inner height)；//设置渲染器的宽度和高度4。初始化函数

在此功能中执行一系列初始化操作。

函数init() {//用于初始化函数scene . add(group)；//将所有组添加到场景场景. add(GroupParent 1)；scene . add(GroupParent 2)；scene . add(GroupParent 3)；scene . add(GroupParent 4)；scene . add(GroupParent 5)；scene . add(GroupParent 6)；scene . add(GroupParent 7)；scene . add(GroupParent8)；var loader=new THREE。textileloader()；/*材质纹理加载器*///sunloader.load('。/images/sun1.jpg '，函数(纹理){ vargeometry=new three . sphereometry(250，20，20)//ball model varmaterial=new three。mesh basicmaterial({ map : texture })//素材将图片分解为一个素材varmesh=newthree。三者都能理解的网格(几何、材料)；//网格对象的第一个参数是几何模型(结构)，第二个参数是材质(外观)组. add(网格)。//添加到组中})//水银加载器。加载('。/images/water.jpg '，函数(纹理){var geometry=new three .球面几何(25，20，20) //球面varmaterial=newTHREE。mesh bisc material({ map : texture })//该材质将图片分解为一个材质varmesh=newthree。三者都能理解的网格(几何、材料)；group 1 . position . x-=300；group1.add(网格)；group parent 1 . add(group 1)；})//这里没有给出其他七颗行星的参数，因为它们太长了，但是设置参数的原理是一样的。}简要说明：

var loader=new THREE。textileloader()；被定义为材质纹理加载器。

变化几何=新三。球面测量法(250，20，20)；建立球体半径为250，水平分割面数为20，垂直分割面数为20的球体模型。

var mesh=new THREE。网格(几何、材料)；网格对象。

具体功能是创建一个球体元素。首先构建一个框架，用行星的平面图包裹起来形成一个行星，然后将行星添加到组中，再将组添加到场景中。下面是构建单个元素的过程。

那么为什么太阳直接加到团里，而水星要加两个团级，位置要偏移呢？我们来到第三季度。

3.旋转和同步旋转

旋转方式：旋转功能有三种实现方式

1.旋转摄像机2。旋转整个场景)3。旋转单个元素。

因为这里每个星球的自转速度和公转速度都不一样。因此，设置整个旋转是不可行的，所以需要为每个元素设置不同的旋转属性。

旋转机制：本文介绍了一个对象的旋转属性，它相对于自身旋转。

例如：

scene . rotation . y=0.04；//整个场景围绕Y轴逆时针旋转进入正题

场景中的所有元素都使用rotation.y属性，默认的旋转轴就是这个Y轴，因为它们的初始化Y轴就是这个轴。所以只要让太阳旋转，让它的群直接旋转。group . rotation . y=0.04；

当其他行星需要围绕太阳旋转时，它们必须首先为自己设定一个位置偏移量。比如水星：group 1 . position . x-=300；此时，设置group1.rotation.y属性，它将实现旋转。因为它的Y轴位置发生了变化。

这时如果想再次实现公转，在这个物体中找不到默认的Y轴。因此，我们为group1设置了一个“父元素”groupParent1。group parent 1 . add(group 1)；

当我们移动group1时，groupParent1的位置没有改变，自然它的Y轴也没有改变。因为groupParent1包含group1，所以在旋转groupParent1时，group1也会围绕初始默认Y轴旋转。因此，设置了这么多组，以实现每个行星以不同的速度和转数同时旋转。

四。其他实现函数

函数render(){ render。渲染(场景，相机);摄像机。观察（场景。位置);//让相机盯着场景的位置场景始终在中间} //设置公转函数revolution(){ GroupParent 1。旋转。y=0.15第二组家长。旋转。y=0.065第三组家长。旋转。y=0.05第四组家长。旋转。y=0.03第五组家长。旋转。y=0.001第六组家长。旋转。y=0.02第七组家长。旋转。y=0.0005第八组家长。旋转。y=0.003} //设置自转函数自旋转(){ group。旋转。y=0.04第一组。旋转。y=0.02第二组。旋转。y-=0.005；第三组。旋转。y=1；第四组。旋转。y=1；第五组。旋转。y=1.5第六组。旋转。y=1.5第七组。旋转。y-=1.5；第八组。旋转。y=1.2}函数动画(){ render()；自旋转()；革命();请求动画框架（动画);}最后再调用一下init()和动画()函数就好了。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。