Three.js实现太阳系⼋⼤⾏星的⾃转公转
⼀. Three.js框架简介
Three.js是⽤javascript编写的WebGL第三⽅库，运⽤three.js框架写3D程序，就如同在现实⽣活中观察⼀个3D场景⼀样，让⼈置⾝其
中。介绍three.js必须提到它的三⼤组件,Scene,Camera,Render。它们是整个框架的基础，有了这三个组件才能将物体渲染到⽹页上，实
现整个场景的搭建。
场景(scene)
顾名思义，就是⽤来放置所有的元素。
var scene = new THREE.Scene(); //建⽴场景
复制代码
相机(camera)
相机，我们要在哪个位置，如何去看这些元素。 相机分为多种，不展开介绍，这⾥我们使⽤的是 。
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000); //设置相机为⾓度60度，宽⾼⽐，最近端Z轴为1，最远端Z轴复制代码
我们可以通过⼀张来⾃three.js⽂档中的图⽚来了解这些属性
渲染器(render)
当把场景中的所有内容准备好后，就可以对场景进⾏渲染，表⽰我们怎样来绘制这些元素。 渲染器也分为多种，这⾥使⽤的是;
var renderer = new THREE.WebGLRenderer();
复制代码
具体步骤：建⽴元素->定义相机->搭建场景->将元素和相机放⼊场景中->渲染场景 具体代码我们会在后⾯介绍，然后让我们先瞅⼀眼效果
图。
⼆. 基本初始化
这⾥直接在CDN上引⼊three.js <script src="/three.js/r83/three.min.js"></script>
注：因为某些⾏星的⼤⼩，转速，距离差距过⼤，所以进⾏了⼀些不平衡调整。 下⾯将⼀⼀分析这些元素是如何放⼊的。
1.canvas
我们没有把场景直接挂载到body中，⽽是在body中放置了⼀个canvas画布，在其上显⽰。
2.背景
我们没有做3D的旋转背景，⽽是直接放了⼀张背景图作为⼩太阳系的背景。这张背景图是直接在canvas中放置的。
<canvas id="webglcanvas"></canvas>
renderer = new THREE.WebGLRenderer({ //定义渲染器
alpha: true, //让背景透明，默认是⿊⾊，以显⽰我们⾃⼰的背景图
});
renderer.tClearAlpha(0);
//css⽂件
#webglcanvas {
background: url(./images/bg4.jpg) no-repeat;
background-size: cover;
}
复制代码
但如果只是这样简单的操作是没有⽤的，因为在添加渲染器后，会默认添加⼀个背景颜⾊为⿊⾊。所以要在渲染器中设置它的alpha属性，
让背景透明，以显⽰我们⾃⼰的背景图
3.定义基本组件
定义场景
scene = new THREE.Scene(), //建⽴场景
定义照相机位置
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1,10000); //设置相机为⾓度60度，宽⾼⽐，最近端Z轴为1，最远端Z轴为10 camera.position.z = 2000; //调整相机位置
camera.position.y = 500;
复制代码
建⽴⼀个组
组可以看作是⼀些元素的容器，将某些有共同特征的元素放在⼀个组⾥。
group = new THREE.Group(), //建⽴⼀个组
我会在第三节解释为什么要建⽴额外16个组。
//下⾯这些组⽤来建⽴每个星球的⽗元素，以实现⼋⼤⾏星不同速度的公转与⾃转
人工的英文
var group1 = new THREE.Group();
groupParent1 = new THREE.Group();
group2 = new THREE.Group();
groupParent2 = new THREE.Group();
group3 = new THREE.Group();
groupParent3 = new THREE.Group();
group4 = new THREE.Group();
groupParent4 = new THREE.Group();
group5 = new THREE.Group();
groupParent5 = new THREE.Group();
group6 = new THREE.Group();
groupParent6 = new THREE.Group();
group7 = new THREE.Group();
驼铃的歌词groupParent7 = new THREE.Group();
group8 = new THREE.Group();
groupParent8 = new THREE.Group();
复制代码
定义渲染器
讨饭WebGLRenderer中有⼀个⽤来绘制输出的canvas对象，现在获取设置的canvas放⼊我们渲染器中的canvas对象中
var canvas = ElementById('webglcanvas'),
renderer = new THREE.WebGLRenderer({ //定义渲染器
alpha: true, //让背景透明，默认是⿊⾊以显⽰我们⾃⼰的背景图
canvas: canvas, //⼀个⽤来绘制输出的Canvas对象
antialias: true //抗锯齿
});
renderer.tSize(window.innerWidth, window.innerHeight); //设置渲染器的宽⾼
复制代码
4.初始化函数
在这个函数中进⾏⼀系列的初始化操作。
function init() { //⽤来初始化的函数
同心结scene.add(group); //把组都添加到场景⾥
scene.add(groupParent1);
scene.add(groupParent2);
scene.add(groupParent3);
scene.add(groupParent4);
scene.add(groupParent5);
scene.add(groupParent6);
scene.add(groupParent7);
scene.add(groupParent8);
var loader = new THREE.TextureLoader();/*材质纹理加载器*/
// 太阳
loader.load('./images/sun1.jpg', function (texture) {
var geometry = new THREE.SphereGeometry(250, 20, 20) //球体模型
var material = new THREE.MeshBasicMaterial({ map: texture }) //材质将图⽚解构成THREE能理解的材质
var mesh = new THREE.Mesh(geometry, material); //⽹孔对象第⼀个参数是⼏何模型(结构)，第⼆参数是材料(外观)
group.add(mesh);//添加到组⾥
})
// ⽔星
loader.load('./images/water.jpg', function (texture) {
var geometry = new THREE.SphereGeometry(25, 20, 20) //球型
var material = new THREE.MeshBasicMaterial({ map: texture }) //材质将图⽚解构成THREE能理解的材质
var mesh = new THREE.Mesh(geometry, material);
group1.position.x -= 300;
group1.add(mesh);有什么节日
groupParent1.add(group1);
})
//其它7颗⾏星参数因为太长了在这⾥就不给出了，但参数的设置原理都是⼀样的
}
复制代码
黑松露的功效简要解释⼀下：
var loader = new THREE.TextureLoader()；是定义了⼀个。
var geometry = new THREE.SphereGeometry(250, 20, 20)；建⽴⼀个，球体半径为250，⽔平分割⾯的数量20，垂直分割⾯的数量20。
var mesh = new THREE.Mesh(geometry, material);。
具体作⽤就是创建⼀个球体元素，先构建框架，在⽤⾏星的平⾯图将它包裹起来，就形成了⼀颗⾏星，再把这颗⾏星添加到组⾥，之后再把组添加到场景⾥。这⾥就构建单个元素的过程。
那么为什么太阳直接添加到组⾥，⽽⽔星要⽤两个组层级添加，且给它的位置设偏移呢。我们来到第三节。
三. ⾃转同时公转
旋转⽅式：我们要实现旋转功能有三种⽅式 1.旋转照相机 2.旋转整个场景(Scene) 3.旋转单个元素。
因为我们这⾥每个⾏星的⾃转速度，公转速度都不⼀样。所以设置整体旋转并不可⾏，所以要给每个元素设置不同的旋转属性。
旋转机制：这⾥介绍物体的rotation属性，相对于⾃⾝旋转。
例如：ation.y += 0.04; //整个场景绕⾃⾝的Y轴逆时针旋转
进⼊正题
Scene中的所有元素使⽤rotation.y属性，默认旋转轴都为这根Y轴，因为它们初始化Y轴就是这根轴。 所以让太阳旋转直接让它的组旋转就⾏了 ation.y += 0.04;
⽽其它⾏星需要让它们围绕着太阳转，就要先给它们⾃⾝设置⼀个位置偏移。例如⽔星：group1.position.x -= 300; ⽽此时设
置ation.y属性，它就会实现⾃转。因为它的Y轴位置已经改变了。
那么此时要想再实现公转，在这个对象中是找不到默认Y轴这根线的。所以我们给group1再设置了⼀个“⽗元
素”groupParent1。 groupParent1.add(group1);
当我们移动了group1时，groupParent1的位置是没有变的，⾃然它的Y轴也不会变，⼜因为groupParent1包含了group1，所以旋转groupParent1时，group1也会绕着初始的默认Y轴旋转。所以设置那么多组，是为了实现每颗⾏星不同的速度和公转的同时⾃转。
四. 其他实现函数
function render() {
camera.lookAt(scene.position); //让相机盯着场景的位置场景始终在中间
}
//设置公转
function revolution(){
横看成岭侧成峰远近高低各不同ation.y += 0.0005;
}
//设置⾃转
function lfRotation(){
}
function Animation() {
render();放风筝拼音
lfRotation();
revolution();
requestAnimationFrame(Animation);
}
复制代码
最后再调⽤⼀下 init()和Animation()函数就OK了。
觉得有点意思的就点个?8.
