Three.js - 簡介

所有現代瀏覽器都變得更加強大，並且可以直接使用 JavaScript 訪問。它們採用了 WebGL（Web 圖形庫），這是一種 JavaScript API，允許您在任何相容的 Web 瀏覽器中使用 GPU（圖形處理單元）的功能渲染高效能互動式 3D 和 2D 圖形。

但是 WebGL 是一個非常底層的系統，它只能繪製點、正方形和線等基本物件。然而，直接從 JavaScript 程式設計 WebGL 過程非常複雜且冗長。您需要了解 WebGL 的內部細節並學習複雜的著色器語言才能充分利用 WebGL。這時 Three.js 應運而生，讓您的生活變得輕鬆。

什麼是 Three.js？

Three.js 是一個開源、輕量級、跨瀏覽器、通用的 JavaScript 庫。Three.js 在後臺使用 WebGL，因此您可以使用它在瀏覽器中的 HTML <canvas> 元素上渲染圖形。由於 Three.js 使用 JavaScript，因此您可以與其他網頁元素互動，新增動畫和互動，甚至建立一些邏輯的遊戲。

為什麼要使用 Three.js？

以下特性使 Three.js 成為一個優秀的庫。

您只需使用 JavaScript 即可建立複雜的 3D 圖形。
您可以在瀏覽器內建立虛擬現實 (VR) 和增強現實 (AR) 場景。
由於它使用 WebGL，因此它具有跨瀏覽器支援。許多瀏覽器都支援它。
您可以新增各種材質、紋理並對 3D 物件進行動畫處理。
您還可以載入和處理來自其他 3D 建模軟體的物件。

只需幾行 JavaScript 程式碼和簡單的邏輯，您就可以建立任何東西，從高效能互動式 3D 模型到逼真的即時場景。

以下是一些使用 Three.js 建立的優秀網站：

您可以在 three.js 的官方網站上找到更多示例。

瀏覽器支援

目前，桌上型電腦和移動裝置上的所有現代瀏覽器都支援 WebGL。唯一需要注意的瀏覽器是移動版 Opera Mini 瀏覽器。對於 IE 10 及更早版本，可以使用 IEWebGL 外掛，您可以從 https://github.com/iewebgl/iewebgl./ 獲取。您可以找到關於 WebGL 瀏覽器支援的詳細資訊這裡。

瞭解了 Three.js 是什麼之後，您可以繼續下一章，瞭解如何設定專案以開始使用 Three.js。

列印頁面