当前位置：首页 > news >正文

Vue3+Three.js：第05期时间控制，requestAnimationFrame vs Clock

news 2025/10/16 13:51:59

文章目录

目标
requestAnimationFrame传递给animate的时间参数
- 根据这个时间参数，我们实现官网的案例
- 总结
THREE.Clock
- 查看Clock
- 总结

目标

了解three.js中几个时间
理解，动画需要时间

requestAnimationFrame传递给animate的时间参数

根据这个时间参数，我们实现官网的案例

function animate(timestamp) {console.log("当前帧时间戳:", timestamp);// 动画逻辑...
}
requestAnimationFrame(animate);

requestAnimationFrame是window身上的一个函数，animate是作为形参，传入requestAnimationFrame，是requestAnimationFrame的回调函数。
当requestAnimationFrame调用animate时，会给它传入一个时间戳，表示动画的时间与动画开始时间的差值，即动画开始了多长时间。
有了这个时间，我们就可以做很多事情，我们可以得到时间差，代码如下

let startTime = 0
// 5.动画循环渲染场景
function animate(time: number = 0) {const deltaTime = (time - startTime) / 1000// console.log(deltaTime)startTime = timerequestAnimationFrame(animate)// 渲染场景renderer.render(scene, camera)
}

我们在渲染官方的第一个样例时，用到了这个时间差。代码如下：

const clock = new THREE.Clock()
// 5.动画循环渲染场景
function animate() {requestAnimationFrame(animate)mixer && mixer.update(clock.getDelta()) // 更新3D模型的动画controls.update()// 如果启用了自动绕Z轴旋转if (autoRotateZ && model) {model.rotation.z += rotationSpeedZ}// 渲染场景renderer.render(scene, camera)
}

这里用的是three身上的clock，如果我们改为上面的也是一样。先看代码：

在这里插入图片描述

这样我们就取代了clock，而是使用了requestAnimationFrame这个函数在调用animate时，给它传入的时间参数。页面效果不变。

在这里插入图片描述

总结

requestAnimationFrame传递给animate的时间是一个毫秒单位的开始动画的时间。但我们这里根据编码的方式，实现拿到时间差。传递给混合器即可。
着重理解时间的概念，在动画里面本来就有时间这个概念，动画是在不同时间上的不同图片根据时间来按次序组成并播放的的。
主要的时间也就是当前时间、时间差、开始时间、结束时间、总时长等。（我们这里动画开始时间为0，其他的都可以根据每一帧的时间算出来）
接下来，我们再看看threejs的clock。