Home >> Blog >> Three.js 簡介
Three.js 簡介
你有沒有想過這些圖形和遊戲是如何在網絡瀏覽器上運行的？它背後的主要技術是什麼？當然，僅使用 HTML 和 CSS 是不可能的。在前幾天，我們使用WebGL來完成這項任務。WebGL(Web graphics Library) 是 JavaScript API，用於在 Web 瀏覽器上渲染 3 維對象、2 維對象和圖形。WebGL API 允許用戶通過 GPU 加速體驗網頁上的交互式內容，而無需先下載或安裝任何插件。對於SEO開發人員，WebGL 使用熟悉的 OpenGL ES 程式碼結構提供對硬體的低階訪問。
WebGL 由 Mozilla 組織創建。有了 WebGL 的所有這些優點，WebGL 也有一些缺點，其中Three.js發揮了作用。WebGL 是非常低階的系統，只繪製點、正方形和線等基本對象。使用 WebGL 做任何有意義的事情通常需要相當多的程式碼，這就是Three.js的用武之地。
什麼是 Three.js？
Three.js是一個開源 JavaScript 庫，用於在 Web 瀏覽器上顯示圖形、3D 和 2D 對象。它在後台使用 WebGL API。Three.js 允許您使用您的 GPU（圖形處理單元）在 Web 瀏覽器的畫布上渲染圖形和 3D 對象。因為我們使用的是 JavaScript，所以我們也可以與其他 HTML 元素交互。Three.js 由 Ricardo Cabello 於 2010 年 4 月發布。
為什麼我們使用 Three.js？
- 由於 Three.js 是開源的，所以我們可以輕鬆地查看源程式碼並了解程式碼（函數）的功能。
- 當我們將 WebGL 用於圖形時，它不支持大多數瀏覽器，但 Three.js 支持大多數瀏覽器。
- 它不需要任何第三方插件來運行程式碼。
- 您只需要使用一種編寫程式語言 JavaScript 和非 HTML 即可。
如何在您的項目中包含 Three.js？
在項目中添加 Three.js 的方法有很多，其中一些非常簡單，有些則有點複雜，但是它們都表示我們必須在我們的項目中包含這些文件中的任何一個：
- 三.js
- 三分鐘.js
- 三.module.js
這些所有文件都可以在Three.js 的 GitHub 頁面上找到。
方法 1：（下載完整的項目 Three.js）：最簡單的方法是在您的系統上下載完整的 three.js 項目並使用那裡的文件。
您可以從其GitHub 頁面下載最新版本的 three.js 。下載後，打開它並查看構建文件夾，您會在其中找到三個腳本。
方法 2：（使用 NPM 或 YARN 安裝 Three.js 的包）： Three.js 也可以作為NPM 上的包提供。這意味著如果您在計算機上設置了 Node.js 和 NPM，那麼您可以打開命令提示符
並鍵入：
npm 我三
然後，您可以通過引用三個包將 three.js 從 three.module.js 文件導入到您的 JavaScript 文件中：
從“三”導入*為三；
而且，如果您更喜歡 Yarn 而不是 NPM，那麼您也可以在終端窗口中使用以下命令添加包：
紗加三
方法 3：（使用 CDN 連結）：您可以從 CDN（內容交付網絡）連結文件，這是一個專門用於託管文件的遠程站點，以便您可以在網站中使用它們。
事實上，您甚至可以將 Three.js.org 站點用作 CDN。您可以使用以下連結連結 three.js 文件：https ://threejs.org/build/three.js ，並將其包含在您的 HTML 中，如下所示：
但是在使用three.js.org CDN 連結時存在問題，通過使用此連結，您將始終在更新版本上工作。當我們處於開發模式時很好，但是如果我們談論生產，如果任何功能或語法隨著更新而發生變化，那麼您的程式碼將停止工作，所以我們建議使用這些站點的 CDN：
- cdnjs.com
- www.jsdelivr.com
就是這樣，通過使用這些方法中的任何一種，您都可以在項目中使用Three.js。