three.js：requestAnimationFrame的理解

动画函数requestAnimationFrame()
requestAnimationFrame()是浏览器window对象的方法，参数是将要被调用函数的函数名，requestAnimationFrame()调用一个函数不是立即调用而是向浏览器发起一个执行某函数的请求，什么时候执行由浏览器决定，一般默认是60FPS的频率，也就是大约每16.7ms调用一次requestAnimationFrame()方法指定的函数。

3D模型旋转.png

首先照样的先要创建相机、渲染器、场景、以及网格等对象：

        var scene, camera, renderer, mesh; //定义场景、相机、渲染器、网格
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(30, 1280 / 720, 0.1, 1000);

创建好网格,使用wireframe表示不再以实体的形式显示,只显示线框：

        mesh = new THREE.Mesh(
            new THREE.BoxGeometry(1, 1, 1),
            new THREE.MeshBasicMaterial({
                color: 0x40C4FF,
                wireframe: true,
                transparent: true
            })
        )

创建好网格后，把网格塞进场景中去：

        scene.add(mesh);

给相机一个位置以及相机眼睛看向的方向：

        camera.position.set(10, 10, 10);
        camera.lookAt(new THREE.Vector3(0, 0, 0))

创建渲染器，创建完后把渲染器加入到文档流中去：

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(1280, 720);

        document.body.appendChild(renderer.domElement);

添加一个旋转动画：

        function animate() {
            requestAnimationFrame(animate); //每一帧回调执行这个函数
            // mesh.position.x += 0.01;
            // mesh.position.z += 0.01;
            mesh.rotateY(0.01);
            mesh.rotateX(0.01);
            renderer.render(scene, camera);
        }

执行这个动画

animate();

注意：没执行一次渲染器对象WebGLRenderer的渲染方法render(场景，相机)，浏览器就会渲染出一帧图像并显示在Web页面上，也就是说，想要实现3D模型的动画效果，只需要在你的animate()方法中不断的按照一定的周期去执行渲染方法render()，就可以不停的生成新的图像并覆盖原来的图像，也就是说一边旋转，一边执行重新渲染的方法。

three.js：requestAnimationFrame的理解

推荐阅读更多精彩内容