01 初識Three.js
阿新 • • 發佈：2018-12-15
什麼是WebGL？
WebGL（Web圖形庫）是一種JavaScript API，用於在任何相容的Web瀏覽器中呈現互動式的3D或者2D圖形，並且不用使用任何的外掛。WebGL通過引入一個與OpenGL ES2.0緊密相符合的API，可以在HTML5元素中使用。簡而言之，WebGL可以提供一系列的圖形介面，通過js去使用GPU來進行瀏覽器圖形渲染的工具。
什麼是Three.js？
Three.js是一款WebGL框架，由於其易用性被廣泛應用。而Three.js在WebGL的API介面基礎上又進行了一層封裝。Three.js以簡單、直觀的方式封裝了3D圖形程式設計中常用的物件。Three.js在開發中使用了很多圖形引擎的高階技巧，極大的提高了效能，而由於其內建了很多常用物件和極易上手的工具，Three.js的功能也很強大，關鍵在於Three.js是完全開源的。
WebGL和Three.js的關係
WebGL原生的API是一種非常低階的介面，而且還需要一些數學和圖形學的相關技術。對於沒有相關基礎的人來說，入門比較困難，Three.js將入門的門檻降低了整整一大截，對WebGL進行封裝，簡化了我們建立三維動畫場景的過程。只需要有一定的JavaScript基礎，有一定的前端經驗即可。用一句話概括二者的關係：WebGL與Three.js的關係相當於JavaScript與jQuery之間的關係。
Three.js的功能概述
由於Three.js的易用性和擴充套件性，使其能夠滿足大部分的開發需求，Three.js的具體功能如下：
- Three.js掩蓋了3D渲染的細節。Three.js將WebGL原生的API的細節抽象化，將3D場景拆解為網格、材質和光源（即Three.js內建了圖形程式設計常用的一些物件種類）。
- 面向物件。開發者可以使用上層的JavaScript物件，而不僅僅呼叫JavaScript函式。
- 功能豐富。Three.js除了封裝了WebGL原始的API之外，Three.js還包含了許多實用的內建物件，可以方便的應用於遊戲開發、動畫製作、幻燈片製作、高解析度模型和一些特殊的視覺效果製作。
- 速度快。Three.js採用了3D圖形最佳實踐來保證在不失可用性的前提下保持極高的效能。
- 支援互動。WebGL本身不提供拾取功能（即是否知道滑鼠正處於某個物體上），而Three.js則固化了拾取支援，這就便於為應用新增互動功能。
- 包含數學庫。Three.js擁有一個強大易用的數學庫，可以在其中進行矩陣、投影和向量計算。
- 內建檔案格式支援。可以使用當前的3D建模軟體匯出文字格式的檔案，然後使用Three.js載入，也可以使用Three.js自帶的json格式或者二進位制格式。
- 擴充套件性強。為Three.js新增新的特性或進行自定義優化是很容易的事。如果需要某個特殊的資料結構，那麼只需要封裝到Three.js即可。
- 支援HTML5 canvas。Three.js不僅支援WebGL，而且還支援使用canvas2D、CSS3D和SVG進行渲染。在未相容的WebGL環境中可以回退到其他的解決方案。
Three.js的缺點
雖然Three.js的優勢很大，但是其也有不足的地方：
- 官網文件非常粗糙，對於入門的新手極度不好。
- 國內相關資源的匱乏。
- Three.js多有的資料都是以英文格式存在，對於英文不好的開發者來說又提高了門檻。
- Three.js不是遊戲引擎，一些遊戲相關的功能並沒有封裝在裡面，如果需要相關的功能則需要進行二次開發。
Three.js的引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>three.js-01</title>
<link rel="stylesheet" type="text/css" href="css/threejs01.css"/>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
</head>
<body onload="init()">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.js"></script>
<script>
//書寫需要的JS程式碼
</script>
</body>
</html>