1.three.js世界的4大要素

1、三大組件

在Three.js中，要渲染物體到網頁中，咱們須要3個組建：場景（scene）、相機（camera）和渲染器（renderer）。有了這三樣東西，才能將物體渲染到網頁中去。

記住關建語句：有了這三樣東西，咱們纔可以使用相機將場景渲染到網頁上去。

建立這三要素的代碼以下：

var scene = new THREE.Scene();  // 場景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透視相機
var renderer = new THREE.WebGLRenderer();   // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight);    // 設置渲染器的大小爲窗口的內寬度，也就是內容區的寬度
document.body.appendChild(renderer.domElement);

一、場景

在Threejs中場景就只有一種，用THREE.Scene來表示，要構件一個場景也很簡單，只要new一個對象就能夠了，代碼以下：

var scene = new THREE.Scene();
var scene = new THREE.Scene();

場景是全部物體的容器，若是要顯示一個蘋果，就須要將蘋果對象加入場景中。

二、相機

另外一個組建是相機，相機決定了場景中那個角度的景色會顯示出來。相機就像人的眼睛同樣，人站在不一樣位置，擡頭或者低頭都可以看到不一樣的景色。

場景只有一種，可是相機卻又不少種。和現實中同樣，不一樣的相機肯定了呈相的各個方面。好比有的相機適合人像，有的相機適合風景，專業的攝影師根據實際用途不同，選擇不一樣的相機。對程序員來講，只要設置不一樣的相機參數，就可以讓相機產生不同的效果。

在Threejs中有多種相機，這裏介紹兩種，它們是：

透視相機（THREE.PerspectiveCamera）、這裏咱們使用一個透視相機，透視相機的參數不少，這裏先不詳細講解。後面關於相機的那一章，咱們會花大力氣來說。定義一個相機的代碼以下所示：（已經火燒眉毛想看看相機的參數了，點這裏）

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

三、渲染器

最後一步就是設置渲染器，渲染器決定了渲染的結果應該畫在頁面的什麼元素上面，而且以怎樣的方式來繪製。這裏咱們定義了一個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.CubeGeometry是什麼東東，他是一個幾何體，幾何體由什麼組成，已經不是本課的主要內容了，後面的課程咱們會詳細的學到。不過這裏你只須要知道CubeGeometry是一個正方體或者長方體，到底是什麼，由它的3個參數所決定，cubeGeometry的原型以下代碼所示：

CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
width：立方體x軸的長度

height：立方體y軸的長度

depth：立方體z軸的深度，也就是長度

想想你們就明白，以上3個參數就可以肯定一個立方體。

剩下的幾個參數就要費解和複雜一些了，不事後面咱們會本身來寫一個立方體，到時候，你會更明白這些參數的意義，這裏你能夠將這些參數省略。

五、渲染

終於到了最後一步，這一步作完後，就能夠該幹嗎幹嗎去了。

渲染應該使用渲染器，結合相機和場景來獲得結果畫面。實現這個功能的函數是

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);
}

其中一個重要的函數是requestAnimationFrame，這個函數就是讓瀏覽器去執行一次參數中的函數，這樣經過上面render中調用requestAnimationFrame()函數，requestAnimationFrame()函數又讓rander()再執行一次，就造成了咱們一般所說的遊戲循環了。

如不能理解遊戲循環，請在這裏提問。

場景，相機，渲染器之間的關係

Three.js中的場景是一個物體的容器，開發者能夠將須要的角色放入場景中，例如蘋果，葡萄。同時，角色自身也管理着其在場景中的位置。

相機的做用就是面對場景，在場景中取一個合適的景，把它拍下來。

渲染器的做用就是將相機拍攝下來的圖片，放到瀏覽器中去顯示。他們三者的關係以下圖所示：