入门
这部分内容的目标是简单地介绍three.js，我们首先讲如何用three.js来实现一个旋转的立方体。具体的实例将会给出，以防你卡住或者需要帮助。
在html文件中引入three.js文件
在使用three.js之前，首先需要在你的html文件中将它包含进来，如下面代码段所示：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
</head>
<body>
<script src="three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>然后在空的<script>标签中我们可以书写自己的代码。
使用three.js进行三维物体渲染的三要素
想要用three.js来展示任何东西，需要三个条件：场景（scene）、照相机（camera）和渲染器（renderer），具备这三种条件后方可将一个三维物体来渲染在浏览器中。接下来我们将具体介绍这三个条件的具体含义和实例对象创建方法。
场景
定义：直观地理解，场景就是布置出的一个场地，就好比照相馆在拍照前先要选择一个场地，然后再架设照相机，打光线以及让模特站进去才能进行拍摄。场景允许你设置什么以及哪些地方需要被three.js所渲染。它是你放置对象、光线以及照相机的地方。
创建实例对象：three.js中给出多种类型的场景构造区,常用的就是Scene()构造器，创建一个场景对象实例的代码是：var scene = new THREE.Scene();
关于更多的场景知识的，我们将会在之后的文章中进行介绍。
照相机
定义：直观地讲，照相机就像是进行摄影或者录像时使用的照相机。照相机的功能类似于观察物体的一个眼睛，物体需要通过相机来进行呈现，它负责将三维的物体投影到二维的屏幕上。
创建实例对象：根据投影方式的不同，three.js中给出了两种不同类型的照相机，分别为正交投影相机和透视投影相机，创建照相机实例对象的代码分别为：
正交投影相机：var camera = new THREE.OrthographicCamera();
透视投影相机：var camera = new THREE.PerspectiveCamera();由于这两种相机的投影方式不同，所以两种照相机对象的参数意义也各不相同。
正交投影照相机（OrthographicCamera）
正交投影照相机中投影线是垂直于投影面进行投影，因此物体在投影之后的比例不回发生改变，如下图所示
正交投影照相机的构造函数为OrthographicCamera(left, right, top, bottom, near, far)包含了六个参数，left就是整个投影线区域的左侧面，right就是投影线区域的右侧面，top就是投影线区域的上侧面，而bottom就是投影线区域的下侧面。 near是到距离相机较近的那一面的距离，far是离距离相机较远的那一面的距离，这六个投影面围成的区域就是相机投影的可见区域。在三维空间中，只有这个区域中的物体才能被照相机所观测到。
透视投影照相机（PerspectiveCamera）
透视投影照相机中投影是线是以照相机为汇聚点发散的，投影线和投影面不垂直，物体投影之后的比例会发生变化，我们会观察到物体的透视效果，如下图所示。
透视投影照相机的构造函数是PerspectiveCamera(fov, aspect, near, far) ，其中fov是可视角度；aspect为width/height，通常是容器（canvas）的宽高比；near是近断距离，far是远端距离。只有在距离照相机大于near的距离小于far的距离之内才可以被照相机观察到。
关于更多照相机的知识我们会在之后的文章中进行介绍。
渲染器
定义：渲染器的功能是将我们创建的场景和照相机所观察到的三维物体在二维平面上的投影进行渲染展现到浏览器中。
创建：var renderer = new THREE.WebGLRenderer();
渲染：renderer.render(scene, camera) 在进行渲染的时候需要将之前创建的场景和照相机都传入渲染函数中。
关于更多渲染器的知识我们将会在之后的文章中进行介绍。
栗子
有了场景、照相机和渲染器三个要素之后，我们就可以在浏览器中展现出复杂的三维物体了，首先来看一个简单的栗子～
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
</head>
<body>
//创建一个canvas标签用来作为展现三维图形的容器
<canvas id="mainCanvas" width="400" height="400"></canvas>
//引入three.js文件
<script src="three.js"></script>
<script>
// Our Javascript will go here.
function init(){
//创建scene
var scene = new THREE.Scene();
//创建camera
var camera = new THREE.PerspectiveCamera(45, 1/1, 1, 1000);
camera.position.set(0,0,5);
scene.add(camera);
//创建renderer
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0x000000);//设置背景颜色
//创建一个几何体
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xFFFF00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube ); //将创建的几何体加入场景中
var animate = function(){
requestAnimationFrame(animate); //以浏览器刷新的速度调用animate函数
cube.rotation.z += 0.01; //绕z轴旋转
renderer.render(scene, camera); //将场景scene和camera进行渲染
};
animate();
};
init();
</script>
</body>
</html>快打开浏览器看看，是不是看到那个旋转的正方体了～
项目github地址：旋转的正方体
参考文献：
1.creating a scene
2.three.js 照相机
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。