Three.js教程：旋转动画、requestAnimationFrame周期性渲染

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

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

基于WebGL技术开发在线游戏、商品展示、室内漫游往往都会涉及到动画，初步了解three.js可以做什么，深入讲解three.js动画之前，本节课先制作一个简单的立方体旋转动画。 本节课是在1.1节 第一个3D场景已绘制好的立方体代码基础上进行更改。

周期性渲染

在1.1节中讲解过，每执行一次渲染器对象WebGLRenderer的渲染方法.render()，浏览器就会渲染出一帧图像并显示在Web页面上，这就是说你按照一定的周期不停地调用渲染方法.render()就可以不停地生成新的图像覆盖原来的图像。这也就是说只要一边旋转立方体，一边执行渲染方法.render()重新渲染，就可以实现立方体的旋转效果。

为了实现周期性渲染可以通过浏览器全局对象window对象的一个方法setInterval(),可以通