Three.js教程：动画渲染循环

最新推荐文章于 2025-05-03 18:44:27 发布

ygtu2018

最新推荐文章于 2025-05-03 18:44:27 发布

阅读量380

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/ygtu2018/article/details/131285783

文章介绍了如何将NSDT场景编辑器整合到3D工具链中，利用threejs的requestAnimationFrame实现动画渲染循环。通过控制渲染间隔和帧率来优化动画效果，并提到了OrbitControls相机控件在渲染循环中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

推荐：将 NSDT场景编辑器 加入你的3D工具链

其他系列工具： NSDT简石数字孪生

动画渲染循环

threejs可以借助HTML5的API请求动画帧window.requestAnimationFrame实现动画渲染。

请求动画帧`window.requestAnimationFrame`

// requestAnimationFrame实现周期性循环执行
// requestAnimationFrame默认每秒钟执行60次，但不一定能做到，要看代码的性能
let i = 0;
function render() {
    i+=1;
    console.log('执行次数'+i);
    requestAnimationFrame(render);//请求再次执行函数render
}
render();

threejs旋转动画

动画说白了就是一张张照片，连起来依次展示，这样就形成一个动画效果，只要帧率高，人的眼睛就感觉不到卡顿，是连续的视频效果。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
// renderer.render(scene, camera); //执行渲染操作
document.body.appendChild(renderer.domElement);

// 渲染函数
function render() {
    renderer.render(scene, camera); //执行渲染操作
    mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
    requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}
render();

计算两帧渲染时间间隔和帧率

// 渲染循环
const clock = new THREE.Clock();
function render() {
    const spt = clock.getDelta()*1000;//毫秒
    console.log('两帧渲染时间间隔(毫秒)',spt);
    console.log('帧率FPS',1000/spt);
    renderer.render(scene, camera); //执行渲染操作
    mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
    requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}
render();