本篇教程通过一个示例简单的介绍了threejs主要概念，以及在threejs中场景的呈现逻辑。最后有示例的代码，可以自己运行尝试，可以关注公众号【 砖人专语】分享更多threeJS、webGL有趣的事情
开始之前
在使用three.js之前，你需要有一个地方来呈现它。可以将下面代码保存，并且用浏览器打开
<!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>
// Our Javascript will go here.
</script>
</body>
</html>
下面所有的代码都会在script标签里面
创建场景
要想使用three.js来展示任何物体，我们需要三样东西: scene, camera and renderer, 即场景、相机和渲染器。我们用相机来渲染场景。
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，创建PerspectiveCamera的第一个参数是视野，field of view，FOV定义了在任何一刻我们能够看到的场景的范围，单位是度数。
第二个参数是纵横比，aspect ratio，基本上正常都会设置成宽度比高度，反之的话就会看到图像是被压扁的效果。
接下来的两个属性是近剪裁平面和远剪裁平面，near and far，这意味着比far更远或者比near更近的物体是不会被渲染出来的。相机只渲染介于两者之间的物体。现在你可以先不必考虑这一点，但是在你做自己的程序时，你可能会设置成合适的值来提升性能。
下一个值就是渲染器renderer,这里就是魔术开始的地方。除了我们这里使用的WebGLRenderer以外，three.js还有其他的一些渲染器，用于一些就浏览器的备用或者由于某些原因不支持webgl的情况。
除了创建渲染器实例之外，我们还需要设置我们希望它渲染我们的应用程序的大小。通常来讲，这个大小是浏览器窗口的宽度和高度。对于性能密集型应用程序，您还可以为setSize提供较小的值，例如window.innerWidth / 2和window.innerHeight / 2，这将使应用程序呈现为一半大小。
如果你希望保持应用程序的大小但是以较低的分辨率渲染它，可以通过调用setSize并将其作为updateStyle（第三个参数）来调用。例如**setSize(window.innerWidth/2, window.innerHeight/2, false)**将会以canvas100%的宽度和高度渲染，但是分辨率会减少到一半。
最后，我们把renderer元素添加进我们的HTML文档流里，这是渲染器用canvas元素来向我们展示场景。
到此，我们的三要素都已经完成，但是要想看到物体，我们需要创建物体。
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;
要想创建一个正方体，我们需要BoxGeometry这个几何，它包含了正方体所有的点和面，除了几何以外，我们还需要有材质来为它赋色。three.js里有很多材质，但是目前我们暂时只关注于MeshBasicMaterial,这里为了简单，我们只给这个材质设置了一个颜色0x00ff00，这里的颜色和CSS里或者PS里颜色一致。
有了几何和材质，下一个我们需要的是mesh，mesh是一个对象，它有几何和材质组成，可以添加进场景并且在场景里自由移动。
我们默认使用**scene.add()**来将物体添加进场景里，默认位置是(0,0,0),这样的话我们的相机位置就和这个正方体位置重合了，因此我们将相机的位置往外移动一点。
渲染场景
如果你将上面的代码复制进HTML，你也看不到任何东西。这是因为我们还没有用渲染器渲染。因此我们需要用render去渲染，并且放到动画循环里。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
这里我们创建了一个循环，这样这个渲染器就会在每次屏幕刷新的时候渲染一次场景，这里你可能会问为什么不用setInterval方法，这是因为requestAnimationFrame有很多好处，其中最大的好处就是当你点击浏览器另外的tab页时，它就会暂停，因此就不会浪费电脑的性能和电池。
旋转正方体
如果你将上面的代码都复制到HTML页面，你应该可以看到一个绿色的正方体，下面我们再增加一点乐趣，让它自转。
将下面的代码加入上面的动画循环里，在render之前。
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
这行代码会在每一帧运行(通常是1秒60帧)，并且给正方体一个旋转动画。基本上你所有想移动或者改变的事情都可以放在这个动画循环里，你可以在这里调用其它函数，这样你就不需要写数百行的动画函数了。
最终结果
恭喜你完成了第一个three.js的应用程序。完整的代码贴在下方，你可以自己尝试一下，做做实验，弄清楚上面提到的几个概念。
<html>
<head>
<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>
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 );
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;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
