渲染器

渲染器其實(shí)代表的是canvas標(biāo)簽。

渲染器的類型

WebGLRender

使用WebGL來渲染圖形，速度較快，但是有些機(jī)器不支持WebGL。

CanvasRender

使用canvas2d來渲染圖形，在較老的版本上，主要是用來渲染2D圖形。現(xiàn)在這個(gè)渲染器在新版本中已棄用。

創(chuàng)建渲染器

創(chuàng)建渲染器代碼如下：

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

setSize方法設(shè)置的是canvas標(biāo)簽的大小，比如：

renderer.setSize(100,100)

等于：

<canvas style="width:100px;height:100px;"></canvas>

相機(jī)

相機(jī)定義了場(chǎng)景中哪部分是可以見的，相機(jī)有自己的位置（position）、朝向（lookAt）和可視域。我們創(chuàng)建的圖形一定要放在相機(jī)的可視域中才能看得見。可視域與相機(jī)的類型、相機(jī)的位置和朝向都有關(guān)。

相機(jī)的類型和創(chuàng)建

threejs提供的相機(jī)有正交相機(jī)（OrthographicCamera）、透視相機(jī)（PerspectiveCamera）、全景相機(jī)（CubeCamera）和3D相機(jī)（StereoCamera）。

正交相機(jī)

正交相機(jī)拍攝的效果類似設(shè)計(jì)圖，重在表現(xiàn)物體的實(shí)際尺寸，沒有近小遠(yuǎn)大的效果，如下圖：

正交相機(jī)的構(gòu)造方法如下：

OrthographicCamera( left, right, top, bottom, near, far )

這個(gè)六個(gè)參數(shù)即是指定視域的左右上下近遠(yuǎn)六個(gè)范圍。正交相機(jī)的視域是立方體：

可以打開 ：【threejs相機(jī)例子】，按o鍵，就可以看到正交相機(jī)的演示，右邊的線框則展示出正交相機(jī)的視域示意圖。

透視相機(jī)

透視相機(jī)拍攝的效果類似人眼所見，即有近小遠(yuǎn)大的效果，如下圖：

透視相機(jī)的構(gòu)造方法如下：

PerspectiveCamera( fov, aspect, near, far )

fov參數(shù)指定視角，aspect指定視圖寬高比，后兩個(gè)參數(shù)指定近平面和遠(yuǎn)平面。透視相機(jī)的視域是一個(gè)臺(tái)體：

可以打開 ：【threejs相機(jī)例子】，按p鍵，就可以看到透視相機(jī)的演示，右邊的線框則展示出透視相機(jī)的視域示意圖。

全景相機(jī)

全景相機(jī)就是可以360度拍攝的相機(jī)，見過百度地圖全景街景拍攝車的話，應(yīng)該會(huì)有印象，就像下面這個(gè)：

在threejs中，全景相機(jī)構(gòu)造也類似，使用六個(gè)不同方向上的相機(jī)同時(shí)拍攝，將拍攝的結(jié)果融合到同一個(gè)畫面中。這有點(diǎn)像VR的概念，無論你看向畫面的哪個(gè)方向，都能看到那個(gè)方向的景物。可以打開下面的鏈接體驗(yàn)一下：【全景相機(jī)的例子】

3D相機(jī)

這個(gè)3D相機(jī)應(yīng)該叫浮雕3D相機(jī)，它是用兩個(gè)不同位置的透視相機(jī)同時(shí)拍攝，將拍攝的結(jié)果合成為一個(gè)畫面。這便是早期3D電影的表現(xiàn)方法，通過讓人的兩只眼睛看到稍微不同的圖像，來欺騙人的感覺，讓人好像看到了立體一樣。可以打開下面的鏈接，看看這種相機(jī)的拍攝效果：【3D相機(jī)例子】

你會(huì)發(fā)現(xiàn)直接看，畫面似乎很模糊，但是當(dāng)你戴上紅藍(lán)眼鏡時(shí)，畫面就變成了立體的了。關(guān)于浮雕3D電影可參考：【浮雕3D電影】

相機(jī)和渲染器的關(guān)系

在threejs中，渲染器可以視為是canvas標(biāo)簽，相機(jī)可以視為畫布。注意畫布和canvas標(biāo)簽不是同一個(gè)東西，canvas標(biāo)簽是畫布的容器。畫布就好比一張圖片，而canvas標(biāo)簽就像img標(biāo)簽。

因此：

renderer.setSize(100,100)

相當(dāng)于：

<canvas style="width:100px;height:100px;"></canvas>

而

var camera = new THREE.OrthographicCamera(-500,500,100,-100,1,1000);

相當(dāng)于：

<canvas heigth="1000" width="1000"></canvas>

當(dāng)然，這種類比過于簡(jiǎn)單，實(shí)際中，threejs做的工作要更多。

canvas標(biāo)簽大小和畫布大小不一致會(huì)引發(fā)的問題

如果canvas標(biāo)簽和畫布大小不一致，則會(huì)拉伸畫布填充canvas標(biāo)簽，這會(huì)導(dǎo)致畫面變形。例如：

camera = new THREE.OrthographicCamera(-500,500,20,-20,1,100); renderer.setSize(1000,1000);

在上面的代碼中，canvas標(biāo)簽較大，而故意將畫布高度設(shè)得很小，畫出來的效果大致如下：

可以看到，字母在豎直方向上被拉長了。

---

threejs相關(guān)的其它文章見：threejs教程

總結(jié)

以上是生活随笔為你收集整理的threejs相机和渲染器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。