一专挪、三大組件
在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來(lái)表示幻捏，要構(gòu)件一個(gè)場(chǎng)景也很簡(jiǎn)單盆犁，只要new一個(gè)對(duì)象就可以了，代碼如下：
var scene = new THREE.Scene();
var scene = new THREE.Scene();
場(chǎng)景是所有物體的容器篡九，如果要顯示一個(gè)蘋(píng)果谐岁，就需要將蘋(píng)果對(duì)象加入場(chǎng)景中。
2榛臼、相機(jī)
另一個(gè)組建是相機(jī)伊佃，相機(jī)決定了場(chǎng)景中那個(gè)角度的景色會(huì)顯示出來(lái)。相機(jī)就像人的眼睛一樣沛善，人站在不同位置航揉，抬頭或者低頭都能夠看到不同的景色。
場(chǎng)景只有一種金刁，但是相機(jī)卻又很多種帅涂。和現(xiàn)實(shí)中一樣，不同的相機(jī)確定了呈相的各個(gè)方面尤蛮。比如有的相機(jī)適合人像媳友，有的相機(jī)適合風(fēng)景，專(zhuān)業(yè)的攝影師根據(jù)實(shí)際用途不一樣产捞，選擇不同的相機(jī)醇锚。對(duì)程序員來(lái)說(shuō)，只要設(shè)置不同的相機(jī)參數(shù)轧葛，就能夠讓相機(jī)產(chǎn)生不一樣的效果搂抒。
在Threejs中有多種相機(jī)，這里介紹兩種尿扯，它們是：
透視相機(jī)（THREE.PerspectiveCamera）求晶、這里我們使用一個(gè)透視相機(jī)，透視相機(jī)的參數(shù)很多衷笋，這里先不詳細(xì)講解芳杏。后面關(guān)于相機(jī)的那一章矩屁，我們會(huì)花大力氣來(lái)講。定義一個(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)該畫(huà)在頁(yè)面的什么元素上面空幻，并且以怎樣的方式來(lái)繪制烁峭。這里我們定義了一個(gè)WebRenderer渲染器，代碼如下所示：
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
注意秕铛，渲染器renderer的domElement元素约郁，表示渲染器中的畫(huà)布，所有的渲染都是畫(huà)在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é)到艘绍。不過(guò)這里你只需要知道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ù)雜一些了蕉朵，不過(guò)后面我們會(huì)自己來(lái)寫(xiě)一個(gè)立方體崔涂，到時(shí)候，你會(huì)更明白這些參數(shù)的意義始衅，這里你可以將這些參數(shù)省略冷蚂。
5、渲染
終于到了最后一步汛闸，這一步做完后蝙茶，就可以該干嘛干嘛去了。
渲染應(yīng)該使用渲染器诸老，結(jié)合相機(jī)和場(chǎng)景來(lái)得到結(jié)果畫(huà)面隆夯。實(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：每次繪制之前都將畫(huà)布的內(nèi)容給清除，即使自動(dòng)清除標(biāo)志autoClear為false蹄衷，也會(huì)清除忧额。
6、渲染循環(huán)
渲染有兩種方式：實(shí)時(shí)渲染和離線(xiàn)渲染 愧口。
先看看離線(xiàn)渲染睦番，想想《西游降魔篇》中最后的佛主，他肯定不是真的耍属，是電腦渲染出來(lái)的抡砂，其畫(huà)面質(zhì)量是很高的，它是事先渲染好一幀一幀的圖片恬涧，然后再把圖片拼接成電影的注益。這就是離線(xiàn)渲染。如果不事先處理好一幀一幀的圖片溯捆，那么電影播放得會(huì)很卡丑搔。CPU和GPU根本沒(méi)有能力在播放的時(shí)候渲染出這種高質(zhì)量的圖片。
實(shí)時(shí)渲染：就是需要不停的對(duì)畫(huà)面進(jìn)行渲染提揍，即使畫(huà)面中什么也沒(méi)有改變啤月，也需要重新渲染。下面就是一個(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ù)谎仲，這樣通過(guò)上面render中調(diào)用requestAnimationFrame()函數(shù)，requestAnimationFrame()函數(shù)又讓rander()再執(zhí)行一次刨仑，就形成了我們通常所說(shuō)的游戲循環(huán)了郑诺。
如不能理解游戲循環(huán)，請(qǐng)?jiān)谶@里提問(wèn)杉武。
場(chǎng)景辙诞，相機(jī)，渲染器之間的關(guān)系
Three.js中的場(chǎng)景是一個(gè)物體的容器轻抱，開(kāi)發(fā)者可以將需要的角色放入場(chǎng)景中飞涂，例如蘋(píng)果，葡萄祈搜。同時(shí)较店，角色自身也管理著其在場(chǎng)景中的位置。
相機(jī)的作用就是面對(duì)場(chǎng)景容燕，在場(chǎng)景中取一個(gè)合適的景梁呈，把它拍下來(lái)。
渲染器的作用就是將相機(jī)拍攝下來(lái)的圖片缰趋，放到瀏覽器中去顯示捧杉。他們?nèi)叩年P(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
