04-Threejs渲染第一個(gè)場(chǎng)景和物體-視頻教程

1 基本概念

三維的物體要渲染在二維的屏幕上。首先要?jiǎng)?chuàng)建一個(gè)場(chǎng)景來放置物體，那么最終怎么顯示三維的內(nèi)容，就應(yīng)該找一個(gè)相機(jī)，將相機(jī)放在場(chǎng)景的某個(gè)位置，然后想要顯示就要把相機(jī)拍的內(nèi)容渲染出來。所以就引出三個(gè)基本概念：場(chǎng)景、相機(jī)、渲染器。

1.1 場(chǎng)景

three.js創(chuàng)建場(chǎng)景非常的簡(jiǎn)單。

1.2 相機(jī)

three.js創(chuàng)建相機(jī)對(duì)象

three.js里有幾種不同的相機(jī)，在這里，我們使用的是PerspectiveCamera（透視攝像機(jī)）。

第一個(gè)參數(shù)是視野角度（FOV）。視野角度就是無論在什么時(shí)候，你所能在顯示器上看到的場(chǎng)景的范圍，它的單位是角度(與弧度區(qū)分開)。

第二個(gè)參數(shù)是長(zhǎng)寬比（aspect ratio）。 也就是你用一個(gè)物體的寬除以它的高的值。比如說，當(dāng)你在一個(gè)寬屏電視上播放老電影時(shí)，可以看到圖像仿佛是被壓扁的。

接下來的兩個(gè)參數(shù)是近截面（near）和遠(yuǎn)截面（far）。 當(dāng)物體某些部分比攝像機(jī)的遠(yuǎn)截面遠(yuǎn)或者比近截面近的時(shí)候，該這些部分將不會(huì)被渲染到場(chǎng)景中?；蛟S現(xiàn)在你不用擔(dān)心這個(gè)值的影響，但未來為了獲得更好的渲染性能，你將可以在你的應(yīng)用程序里去設(shè)置它。

下圖椎體就是上面設(shè)置視野角度、長(zhǎng)寬比、近截面和遠(yuǎn)截面的演示的相機(jī)透視椎體。

1.3 渲染器

接下來是渲染器。這里是施展魔法的地方。

除了創(chuàng)建一個(gè)渲染器的實(shí)例之外，我們還需要在我們的應(yīng)用程序里設(shè)置一個(gè)渲染器的尺寸。比如說，我們可以使用所需要的渲染區(qū)域的寬高，來讓渲染器渲染出的場(chǎng)景填充滿我們的應(yīng)用程序。因此，我們可以將渲染器寬高設(shè)置為瀏覽器窗口寬高。對(duì)于性能比較敏感的應(yīng)用程序來說，你可以使用setSize傳入一個(gè)較小的值，例如window.innerWidth/2和window.innerHeight/2，這將使得應(yīng)用程序在渲染時(shí)，以一半的長(zhǎng)寬尺寸渲染場(chǎng)景。

接下來將renderer（渲染器）的dom元素（renderer.domElement）添加到我們的HTML文檔中。渲染器用來顯示場(chǎng)景給我們看的<canvas>元素。

最后就是對(duì)將相機(jī)對(duì)場(chǎng)景進(jìn)行拍照渲染啦。這一句就可以將畫面渲染到canvas上顯示出來

renderer.render(scene, camera);

1.4 加入立方體

要?jiǎng)?chuàng)建一個(gè)立方體，我們需要一個(gè)BoxGeometry（立方體）對(duì)象. 這個(gè)對(duì)象包含了一個(gè)立方體中所有的頂點(diǎn)（vertices）和面（faces）。

接下來，對(duì)于這個(gè)立方體，我們需要給它一個(gè)材質(zhì)，來讓它有顏色。這里我們使用的是MeshBasicMaterial。所有的材質(zhì)都存有應(yīng)用于他們的屬性的對(duì)象。為了簡(jiǎn)單起見，我們只設(shè)置一個(gè)color屬性，值為0x00ff00，也就是綠色。這里和CSS或者Photoshop中使用十六進(jìn)制(hex colors)顏色格式來設(shè)置顏色的方式一致。

第三步，我們需要一個(gè)Mesh（網(wǎng)格）。 網(wǎng)格包含一個(gè)幾何體以及作用在此幾何體上的材質(zhì)，我們可以直接將網(wǎng)格對(duì)象放入到我們的場(chǎng)景中，并讓它在場(chǎng)景中自由移動(dòng)。

默認(rèn)情況下，當(dāng)我們調(diào)用scene.add()的時(shí)候，物體將會(huì)被添加到(0,0,0)坐標(biāo)。但將使得攝像機(jī)和立方體彼此在一起。為了防止這種情況的發(fā)生，我們只需要將攝像機(jī)稍微向外移動(dòng)一些即可。

2 綜合上述代碼

1、在前面創(chuàng)建的項(xiàng)目中的main.js文件寫入代碼

效果演示：