一、三大組件

在Three.js中，要渲染物體到網(wǎng)頁(yè)中，我們需要3個(gè)組建：場(chǎng)景（scene）、相機(jī)（camera）和渲染器（renderer）。有了這三樣?xùn)|西，才能將物體渲染到網(wǎng)頁(yè)中去。

記住關(guān)建語(yǔ)句：有了這三樣?xùn)|西，我們才能夠使用相機(jī)將場(chǎng)景渲染到網(wǎng)頁(yè)上去。

創(chuàng)建這三要素的代碼如下：

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

1、場(chǎng)景

在Threejs中場(chǎng)景就只有一種，用THREE.Scene來表示，要構(gòu)件一個(gè)場(chǎng)景也很簡(jiǎn)單，只要new一個(gè)對(duì)象就可以了，代碼如下：

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

場(chǎng)景是所有物體的容器，如果要顯示一個(gè)蘋果，就需要將蘋果對(duì)象加入場(chǎng)景中。

2、相機(jī)

另一個(gè)組建是相機(jī)，相機(jī)決定了場(chǎng)景中那個(gè)角度的景色會(huì)顯示出來。相機(jī)就像人的眼睛一樣，人站在不同位置，抬頭或者低頭都能夠看到不同的景色。

場(chǎng)景只有一種，但是相機(jī)卻又很多種。和現(xiàn)實(shí)中一樣，不同的相機(jī)確定了呈相的各個(gè)方面。比如有的相機(jī)適合人像，有的相機(jī)適合風(fēng)景，專業(yè)的攝影師根據(jù)實(shí)際用途不一樣，選擇不同的相機(jī)。對(duì)程序員來說，只要設(shè)置不同的相機(jī)參數(shù)，就能夠讓相機(jī)產(chǎn)生不一樣的效果。

在Threejs中有多種相機(jī)，這里介紹兩種，它們是：

透視相機(jī)（THREE.PerspectiveCamera）、這里我們使用一個(gè)透視相機(jī)，透視相機(jī)的參數(shù)很多，這里先不詳細(xì)講解。后面關(guān)于相機(jī)的那一章，我們會(huì)花大力氣來講。定義一個(gè)相機(jī)的代碼如下所示：（已經(jīng)迫不及待想看看相機(jī)的參數(shù)了，點(diǎn)這里）

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

3、渲染器

最后一步就是設(shè)置渲染器，渲染器決定了渲染的結(jié)果應(yīng)該畫在頁(yè)面的什么元素上面，并且以怎樣的方式來繪制。這里我們定義了一個(gè)WebRenderer渲染器，代碼如下所示：

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

注意，渲染器renderer的domElement元素，表示渲染器中的畫布，所有的渲染都是畫在domElement上的，所以這里的appendChild表示將這個(gè)domElement掛接在body下面，這樣渲染的結(jié)果就能夠在頁(yè)面中顯示了。

4、添加物體到場(chǎng)景中

那現(xiàn)在，我們將一個(gè)物體添加到場(chǎng)景中：

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

代碼中出現(xiàn)了THREE.CubeGeometry，THREE.CubeGeometry是什么東東，他是一個(gè)幾何體，幾何體由什么組成，已經(jīng)不是本課的主要內(nèi)容了，后面的課程我們會(huì)詳細(xì)的學(xué)到。不過這里你只需要知道CubeGeometry是一個(gè)正方體或者長(zhǎng)方體，究竟是什么，由它的3個(gè)參數(shù)所決定，cubeGeometry的原型如下代碼所示：

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

height：立方體y軸的長(zhǎng)度

depth：立方體z軸的深度，也就是長(zhǎng)度

想一想大家就明白，以上3個(gè)參數(shù)就能夠確定一個(gè)立方體。

剩下的幾個(gè)參數(shù)就要費(fèi)解和復(fù)雜一些了，不過后面我們會(huì)自己來寫一個(gè)立方體，到時(shí)候，你會(huì)更明白這些參數(shù)的意義，這里你可以將這些參數(shù)省略。

5、渲染

終于到了最后一步，這一步做完后，就可以該干嘛干嘛去了。

渲染應(yīng)該使用渲染器，結(jié)合相機(jī)和場(chǎng)景來得到結(jié)果畫面。實(shí)現(xiàn)這個(gè)功能的函數(shù)是

renderer.render(scene, camera);

渲染函數(shù)的原型如下：

render( scene, camera, renderTarget, forceClear )

各個(gè)參數(shù)的意義是：

scene：前面定義的場(chǎng)景

camera：前面定義的相機(jī)

renderTarget：渲染的目標(biāo)，默認(rèn)是渲染到前面定義的render變量中

forceClear：每次繪制之前都將畫布的內(nèi)容給清除，即使自動(dòng)清除標(biāo)志autoClear為false，也會(huì)清除。

6、渲染循環(huán)

渲染有兩種方式：實(shí)時(shí)渲染和離線渲染 。

先看看離線渲染，想想《西游降魔篇》中最后的佛主，他肯定不是真的，是電腦渲染出來的，其畫面質(zhì)量是很高的，它是事先渲染好一幀一幀的圖片，然后再把圖片拼接成電影的。這就是離線渲染。如果不事先處理好一幀一幀的圖片，那么電影播放得會(huì)很卡。CPU和GPU根本沒有能力在播放的時(shí)候渲染出這種高質(zhì)量的圖片。

實(shí)時(shí)渲染：就是需要不停的對(duì)畫面進(jìn)行渲染，即使畫面中什么也沒有改變，也需要重新渲染。下面就是一個(gè)渲染循環(huán)：

function render() {
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

其中一個(gè)重要的函數(shù)是requestAnimationFrame，這個(gè)函數(shù)就是讓瀏覽器去執(zhí)行一次參數(shù)中的函數(shù)，這樣通過上面render中調(diào)用requestAnimationFrame()函數(shù)，requestAnimationFrame()函數(shù)又讓rander()再執(zhí)行一次，就形成了我們通常所說的游戲循環(huán)了。

如不能理解游戲循環(huán)，請(qǐng)?jiān)谶@里提問。

場(chǎng)景，相機(jī)，渲染器之間的關(guān)系

Three.js中的場(chǎng)景是一個(gè)物體的容器，開發(fā)者可以將需要的角色放入場(chǎng)景中，例如蘋果，葡萄。同時(shí)，角色自身也管理著其在場(chǎng)景中的位置。

相機(jī)的作用就是面對(duì)場(chǎng)景，在場(chǎng)景中取一個(gè)合適的景，把它拍下來。

渲染器的作用就是將相機(jī)拍攝下來的圖片，放到瀏覽器中去顯示。他們?nèi)叩年P(guān)系如下圖所示：

關(guān)系

學(xué)習(xí)的資料和源碼我都共享到我的gitHub倉(cāng)庫(kù)中去了,大家有興趣的可以去下載,歡迎foke,clone,加星星,也算是對(duì)我的一個(gè)鼓勵(lì)吧

three學(xué)習(xí)資料的github地址
或者復(fù)制鏈接地址到瀏覽器
https://github.com/kingder-c/LearnThree.js