【three.js】如何使物体进行匀速动画旋转？

使用动画渲染循环来做。threejs可以借助HTML5的API请求动画帧window.requestAnimationFrame实现动画渲染。

function render() {
    renderer.render(scene, camera); //执行渲染操作
    mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
    requestAnimationFrame(render)
}
render()

我们都知道 renderer.render(scene, camera)；这句代码的意思类似于照相机咔嚓的照张照片。我们小时候看的动画片基本上都是由很多张照片来拼接的。requestAnimationFrame(render)代表再次请求render()函数，有点像递归。整体意思就是物体每旋转0.01弧度就照一张照片渲染给我们显示，然后循环这个动作。

整体代码：

import * as THREE from './build/three.module.js'
// 引入轨道控制器扩展库Orbit