创建场景
本节目的是简要介绍three.js。我们通过设定一个有一个3D立方体的场景开始本节。如果你碰到什么疑难问题可以在本文最后看到一个正常可以执行的页面实例。
开始之前
在使用three.js之前，你需要网页某个地方来承载显示3D的场景。把如下代码考本到你本机的某个空白的*.html里面去，关键是<script src="引用three.js的路径"></script>，这个引用路径很重要。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style> body { margin: 0; } canvas { width: 100%; height: 100% } </style>
</head>
<body>
<script src="js/three.js"></script>
<script>
//这里可以写你的three.js代码了
</script>
</body>
</html>
在脚本标签区域写你的three.js脚本！
创建场景
实际上使用three.js可以显示一切，只需要做3件事情：一个场景、一个相机、一个渲染器。这样我们可以使用相机来渲染场景。
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
稍微解释一下这里发生了什么。
我们现在设定了场景，相机和渲染器。其实three.js里面有不同的相机类别。现在，我们使用透视相机（perspectiveCamera）。
第1个属性是视野角FieldofView：镜头所能覆盖范围，超过这个角就不会再相机范围里。
第2个是长宽比，几乎总是使用元素的宽度/长度，否则你会发现画面别扭如同在宽屏电视上播放老电影一样，画面变形！
接着2个属性是裁切平面的近、远值。意思是，在近、远之间的物体才会被相机看见。其他范围就不可见了。现在你别担心，可以在你的应用里面调整合适的值来获取最佳性能。
下面就是渲染器了，这就是神奇的地方了。除了我们这里使用的WebGLRenderer，浏览器会在老版本浏览器或者不支持WebGL的浏览器中返回一些回执！
除了创建渲染器实例，我们也可以设定我们想渲染的尺寸。使用我们想填充的区域的宽度和高度比较好，这个宽度和高度就是浏览器窗口的宽度和高度。为保证性能，你也可以使用setSize来设定较小的值。
比方说，设定的宽度和高度都减半。这样会使渲染范围减半。
如果你希望保证渲染尺寸，但是使用较低的分辨率来渲染，你可以像这样处理一下：
setSise(width/2,height/2,false) 第三个参数updateStyle = false，这样会分辨率减半的渲染，但是canvas还是100%。
最后一点，我们需要把渲染元素增加到我们的html文档里面。这样才会显示在页面里面！渲染器用<canvas>元素来显示场景。
但是说好的3D立方体（cube）在哪里呢？
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
创建一个3D立方体，我们需要一个BoxGeometry，这个是原生的几何体。这个几何体包括一个3D立方体所有的点信息和填充面信息。大家知道物体是点、线、面组成的。以后会给大家细谈。
除了指定一个几何体，还需要指定材质球。这样物体就有了纹理和颜色信息了。
three.js包含集中材质。我们使用MeshBasicMaterial 。所有的材质属性都会指定给物体。简单设定一下，我们就给一个颜色（16进制颜色）。颜色可以通过PHOTOSHOP来获取你想要的颜色。
然后就是Mesh了。点线面构成的mesh几何体，赋予了材质就可以添加到场景里。了。并且可以让他*转动！默认情况，我们使用scene.add()来添加物体到场景。并且坐标会在（0,0,0）。这样会有个问题。之前相机默认也是在（0,0,0），相机和3D立方体在同一个地方，他们重合了。就是说，相机在立方体内部。后果就是场景里面看不见3D立方体了，我们务必要调整位置，可以通过设定相机位置来处理，如：camera.position.z=5；这样吧相机Z轴拉远，就可以看见立方体了。
渲染场景
到此位置，你的脚本在浏览器里面是否可以看见呢？？答案是NO！
你看不见任何东西。一片乌黑！
这是因为我们没有渲染任何东西。需要做一个循环渲染即可！
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
以上会创建一个循环渲染！每一帧都会！
如果你在浏览器写游戏，你会说，能不能写个定时器来渲染呢？当然可以，
但是requestAnimationFrame 有它的优势。最重要的一点是当用户切换到另一个浏览器页面后，这个场景会暂停（很赞的！节约宝贵的资源，如果在移动端浏览器会省电！）
让立方体动起来
以上代码完成，场景里面会看到了3D绿色立方体了吧。接下来，我们让他旋转起来。
render函数里面加入以下代码：
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
这样，每一帧都会执行。
完整代码可以参考“three.js篇章学习/three.js第二篇【场景创建】”