threejs行星运动小demo总结

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.动画构思

就是中间有个红太阳，外面有几个行星球体环绕着太阳在各自轨道上做圆周运动。下面是效果图

2.基本要素

使用threejs的基本构件包括：渲染器(renderer)，相机(camera)，场景(scene)，光线(light)。首先将这些基本构件都分别初始化一下。

2.1初始化渲染器

渲染器可以理解为画布，用于绘制照相机观察到的画面，一般使用WebGLRenderer这种类型的渲染器，其余还有CanvasRenderer等别的类型，这里不做介绍了。

function initThree(){
width=window.innerWidth;
height=window.innerHeight;
renderer=new THREE.WebGLRenderer({
antialias : true //开启抗锯齿
});
renderer.setSize(width,height);//设置画布大小
renderer.setClearColor(0x000000);//设置画布背景颜色
document.body.appendChild(renderer.domElement);//将画布追加到html文档中
}

2.2初始化照相机

照相机分为两种，透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。

透视相机符合人的视觉直接，近大远小。新建一个透视相机

new THREE.PerspectiveCamera(
,//视野角度
width/height,//纵横比=>视野形状长形还是方形
,//近景距离
);//远景距离

正交相机，物体大小不随距离远近变化，常用于建筑方面，新建一个正交相机视景体

new THREE.OrthographicCamera( //正交摄像机=>视景体
window.innerWidth / - 2, //左平面距离视点距离
window.innerWidth / 2, //右平面距离视点距离
window.innerHeight / 2, //上平面距离视点距离
window.innerHeight / - 2, //下平面距离视点距离
10, //近平面距离视点距离
1000 );//远平面距离视点距离

这里我使用透视相机，初始化相机代码

function initCamera(){
camera=new THREE.PerspectiveCamera(45,width/height,1,10000);
camera.position.x=100;
camera.position.y=100;
camera.position.z=100;
camera.up.x=0;
camera.up.y=1;
camera.up.z=0;
camera.lookAt(0,0,0);
}

camera.position设置了相机的位置，这里是在空间坐标系中的（100,100,100）这个位置。camera.up设置了相机头部朝向方向，这里设置了y=1,就是（0,0,0）和（0,1,0）连线作为上方，就是y轴向上，整个空间坐标系以此方向来放置。

camera.lookAt设置了相机视点方向，就是照相机往哪里拍的问题。

2.3初始化场景

只需要scene=new THREE.Scene()；场景是存放光线，物体等各类构件的容器，只有在场景中的物体才能被相机拍到。

2.4初始化光源

光源一共有好多种，各类光源都有自身的特性。这里介绍几种光源：

环境光（AmbientLight）:各个位置的光线相同，无法确定光源。例：new THREE.AmbientLight( 0xff0000 );//参数：颜色；

方向光（DirectionLight）:来自某一方向的光源。例：new THREE.DirectionalLight(0xFF0000,1); //参数：颜色，强度（0~1）；

点光源（PointLight）:光线来自某一点。例：new THREE.PointLight( 0xff0000,1,0 );//参数：颜色，光源强度（0~1），距离（从最大值衰减到0，需要的距离，默认为0，不衰减）；

聚光灯（SpotLight）:例：new THREE.SpotLight( 0xff0000,1,0,30,0 );//参数：颜色，光源强度（0~1），距离（从最大值衰减到0，需要的距离，默认为0，不衰减）,角度（聚光灯着色的角度，用弧度作为单位，这个角度是和光源的方向形成的角度），exponent（光源模型中，衰减的一个参数，越大衰减约快。）

这里我们使用方向光：

function initLight(){
light=new THREE.DirectionalLight(0xffffff,1);
light.position.set(10,10,3);//设置光源方向
scene.add(light);//将光源添加到场景中
}

2.5画个球体

首先需要绘制一个几何形状，threejs里面有很多的二维和三维形状，比如长方体（cubeGeometry），平面（PlaneGeometry），球体（SphereGeometry）,圆形（CircleGeometry），圆柱体（CylinderGeometry）等，这里不展开了。

这里需要绘制个球形（SphereGeometry）：

THREE.SphereGeometry(
radius, //半径
segmentsWidth, //经度上的切片数（在起始经度和经度跨度的范围内，像切西瓜从上往下切，切的片数）
segmentsHeight, //纬度上的切片数（在起始纬度和纬度跨度的范围内，切西瓜从左往右切，切出来的层数）
phiStart, //经度开始的弧度
phiLength, //经度跨过的弧度
thetaStart, //纬度开始的弧度
thetaLength //纬度经过的弧度
)

初始化球体代码

var sunMesh;//太阳
function initSun(){
var geometry=new THREE.SphereGeometry(10,28,22);//球体半径为10，经度切为28份，纬度切为22份（根据需要自行设置）
var material=new THREE.MeshLambertMaterial({color:0xff0000})//使用Lambert材质，设为红色
sunMesh=new THREE.Mesh(geometry,material);//使用网格创建物体
sunMesh.position.set(0,0,0);//设置球体位置
scene.add(sunMesh);//添加到场景中
}

关于材质这里介绍三种：

基本材质（BasicMaterial）：渲染后物体的颜色始终为该材质的颜色，而不会由于光照产生明暗、阴影效果。如果没有指定材质的颜色，则颜色是随机的。

Lambert材质（LambertMaterial）：是符合 Lambert 光照模型的材质。Lambert 光照模型的主要特点是只考虑漫反射而不考虑镜面反射的效果，因而对于金属、镜子等需要镜面反射效果的物体就不适应，对于其他大部分物体的漫反射效果都是适用的。

Phong材质（PhongMaterial）：是符合 Phong 光照模型的材质。和 Lambert 不同的是，Phong 模型考虑了镜面反射的效果，因此对于金属、镜面的表现尤为适合。

构造函数都要传入配置项options,常用属性包括：

visible ：是否可见，默认为 true
side ：渲染面片正面或是反面，默认为正面 THREE.FrontSide ，可设置为反面THREE.BackSide ，或双面 THREE.DoubleSide
wireframe ：是否渲染线而非面，默认为 false
color ：十六进制 RGB 颜色，如红色表示为 0xff0000
map ：使用纹理贴图

2.6,绘制多个不同颜色的球体

使用循环体循环上面的代码，注意根据需要修改一些参数，比如半径和位置信息，然后将生成的球体存放到数组中方便后面动画中使用。

生成16进制颜色

function getColor(){
//定义字符串变量colorValue存放可以构成十六进制颜色值的值
var colorValue="0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
//以","为分隔符，将colorValue字符串分割为字符数组["0","1",...,"f"]
var colorArray = colorValue.split(",");
var color="#";//定义一个存放十六进制颜色值的字符串变量，先将#存放进去
//使用for循环语句生成剩余的六位十六进制值
for(var i=0;i<6;i++){
//colorArray[Math.floor(Math.random()*16)]随机取出
// 由16个元素组成的colorArray的某一个值，然后将其加在color中，
//字符串相加后，得出的仍是字符串
color+=colorArray[Math.floor(Math.random()*16)];
}
return color;
}

循环新建球体

2.7绘制圆环

一种简单的方式是使用几何形状圆形来绘制，缺点是会有多余的切片线。

另一种方式是用画线的方式来画圆THREE.Line

首先定义一个几何形状，在几何形状的vertices中push进每一个点（Vector3），点坐标是根据角度计算得出的。弧度制中一整个圆就是2PI的弧度，PI/180代表1角度，分成60段，每段就是PI/30的角度。再由sin和cos计算出坐标值。

现在运行下可以看到效果啦

function init(){
initThree();
initCamera();
initScene();
initLight();
initSun();
initball();
// initCycle();
initCycle2();
renderer.render( scene, camera );
}

3.让画面动起来

我们希望不同的球体以不同的速度做圆周运动。这里的速度应该是角速度，也就是不同的球体要在每一帧中转过不同的角度。然后根据每个球体所在圆环的半径来重新设置球体的坐标，球体就会运动起来了。

首先设置统一的起始角度，设置在x轴上，那么角度就是PI/2。然后设置每次转动的角度。

var deg=Math.PI/2;
function ballAnim(){
deg+=1/6*Math.PI/180;//每次转动1/6度
balls.forEach((ball,index)=>{
var ballDeg=3*deg/(index+1);//根据索引值设置每个球体转动不同的角度
ball.position.x=Math.sin(ballDeg)*circles[index];
ball.position.z=Math.cos(ballDeg)*circles[index];
})
}

最后是使用requestAnimationFrame来不停的刷新画面，从而产生动画。

function anim(){
ballAnim();
renderer.render( scene, camera );
requestAnimationFrame(anim);
}//执行即可
init()
anim()

4.性能监控（FPS）

引入stats.js，新建一个实例，在动画函数anim中调用其update方法。

function setStats(){
stats=new Stats();
stats.domElement.style.position='absolute';
stats.domElement.style.left='0';
stats.domElement.style.top='0';
document.body.appendChild(stats.domElement);
}

修改anim方法

function anim(){
ballAnim();
renderer.render( scene, camera );
stats.update()
requestAnimationFrame(anim);
}

