Three.js 入門：如何使用並繪製基礎 3D 圖形

1、 前言

Three.js 是一款 webGL（3D繪圖標準，在此不贅述）引擎，能夠運行於全部支持 webGL 的瀏覽器。Three.js 封裝了 webGL 底層的 API ，爲咱們提供了高級的開發接口，可使用簡單的代碼去實現 3D 渲染。（官網：https://threejs.org/）

2、 爲何要選擇Three.js？

Three.js 做爲原生 web3D 引擎，對插件式 web3D 引擎的優點不言而喻：不須要安裝插件、在移動端支持好。

Three.js 與其餘原生 web3D 引擎對比：

1. Babylon.js：一個強大的 3D 遊戲引擎，由 Microsoft 的員工 David Cathue 主導開發。和 Three.js 相比，three.js 更傾向於動畫，而 Babylon.js 則更適合遊戲開發。

2. PhiloGL：增長了額外的功能幫助你可使用本地的 WebGL ，這個 WebGL 的接口不是百分之百的被封裝好了的，這使得 PhiloGL 上手難度較高。

3. SceneJS：一個開源的 JavaScript 3D 引擎，特別適合須要高精度細節的模型需求，好比工程學和醫學上經常使用的高精度模型。

4. CopperLicht：一個「商業級別的 WebGL 3D 引擎和編輯器」，你能夠無償使用，可是要想得到未壓縮的完整版帶支持文檔的源碼和其餘服務，則須要購買受權。

相對這些 web3D 引擎，Three.js 的還有如下幾點優點：

• 開發和維護比較活躍；

• 文檔齊全，案例豐富，易於學習；

• 設計靈活、方便拓展以及增長新的特性；

咱們能夠根據本身的須要去選擇web3D引擎。

3、 開始Three.js

一、 引導

在開始咱們的第一個 3D 程序以前，咱們須要瞭解 Three.js 的一些基礎，如下是 Three.js 製做 3D 的五要素：

1. 渲染器（render）
   咱們能夠把渲染器想一想成爲一個畫布，咱們須要在這個畫布上去畫出咱們須要展現的東西。

2. 場景（scene）
   至關於一個空間，咱們須要將展現的東西放在這個空間裏，而後再在畫布上繪製出來。

3. 照相機（camera）
   至關於眼睛，咱們想要看到物體，就須要眼睛去看。

4. 光源（light）
   物體須要光照才能看見，否則就是漆黑一片（可是在某些狀況下展現物體不須要光源）。

5. 物體（object）
   咱們想要表現的內容，會有形狀和材質屬性。

瞭解了五要素以後，就能夠開始寫咱們的代碼了。

二、 建立渲染器

首先，咱們建立一個渲染器。建立渲染器有兩種方式：

a. 在 html 上寫出 canvas 元素

