前面两节讲得都是在舞台上创建角色，这一节我们就让角色动起来。
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>这样，就可以在屏幕中间，看到一个自转的立方体。
说起自转，下节就讲讲如何在屏幕中间，做一个自转的地球。
three.js - (入门三)
原文地址：https://www.cnblogs.com/lafitewu/p/8118523.html