三大組建
在three.js中，要渲染物體到網頁中，我們需要三個組建：場景(scene),相機(camera),渲染器(renderer),有了這三樣東西，才能將物體渲染到網頁中去。記住關鍵語句：有了這三樣東西，我們才能夠使用相機將場景渲染到網頁上去
var scene = new THREE.Scene(); //建立場景
//建立透視相機
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000);
//建立渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChid(renderer.domElement)
複製程式碼
場景
在Three.js中場景只有一種，用THREE.Scene來表示，要構建一個場景也很簡單，只要new THREE.Scene(),場景是所有物體的容器，如果想顯示一個女人，就需要將女人物件加入場景中。
相機
另一個元件是相機，相機決定了場景中那個角色的景色會顯示出來，也就是說相機給哪個物體拍照，哪個物體就可以顯示在場景中，相機決定了場景中哪個角度的景色會顯示出來。相機就像人的眼睛一樣，人站在不同的位置，抬頭或者低頭都能夠看到不同的景色。
場景只有一種，但是相機卻有很多種。和實現中一樣，不同的相機確定了呈現的各個方面，比如有的相機適合人像，有的相機適合景物。專業的景物攝影師根據實際用途不一樣，選擇不同的相機。對也程式設計師來說，只要設定不同的相機引數，就能夠讓相機產生不一樣的效果。 在three.js中有很多種相機，常用的就是透視投影相機，正投影相機
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000)
渲染器
最後一步就是設定渲染器，渲染器決定了渲染的結果用該畫在頁面的什麼元素上面，並且以怎樣的方式繪製。這裡我們定義了一個WebGLRenderer渲染器。
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChid(renderer.domElement)
注意，渲染器renderer的domElement元素，表示渲染器中的畫布，所有的渲染器都是畫在domElement上的(其實就是繪製在canvas畫布上)，然後用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是啥玩意，它是一個幾何體，CubeGeometry是一個立方體
CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
複製程式碼
- width:立方體x軸的長度
- height:立方體y軸的長度
- depth:立方體z軸的深度，也就是長度
渲染
終於到了最後一步了，這一步做完，就可以去吃雞了
渲染應該使用渲染器，結合相機和場景來得到結果畫面，渲染的時候，渲染器會根據相機拍的畫面把它渲染到我們的畫布上，然後掛載到dom上，就可以在瀏覽器看到啦
renderer.render(scene, camera);
//渲染函式的原型如下：
render( scene, camera, renderTarget, forceClear )
各個引數的意義是：
scene：前面定義的場景
camera：前面定義的相機
renderTarget：渲染的目標，預設是渲染到前面定義的render變數中
forceClear：每次繪製之前都將畫布的內容給清除，即使自動清除標誌autoClear為false，也會清除。
複製程式碼
渲染迴圈
渲染有兩種方式：
- 實時渲染
- 離線渲染
離線渲染:想想《復仇者聯盟》中最後英雄們打滅霸的時候的酷炫場景，那肯定不是真的，是電腦渲染出來的，其實畫面質量很高，它是實現渲染好一幀一幀的圖片，然後把圖片拼接成電影的。如果不是先處理，那麼電影播放就會很卡的，CPU和GPU根本沒有能力在播放的時候渲染出這麼高質量的圖片
實時渲染:就是需要不停的對畫面進行渲染，即使畫面中什麼也沒有改變，也需要重新渲染，下面就是一個渲染迴圈：
function render() {
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
場景，相機，渲染器之間啥關係
Three.js中的場景是一個物體的容器，要想把物體顯示出來，必須要把物體加入場景中去，開發者可以將需要的角色放入場景中去，例如女人，男人，小孩。同時角色自身也管理這其在場景中的位置
相機的作用就是面對場景，在場景中去一個合適的景，把它拍下來。渲染器的作用就是將相機拍攝下來的圖片，放到瀏覽器中去顯示。