threejs指南1：一个旋转的立方体
创建场景
threejs展示的三要素：场景（scene），相机（camera）和呈现器（renderer）。最终通过相机来呈现场景。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>My first three.js app</title> <style> body { margin: 0; } </style> </head> <body> <script src="js/three.js"></script> <script> // Our Javascript will go here. </script> </body></html>
然后我们在脚本区域加入如下代码：
const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );const renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
threejs提供了多种camera，我们先使用PerspectiveCamera，第一个参数是视图区域（field of view，FOV），表明展示的景宽。
第二个参数是纵横比（aspect ratio）展示区域的宽高比。
第三个和第四个参数分别是最小和最大可视距离，表面展示物体与相机的距离在此范围才是可视的。
神奇将在renderer发生。目前我们使用WebGLRenderer。
使用呈现区域的宽和高来设定呈现器尺寸比较好。此例中呈现区域占满整个浏览器窗口。可以使用setSize设定尺寸。
然后把呈现器元素（canvas）添加到网页元素。
场景有了，我们可以向场景中添加物体。先添加一个立方体：
const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );const cube = new THREE.Mesh( geometry, material );scene.add( cube );camera.position.z = 5;
为了添加一个立方体, 我们需要一个 BoxGeometry对象. 此对象包含了立方体所有的点 (vertices) 和面 (faces) 的信息。
再给立方体涂上颜色，Three.js提供了很多种材质（Material），我们先使用MeshBasicMaterial。我们先简单用一种颜色。
The third thing we need is a Mesh. A mesh is an object that takes a geometry, and applies a material to it, which we then can insert to our scene, and move freely around.
第三步，我们需要一个网格（Mesh）对象。此对象将材质附着到物体。
scene.add()默认将物体添加到 (0,0,0)坐标. 这会导致目前相机和立方体重叠。我们将相机移动一点，避免重叠。
呈现场景
创建好的场景还需要呈现才能展示出来。
function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera );}animate();
requestAnimationFrame 创建一个循环，以展示当前场景。
让立方体动起来
上面的代码运行之后会展示一个静态的场景和物体，我们让立方体旋转起来。
在上面的animate函数中添加下面的语句：
cube.rotation.x += 0.01;cube.rotation.y += 0.01;
随着循环调用，立方体的坐标在变化，实现了立方体的旋转。
总结
很简单，我们完成了第一个程序，完整代码如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>My first three.js app</title> <style> body { margin: 0; } </style> </head> <body> <script src="js/three.js"></script> <script> const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); const cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; function animate() { requestAnimationFrame( animate ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); }; animate(); </script> </body></html>