最近又重新學習了下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），如果畫面質量很高，就容易卡頓。
離線渲染：是事先渲染好一幀一幀的圖片，然後再把圖片拼接起來，最終顯示。
五、總結
三大組件是基礎，接下來還有材質、燈光等等，學習的東西還有很多，一點一點學吧。