前面两节讲得都是在舞台上创建角色，这一节我们就让角色动起来。
three.js 中一般是用requestAnimationFrame();来做动画，当然也可以用setInterval定时器，这里不建议使用。
因为动画的核心就只有这个函数，然后如何做成何种动画，就靠自己去构思，去尝试了。
话不多说，上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>three.js</title> <script src="js/three.js"></script> </head> <body> </body> </html> <script> // 创建场景 var scene = new THREE.Scene(); // 创建相机 90 -> 视角；相机拍摄面 -> 一般为长宽比；0.1 -> 近裁剪面； 1000 -> 远裁剪面 var camera = new THREE.PerspectiveCamera(90, window.innerWidth/window.innerHeight, 0.1, 1000); // 渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); // 设置背景颜色 renderer.setClearColor('#5AC7FF'); document.body.appendChild(renderer.domElement); // 创建物体 CubeGeometry 代表立体图形 1,3,2 分别代表长宽高 var geometry = new THREE.CubeGeometry(1,3,2,2,2,5); //网孔基础材料（MeshBasicMaterial）为其填充颜色 var material = new THREE.MeshBasicMaterial({color: "#990033"}); //网孔(Mesh)：网孔是用来承载几何模型的一个对象，还可以把材料应用到它上面 var cube = new THREE.Mesh(geometry, material); //将物体添加到场景 scene.add(cube); camera.position.z = 5; renderer.render(scene, camera); //渲染循环（render loop） function render() { // requestAnimationFrame 相当于setInterval requestAnimationFrame(render); // cube.rotation.x += 0.1; cube.rotation.y += 0.05; // cube.rotation.z += 0.1; renderer.render(scene, camera); } render(); </script>
这样，就可以在屏幕中间，看到一个自转的立方体。
说起自转，下节就讲讲如何在屏幕中间，做一个自转的地球。