Three.js学习08

最新推荐文章于 2025-07-01 16:08:40 发布

原创最新推荐文章于 2025-07-01 16:08:40 发布 · 299 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Three.js

提示：本系列文章参考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);