动画渲染循环

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

请求动画帧window.requestAnimationFrame

requestAnimationFrame的功能就是调用函数周期性的执行

// requestAnimationFrame实现周期性循环执行
function render() {
    requestAnimationFrame(render);//请求再次执行函数render
}
render();

控制打印测试函数render是否重复循环执行

// requestAnimationFrame实现周期性循环执行
let i = 0;
function render() {
    i+=1;
    console.log('执行次数'+i);
    requestAnimationFrame(render);//请求再次执行函数render
}
render();

对于大部分低刷新率显示器电脑，一般requestAnimationFrame默认每秒钟执行60次(非严格，受到性能影响，也可能偏低),当然也有些支持高刷新率的电脑硬件，requestAnimationFrame每秒钟执行此时超过60也有可能。

threejs旋转动画

render每次执行，都把模型mesh绕着y轴旋转0.01弧度(注意这里单位不是度，是弧度)。

不过这时候，你看不到长方体网格模型mesh旋转，原因很简单，因为渲染器.render()方法仅仅执行了一次，相当于一次'拍照',得到一张静态图片。

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

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

每次render()函数执行的时候，都执行渲染器的渲染方法.render()，重新渲染新的图片，覆盖canvas画布上旧的图像，连续渲染执行，每次mesh旋转时候，也会重新渲染，一张张动态图片连起来就会看到动画的效果。

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();