在Three.js中一个模型围绕一个中心做圆周运动,比如地球绕太阳公转运动。
以坐标原点为中心,绕着坐标系Y轴旋转
var angle = 0;
(function animation() {
// 每次执行渲染函数redner时候,角度累加0.005
angle += 0.005;
// 圆周运动网格模型x坐标计算 绕转半径400
var x = 400 * Math.sin(angle);
// 圆周运动网格模型y坐标计算 绕转半径400
var z = 400 * Math.cos(angle);
// 每次执行render函数,更新需要做圆周运动网格模型Mesh的位置属性
controls.object.position.set(x, 3000, z);
webGLRenderer.render(scene, camera);
controls.update();
requestAnimationFrame(animation);
})();
如果需要改变圆周运动的中心,比如绕转轴x坐标200,z坐标300
// 圆周运动网格模型x坐标计算
var x = 400 * Math.sin(angle)+200
// 圆周运动网格模型y坐标计算
var z = 400 * Math.cos(angle)+300