<canvas id="mainCanvas" width="600px" height="450px" ></canvas>
而後建立渲染器時綁定此元素
var renderer = new THREE.WebGLRenderer({
  canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(「#000」); // 設置渲染器背景爲黑色

b. html 上不建立 canvas 元素，而是使用普通的元素做爲容器

<div id="mainCanvas" style="width:600px;height:450px;" ></div>
而後建立渲染器，放入容器中
var canvasContainer = document.getElementById('mainCanvas');
var width = canvasContainer.clientWidth;  //獲取畫布的寬
var height = canvasContainer.clientHeight;  //獲取畫布的高
var renderer = new THREE.WebGLRenderer({
  antialias: true  //抗鋸齒開
});
renderer.setSize(width, height);  //設置渲染器的寬和高
renderer.setClearColor(0x000000); //設置渲染器的背景顏色爲黑色
var canvas = renderer.domElement; //獲取渲染器的畫布元素
canvasContainer.appendChild(canvas); //將畫布寫入html元素中

這樣，咱們的渲染器就建立成功了。
建立渲染器時，還能夠設置多個屬性，好比抗鋸齒、透明度等等，詳見 three.js 官方文檔。

三、 建立場景

渲染器建立以後，咱們再建立場景，準備將咱們須要繪製的東西放入場景。

var scene = new THREE.Scene();

四、 建立照相機

照相機經常使用的有兩種，一種叫正投影相機：

THREE.OrthographicCamera( left, right, top, bottom, near, far )；

下圖爲該照相機的視野：

一種叫作透視照相機：

THREE.PerspectiveCamera( fov, aspect, near, far ) ;

下圖爲該照相機的視野：

下圖爲兩個照相機展現效果的對比：

**左邊爲正投照相機，遠近大小都同樣；
右邊爲透視照相機，遠小近大，更接近於人眼觀察物體的感受。**

在此以正投照相舉例：

var camera = new THREE.OrthographicCamera(-6, 6, 4.5, -4.5, 0, 50); //建立照相機
camera.position.set(35, 15, 25);  //設置照相機的位置
camera.lookAt(new THREE.Vector3(0, 0, 0)); //設置照相機面向(0,0,0)座標觀察
照相機默認座標爲(0,0,0);
默認面向爲沿z軸向裏觀察;

五、 建立光源

經常使用光源有：

• 平行光(DirectionalLight)，效果相似太陽光

DirectionalLight ( color, intensity )
color — 光源顏色的RBG數值。
intensity — 光強的數值。

• 點光源(PointLight)，效果相似燈泡

PointLight ( color, intensity, distance, decay )
color — 光源顏色的RBG數值。
intensity — 光強的數值。
distance -- 光強爲0處到光源的距離，0表示無窮大。
decay -- 沿着光照距離的衰退量。

• 聚光光源(SpotLight)，效果相似聚光燈

SpotLight ( color, intensity, distance, angle, penumbra, decay )
color — 光源顏色的RBG數值。
intensity — 光強的數值。
distance -- 光強爲0處到光源的距離，0表示無窮大。
angle -- 光線散射角度，最大爲Math.PI/2。
penumbra -- 聚光錐的半影衰減百分比。在0和1之間的值。默認爲0。
decay -- 沿着光照距離的衰退量。

在此以點光源舉例：

var light = new THREE.PointLight(0xffffff, 1, 100); //建立光源
light.position.set(12, 15, 10); //設置光源的位置
scene.add(light); //在場景中添加光源

六、 建立物體

製做物體的方法是 Mesh：

new THREE.Mesh(Geometry, Material);

Geometry 爲物體的形狀，Material 爲物體的材質；

• 形狀(Geometry)
  three.js 給出了不少方法去生成固定的形狀，好比長方體(BoxGeometry)、球體(SphereGeometry)、圓形(CircleGeometry)等等。還有根據座標去生成具體形狀的方法，能夠藉助第三方建模軟件建模以後引入，轉換爲座標後再生成，就能夠作比較複雜的形狀了，好比人臉、汽車等等。

在此以長方體爲例生成形狀：

//設置正方體寬度，高度，深度分別爲5,5,5
var geometry = new THREE.BoxGeometry (5, 5, 5);

-材質(Material)
材質就像是物體的皮膚，決定物體外表的樣子，例如物體的顏色，看起來是否光滑，是否有貼圖等等。

經常使用材質有：

• 網格基礎材質(MeshBasicMaterial)
  該材質不受光照的影響，不須要光源便可顯示出來，設置顏色後，各個面都是同一個顏色。

• 網格法向材質(MeshNormalMaterial)
  該材質不受光照的影響，不須要光源便可顯示出來，而且每一個方向的面的顏色都不一樣，同但一個方向的面顏色是相同的，該材質通常用於調試。

• 網格朗博材質(MeshLambertMaterial)
  該材質會受到光照的影響，沒有光源時不會顯示出來，用於建立表面暗淡，不光亮的物體。

• 網格 Phong 材質(MeshPhongMaterial)
  該材質會受到光照的影響，沒有光源時不會顯示出來，用於建立光亮的物體。

在此以網格 Phong 材質爲例建立材質：

var material = new THREE.MeshPhongMaterial({
       color: "yellow" //設置顏色爲yellow
});

建立形狀和材質以後，就能夠建立該物體了：

//建立物體
var cube = new THREE.Mesh(geometry, material);

七、 渲染畫布

經過以上步驟，咱們已經有了渲染器(renderer)、場景(scene)、照相機(camera)、光源(light)和物體(cube)，此時咱們須要將光源和物體加入場景中：

scene.add(light);
scene.add(cube);
而後再使用渲染器將場景和照相機渲染出來：
renderer.render(scene, camera);

效果以下圖：

4、 結束語

在以上內容中，只寫到了 Three.js 中提供的基礎功能，還有不少高級的功能須要你們去探索。但願你們看完這篇文章後能對 Three.js 有一個初步的瞭解，並可以使用 Three.js 繪製出基礎的 3D 圖形。

你們能夠去 Three.js 官網的 examples 中看看，這裏面都是一些很優秀和典型的 examples，而且還有代碼能夠下載，你們能夠去研究探索一番。

在此附上幾個精彩的例子供你們欣賞：

反爬蟲
文章來源：http://bigsec.com/

Jason 豈安科技前端研發工程師 三年互聯網前端開發經驗，曾參與過多個系統框架的搭建和組件開發，負責豈安科技產品的數據可視化和公用組件開發。