渲染器
渲染器其實代表的是canvas標籤。
渲染器的類型
WebGLRender
使用WebGL來渲染圖形，速度較快，但是有些機器不支持WebGL。
CanvasRender
使用canvas2d來渲染圖形，在較老的版本上，主要是用來渲染2D圖形。現在這個渲染器在新版本中已棄用。
創建渲染器
創建渲染器代碼如下：
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
setSize方法設置的是canvas標籤的大小，比如：
renderer.setSize(100,100)
等於：
<canvas style="width:100px;height:100px;"></canvas>
相機
相機定義了場景中哪部分是可以見的，相機有自己的位置（position）、朝向（lookAt）和可視域。我們創建的圖形一定要放在相機的可視域中才能看得見。可視域與相機的類型、相機的位置和朝向都有關。
相機的類型和創建
threejs提供的相機有正交相機（OrthographicCamera）、透視相機（PerspectiveCamera）、全景相機（CubeCamera）和3D相機（StereoCamera）。
正交相機
正交相機拍攝的效果類似設計圖，重在表現物體的實際尺寸，沒有近小遠大的效果，如下圖：
正交相機的構造方法如下：
OrthographicCamera( left, right, top, bottom, near, far )
這個六個參數即是指定視域的左右上下近遠六個範圍。正交相機的視域是立方體：
可以打開 ：【threejs相機例子】，按o鍵，就可以看到正交相機的演示，右邊的線框則展示出正交相機的視域示意圖。
透視相機
透視相機拍攝的效果類似人眼所見，即有近小遠大的效果，如下圖：
透視相機的構造方法如下：
PerspectiveCamera( fov, aspect, near, far )
fov參數指定視角，aspect指定視圖寬高比，後兩個參數指定近平面和遠平面。透視相機的視域是一個臺體：
可以打開 ：【threejs相機例子】，按p鍵，就可以看到透視相機的演示，右邊的線框則展示出透視相機的視域示意圖。
全景相機
全景相機就是可以360度拍攝的相機，見過百度地圖全景街景拍攝車的話，應該會有印象，就像下面這個：
在threejs中，全景相機構造也類似，使用六個不同方向上的相機同時拍攝，將拍攝的結果融合到同一個畫面中。這有點像VR的概念，無論你看向畫面的哪個方向，都能看到那個方向的景物。可以打開下面的鏈接體驗一下：【全景相機的例子】
3D相機
這個3D相機應該叫浮雕3D相機，它是用兩個不同位置的透視相機同時拍攝，將拍攝的結果合成爲一個畫面。這便是早期3D電影的表現方法，通過讓人的兩隻眼睛看到稍微不同的圖像，來欺騙人的感覺，讓人好像看到了立體一樣。可以打開下面的鏈接，看看這種相機的拍攝效果：【3D相機例子】
你會發現直接看，畫面似乎很模糊，但是當你戴上紅藍眼鏡時，畫面就變成了立體的了。關於浮雕3D電影可參考：【浮雕3D電影】
相機和渲染器的關係
在threejs中，渲染器可以視爲是canvas標籤，相機可以視爲畫布。注意畫布和canvas標籤不是同一個東西，canvas標籤是畫布的容器。畫布就好比一張圖片，而canvas標籤就像img標籤。
因此：
renderer.setSize(100,100)
相當於：
<canvas style="width:100px;height:100px;"></canvas>
而
var camera = new THREE.OrthographicCamera(-500,500,100,-100,1,1000);
相當於：
<canvas heigth="1000" width="1000"></canvas>
當然，這種類比過於簡單，實際中，threejs做的工作要更多。
canvas標籤大小和畫布大小不一致會引發的問題
如果canvas標籤和畫布大小不一致，則會拉伸畫布填充canvas標籤，這會導致畫面變形。例如：
camera = new THREE.OrthographicCamera(-500,500,20,-20,1,100);
renderer.setSize(1000,1000);
在上面的代碼中，canvas標籤較大，而故意將畫布高度設得很小，畫出來的效果大致如下：
可以看到，字母在豎直方向上被拉長了。
threejs相關的其它文章見：threejs教程