WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

Three.js圆周运动(绕轴旋转)

在Three.js中一个模型围绕一个中心做圆周运动,比如地球绕太阳公转运动。

以坐标原点为中心,绕着坐标系Y轴旋转

// 声明一个变量angle表示角度位置
let angle = 0;
function render() {
  renderer.render(scene, camera);
  // 每次执行渲染函数redner时候,角度累加0.005
  angle += 0.005;
  // 圆周运动网格模型x坐标计算  绕转半径400
  var x = 400 * Math.sin(angle)
  // 圆周运动网格模型y坐标计算  绕转半径400
  var z = 400 * Math.cos(angle)
  // 每次执行render函数,更新需要做圆周运动网格模型Mesh的位置属性
  Mesh.position.set(x, 0, z);
  requestAnimationFrame(render);
}
render();

如果需要改变圆周运动的中心,比如绕转轴x坐标200,z坐标300

// 圆周运动网格模型x坐标计算
var x = 400 * Math.sin(angle)+200
// 圆周运动网格模型y坐标计算
var z = 400 * Math.cos(angle)+300
本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com