5.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo-sun</title>
<style>
canvas{width:100%;height:100%;}
</style>
<script src="./three.min.js"></script>
<script src="./stats.js"></script>
</head>
<body>
<script>
var renderer,camera,scene,stats,light;
var width,height; function initThree(){
width=window.innerWidth;
height=window.innerHeight;
renderer=new THREE.WebGLRenderer({
antialias : true //开启抗锯齿
});
renderer.setSize(width,height);//设置画布大小
renderer.setClearColor(0x000000);//设置画布背景颜色
document.body.appendChild(renderer.domElement);//将画布追加到html文档中
} function setStats(){
stats=new Stats();
stats.domElement.style.position='absolute';
stats.domElement.style.left='0';
stats.domElement.style.top='0';
document.body.appendChild(stats.domElement);
} function initCamera(){
camera=new THREE.PerspectiveCamera(45,width/height,1,10000);
camera.position.x=100;
camera.position.y=100;
camera.position.z=100;
camera.up.x=0;
camera.up.y=1;
camera.up.z=0;
camera.lookAt(0,0,0);
} function initScene(){
scene=new THREE.Scene();
} function initLight(){
light=new THREE.DirectionalLight(0xffffff,1);
light.position.set(10,10,3);
scene.add(light);
} var sunMesh;//太阳
function initSun(){
var geometry=new THREE.SphereGeometry(10,28,22);//球体半径为10，经度切为28份，纬度切为22份（根据需要自行设置）
var material=new THREE.MeshLambertMaterial({color:0xff0000})//使用Lambert材质，设为红色
sunMesh=new THREE.Mesh(geometry,material);
sunMesh.position.set(0,0,0);//设置球体位置
scene.add(sunMesh);//添加到场景中
} var balls=[];
function initball(){
for(var i=2;i<6;i++){
var geometry=new THREE.SphereGeometry(2+i/2,22,16);
var material=new THREE.MeshLambertMaterial({color:getColor()})
ball=new THREE.Mesh(geometry,material);
ball.position.set(10*i,0,0);
scene.add(ball);
balls.push(ball)
}
} function getColor(){
//定义字符串变量colorValue存放可以构成十六进制颜色值的值
var colorValue="0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
//以","为分隔符，将colorValue字符串分割为字符数组["0","1",...,"f"]
var colorArray = colorValue.split(",");
var color="#";//定义一个存放十六进制颜色值的字符串变量，先将#存放进去
//使用for循环语句生成剩余的六位十六进制值
for(var i=0;i<6;i++){
//colorArray[Math.floor(Math.random()*16)]随机取出
// 由16个元素组成的colorArray的某一个值，然后将其加在color中，
//字符串相加后，得出的仍是字符串
color+=colorArray[Math.floor(Math.random()*16)];
}
return color;
} var circles=[]
function initCycle(){
//用画二维图形的方式画圆
for(var i=2;i<6;i++){
var radius=10*i;//设置同心圆，只有半径不一样
var geometry=new THREE.CircleGeometry(radius,10);//半径，分段数
var material=new THREE.MeshBasicMaterial({color:0xffa500,wireframe:true })
var cycleMesh=new THREE.Mesh(geometry,material);
cycleMesh.position.set(0,0,0);
cycleMesh.rotateX(Math.PI/2);//默认是绘制在xy平面的，所以这里要旋转下放到xz平面
scene.add(cycleMesh);
circles.push(radius)
}
} function initCycle2(){
//用画线方式画圆
for(var j=2;j<6;j++){
var radius=10*j;
var lineGeometry=new THREE.Geometry();
for(var i=0;i<2*Math.PI;i+=Math.PI/30){
lineGeometry.vertices.push(new THREE.Vector3(radius*Math.cos(i),0,radius*Math.sin(i),0))
}
var material=new THREE.LineBasicMaterial({color:0xffa500 })
var cycleMesh=new THREE.Line(lineGeometry,material);
cycleMesh.position.set(0,0,0);
scene.add(cycleMesh);
circles.push(radius)
}
} var deg=Math.PI/2; function ballAnim(){
deg+=1/6*Math.PI/180;//每次转动1/6度
balls.forEach((ball,index)=>{
var ballDeg=3*deg/(index+1);//根据索引值设置每个球体转动不同的角度
ball.position.x=Math.sin(ballDeg)*circles[index];
ball.position.z=Math.cos(ballDeg)*circles[index];
})
} function init(){
initThree();
setStats();
initCamera();
initScene();
initLight();
initSun();
initball();
// initCycle();
initCycle2();
} function anim(){
ballAnim();
renderer.render( scene, camera );
stats.update()
requestAnimationFrame(anim);
} init()
anim() </script>
</body>
</html>