最近又重新学习了下three.js，还得从基础学起啊，今天起步学习，最基础的三大组件。
三大组件分别是：场景（scene）、相机（camera）和渲染器（renderer），也就是靠着这三个东东，我们才能将物体渲染到网页中去。
那么这三者是什么关系呢？
首先，场景是一个物体的容器，开发者可以将需要的物体放入场景中，相机的作用就是把放入场景的物体拍下来，渲染器的作用就是将相机拍摄下来的图片，放到浏览器中去显示。
接下来详细介绍一下三个组件：
一、场景
场景就只有一种，用THREE.Scene来表示，构建一个场景的代码如下：
var scene = new THREE.Scene();
场景是所有物体的容器，你需要把显示的内容，放入到场景里面，才有机会被相机拍到，从而渲染到web页面上。
二、相机
相机决定了场景中哪个角度的景色会显示出来，就像你在屋里摆了个摄像头，照着哪里，就显示哪里。
相机有两种：正投影相机和透视相机。
正投影相机（THREE.OrthographicCamera），对象和相机之间的距离不会影响渲染效果，无远近之分，如下图所示：
透视相机（THREE.PerspectiveCamera），距离相机越远的地方，被渲染的越小，就像人眼自然的看东西一样，近处的大，远处的小，如下图所示：
可以看的出来，透视相机最贴近真实世界。
三、渲染器
场景搭好了，相机也放好了，接下来就是渲染了，渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。
代码示例如下，这里我们定义了一个WebRenderer渲染器：
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，这样渲染的结果就能够在页面中显示了。
四、示例
三大组件是一个基础，如果要在这三大组件搭建的环境里面显示东西，还得把物体添加进来。
例如，添加一个立方体：
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
其中，THREE.CubeGeometry是一个几何体，THREE.MeshBasicMaterial是一种材质，几何体和材质共同组成了Mesh，最后把Mesh添加入场景就可以了。
物体也添加进去了，下一步就是渲染了，渲染应该使用渲染器，结合相机和场景来得到结果画面。实现这个功能的函数是：
renderer.render(scene, camera);
渲染函数的原型如下：
render( scene, camera, renderTarget, forceClear )
各个参数的意义是：
scene：前面定义的场景
camera：前面定义的相机
renderTarget：渲染的目标，默认是渲染到前面定义的render变量中
forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。
渲染有两种方式：实时渲染和离线渲染 。
实时渲染：就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染，这种渲染要求很高（CPU和GPU），如果画面质量很高，就容易卡顿。
离线渲染：是事先渲染好一帧一帧的图片，然后再把图片拼接起来，最终显示。
五、总结
三大组件是基础，接下来还有材质、灯光等等，学习的东西还有很多，一点一点学吧。