Three.js 圆周运动 绕轴旋转

发布于 2021-08-07 13:09:10 字数 698 浏览 1702 评论 0

在 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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

甜柠檬

暂无简介

0 文章
0 评论
19202 人气
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文