【計算機圖形學】入門Three.js，並搭建你的第一個3D場景

什麼是Three.js？

WebGL（Web Graphics Library）是一種3D繪圖協議，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript繫結，WebGL可以為HTML5 Canvas提供硬體3D加速渲染。
 
你可以將Three.js看作是WebGL的封裝——簡單、易用、強大、效果驚豔。

Three.js其實是一款執行在瀏覽器中的 3D 引擎。不過，這款引擎目前還處在比較不成熟的開發階段，其匱乏的文件與不活躍的社群增加了初學者的學習難度(201x年社群評論)；從現在看來(202x)，Three.js可謂胎死腹中——其實質是WebGL甚至OpenGL的衰落。

當然，這只是工具的迭代。OpenGL/WebGL/Three.js背後的計算機圖形學、計算機視覺、計算機演算法知識仍舊經典。這些看似被時代拋棄的事物，卻仍舊是入門某些領域的絕佳工具。

你可以用它建立各種三維場景，包括網格模型、材質、光影、攝影機等各種物件，並在瀏覽器中看到精彩直觀的演示。

 
 

引入three.js

<script src="three.js-master/build/three.js"></script>

 
 

three.js程式碼結構

 
 

用Three.js製作第一個3D場景

// hello.js
// 在hello.html檔案中引入three.js和hello.js就可以啦

//【場景Scene】
var scene = new THREE.Scene();
// 網格模型
var geometry = new THREE.BoxGeometry(100, 100, 100);                    // 幾何體
var material = new THREE.MeshLambertMaterial({ color: 0xFFC0CB });      // 材質
var mesh = new THREE.Mesh(geometry, material);                          // 網格模型
scene.add(mesh);
// 光照
var point = new THREE.PointLight(0xffffff);                             // 點光源
var ambient = new THREE.AmbientLight(0x444444);                         // 環境光
point.position.set(400, 200, 300);
scene.add(point);
scene.add(ambient);

//【相機Camera】
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 100;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);   // 投影方式
camera.position.set(400, 200, 200);                                         // 位置
camera.lookAt(scene.position);                                              // 視線方向

//【渲染器Renderer】
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xFAEBD7, 1);
document.body.appendChild(renderer.domElement);

renderer.render(scene, camera);											// 渲染

 
 
 

3D場景簡單優化

▍繪製球體

上面的程式碼建立了一個長寬高均為100的立方體（var geometry = new THREE.BoxGeometry(100, 100, 100);）

同樣也可以建立一個球體（var geometry = new THREE.SphereGeometry(60, 40, 40);）

Three.js還提供了很多封裝好的3D圖形；別忘了把網格模型add到場景scene中！
 
▍設定透明度

剛剛我們在設定材質時，只設定了顏色這個引數。其實還可以設定其他常用的屬性，如透明度：

var material = new THREE.MeshLambertMaterial({ color: 0x0000ff, opacity: 0.7, transparent: true });
// opacity表示模型的透明度，取值為0～1
// transparent表示是否開啟透明效果，預設false，這裡置為true使透明度的設定生效

▍新增高光

初中物理教會我們自然界中存在兩種反射：鏡面反射和漫反射

上面的MeshLambertMaterial即漫反射，下面的MeshPhongMaterial為鏡面反射：

var material = new THREE.MeshPhongMaterial({ ... });

▍自動旋轉

HTML5標準中，W3C提供了一個用於動畫展示的方法requestAnimationFrame()，預設60FPS，效果很不錯

function render() {
      renderer.render(scene, camera);		// 渲染
      geometry.rotateY(0.01);				// 每次繞y軸旋轉0.01弧度
      requestAnimationFrame(render);		// 再次請求渲染
}
render();

更嚴格的寫法：

let T0 = new Date();
function render() {
    let T1 = new Date();
    let t = T1 - T0;
    renderer.render(scene, camera);
    geometry.rotateY(0.001 * t);
    requestAnimationFrame(render);
    T0 = T1;
}
render();

▍滑鼠操作3D模型

這體現出了Three.js的其中一個強大之處——豐富的控制元件，只需要簡單的引入就可以使用它們的功能

這裡引入的是軌道控制元件：

<script src="./three.js-master/examples/js/controls/OrbitControls.js"></script>

// 縮放————滾輪
// 平移————右鍵
// 旋轉————左鍵

function render() {
    renderer.render(scene, camera);					// 渲染
}

var controls = new THREE.OrbitControls(camera);		// 建立控制元件物件
controls.addEventListener('change', render);		// 監聽事件

render();

 
 
 
 

 
 
 
 

 
 
 
 

$END$