使用 Three.js 將 3D 元素添加到您的網站

已發表: 2019-11-02

平面設計很棒，但 3D 元素將網頁設計佈局提升到一個新的水平。 具有動畫 3D 圖形和交互式 3D 場景的網站正變得比以往任何時候都更加主流。 客戶現在想要在他們的網站上使用這些類型的設計，他們會向您索要。 學習如何將 3D 設計融入您的網頁設計項目只會改善您的職業道路並為您帶來更多客戶。 值得慶幸的是，Divi 設計人員和開發人員可以輕鬆使用 Three.js 等資源，將自定義 3D 元素添加到他們的網站。

在這篇文章中，我們將了解 Three.js 的基礎知識以及為什麼它是將 3D 元素添加到您的網站的不錯選擇。 是的，即使是您的 Divi 網站。 要開始使用 Three.js，您需要一些編碼知識，特別是 HTML、CSS 和 Javascript。 如果您仍在學習如何編碼，請從一開始就按照 Three.js 網站上的分步教程進行操作。 如果在何處添加代碼的術語對您來說是陌生的，那麼有很多教程可以引導您完成技術步驟。 我建議您觀看一些視頻，或者參加 Skillshare 或 Udemy 的課程，以真正了解如何將 Three.js 庫整合到您的設計中。

讓我們開始吧。

什麼是 Three.js

首先，什麼是 Three.js？

Three.js 是一個 javascript 3D 庫，提供 <canvas>、<svg>、CSS3D 和 WebGL 渲染器。 它無需插件即可為您的瀏覽器帶來 3D 設計。 該庫可以幫助您創建簡單的 3D 元素、複雜的 3D 交互和創意動畫遊戲。 Three.js 是一個帶有 Github 存儲庫的開源庫，用戶可以在其中分享他們自己的 Three.js 創作。

在 Three.js 涵蓋的所有渲染器中，最常用的是 WebGL。 僅使用 WebGL 創建 3D 元素需要大量代碼行和大量數學知識。 Three.js 使創建場景和使用 WebGL 渲染它變得更加容易。

理解 3D 場景和 Three.js 術語

要使用 Three.js 創建 3D 動畫，首先您必須了解 3D 場景是如何設置的。 構建 3D 設置所需的三個元素如下：

  1. 現場
  2. 相機
  3. 渲染器

該場景是您設置 Three.js 將顯示的所有 3D 元素的地方。 從視覺上看，它類似於劇院舞台或電視機。 相機是場景的視角，也是人類如何從技術上看到場景中的元素。 渲染器將它們放在一起並繪製場景。 如果您精通 3D 動畫，那麼您肯定會認為這是設置場景的標準。

設置場景後，將對象放置在其中。 對象的構建分三步：

  1. 幾何
  2. 材料
  3. 網格

對象的幾何形狀是形狀的骨架或基本輪廓。 為了給幾何體賦予顏色或紋理，應用了材料。 幾何體和材料的組合稱為網格。

Three.js 庫已經有很多基本的幾何圖形供您使用。 無需從頭開始構建它們。 您只需將它們從庫中調用到您的代碼中，然後自定義它們。 除了使用顏色的十六進制代碼作為材質之外，您還可以使用圖像創建紋理或在紋理庫中找到它們。

設置場景並添加幾何圖形後，您可以添加函數來照亮場景、為對象設置動畫等等。 除了 Three.js 庫中可用的基本對像外，您還可以從在線庫或您在 Blender 上創建的圖像上傳其他 3D 圖像。

Three.js 入門

使用 Three.js 再簡單不過了。 Three.js 網站包含您需要了解該庫如何工作以及如何使用它的所有文檔。

在 Three.js 網站和他們的 Github 上，您會找到最簡單的 Three.js 應用程序代碼的實時版本。 他們使用 JSFiddle 但你也可以看到它在 CodePen 或 Codesandbox.io 上工作

我建議您按照 Three.js 網站中的步驟來真正了解它是如何工作的。 使用 Codepen、您的終端或首選的編碼軟件。 整個 Three.js 庫都可以在 Threejs.org 網站上找到，一旦你設置好你的場景並開始注意到可以做什麼。 下面您可以看到在 JSFiddle 上運行的基本 Three.js 應用程序。 單擊“使用 JSFiddle 編輯”以使用代碼。

Three.js 學習資源

由於 Three.js 是一個開源 API，所以他們的 GitHub 存儲庫上總會發生一些事情。 這意味著總是有很多新東西需要學習。 值得慶幸的是，他們創建了一個數字手冊，該手冊會不斷更新以進行更改。 您可以在discoverthreejs.com 上找到它。 這是迄今為止最好的資源。 如果您需要有關如何設置應用程序和使用庫資產的分步教程，這裡有一個關於 Skillshare 的精彩課程，可引導您完成 Three.js 文檔中的所有步驟。

同樣，此 YouTube 教程向您展示了使用 Three.js 設置場景的基礎知識，但希望您了解基本的 Web 開發技能。

如果您想深入了解 Three.js 和 WebGL，這門 Udemy 課程將解釋這一切，並有望讓您在課程結束時流利地創建 3D 內容。

正在尋找詳細、快速和骯髒的教程？ 這個關於 CreativeBloq 的分步代碼教程正是您所需要的。

三.js 例子

沒有什麼比使用 Three.js 開始設計您自己的 3D 設計的一些靈感更好的了。 要查看一些令人難以置信的 Three.js 創作，只需訪問他們的網站並探索即可。

在 Divi 中使用 Three.js

在 Divi 中使用 Three.js 非常簡單。 您只需要將 javascript 庫添加到您的項目文件並將其添加到您的 HTML 中。 要將應用程序添加到任何 Divi 佈局，請首先在您喜歡的編碼軟件或計算機終端上單獨創建 3D 設計。 構建完成後，將 javascript 複製到代碼模塊中。 確保使用開始和結束 <script> 標籤。

結論

Three.js 是用於向網站添加 3D 元素的強大資源。 在這篇文章中，我們研究了 Three.js 工作原理的基本知識。 API 有很多內容，您真的必須深入研究並進行實驗。 可能性真的是無窮無盡的。 從簡單的旋轉立方體到豐富的數字世界中的複雜互動遊戲。 你會用 Three.js 創建什麼？

精選圖片來自 theromb/shutterstock.com