提示:本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。
前言
本篇主要介绍旋转,以地球自转和月球绕地球转举例。
一、旋转
1.地球自转
绕自己中心轴的向量一直旋转即可。
1.1 绕某个向量旋转一个角度
rotateOnAxis(axis, angle)方法相比.rotateX、.rotateY、.rotateZ更通用,可以实现立方体绕任何轴旋转,参数axis表示旋转轴,使用对象Vector3表示,angle表示旋转角度。
如绕向量axis(0,1,0)旋转:
var axis = new THREE.Vector3(0,1,0);//创建向量axis
mesh.rotateOnAxis(axis,Math.PI/4);//绕axis向量旋转π/4
1.2 地球自转(一直旋转)
// 创建一个时钟对象Clock
var clock = new THREE.Clock();
//获取自时钟启动后的秒数,摒弃将 oldTime 设置为当前时间
const elapsed = clock.getElapsedTime();//获取时间
var oldtime = 0;
// 地球自转
var axis = new THREE.Vector3(0, 1, 0);
//旋转 时间
earth.rotateOnAxis(axis, (elapsed - oldtime) * Math.PI / 10);
oldtime = elapsed;
requestAnimationFrame(函数名);
作用是向浏览器发送请求希望稍后调用函数,将这句话写在函数里面,就可以形成不停地调用函数的周期性旋转效果。
requestAnimationFrame(函数名);
2.月球绕地球转
直接设置位置 mesh.position.set()
如果是绕Y轴旋转,设置坐标。
X:Math.sin(均匀变化的函数)*旋转半径
Y:0
Z:Math.cos(均匀变化的函数)*旋转半径
这里均匀变化的函数设置为时钟的描述,为一直增加的一次函数。
//获取自时钟启动后的秒数,摒弃将 oldTime 设置为当前时间
const elapsed = clock.getElapsedTime();//获取时间
//月球位置x坐标:sin(时间)*半径
moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed) * 5);
3.效果
形成的效果: