果你對 3D 圖形的可能性著迷，但發現從頭開始創建 3D 模型的想法是不可能的 - 不用擔心！

Three.js 是一個強大的 JavaScript 庫，它可以幫助我們輕松地將現有的 3D 模型集成到 React 應用程序中。因此，在本文中，我將深入探討 Three.js 的基本知識，并指導你在項目中融入令人驚嘆的 3D 模型。

NSDT工具推薦： Three.js AI紋理開發包 - YOLO合成數據生成器 - GLTF/GLB在線編輯 - 3D模型格式在線轉換 - 可編程3D場景編輯器 - REVIT導出3D模型插件 - 3D模型語義搜索引擎 - Three.js虛擬軸心開發包 - 3D模型在線減面 - STL模型在線切割

1、一切是如何開始的

曾幾何時...

“在數字深淵的霓虹燈浸透的深處，一切都開始了。一行代碼，電線中的一陣電流聲，世界就被永遠改變了。陰影里藏著秘密，在它們的內部，一個 他們說，這一切是如何開始的，是黑暗的、合成的未來，是由一次黑客攻擊、一次突破、一次在電路中回響的下載引發了一場由 1 和 0 組成的革命。”

最近，我發現自己正在檢查我的舊作品集，它迫切需要改造，因為它是在我剛剛開始編程時制作的。 我們可以忽略它的視覺細節。

在設計方面，我知道我想要一些更真實的東西，而且由于我喜歡視頻游戲，所以我渴望加入一些很酷的 3D 模型。

但問題是 - 我對 Three.js 的了解為零到很少，并且不想要無聊的球體或立方體。
因此，我卷起袖子，開始研究，很快我就找到了我的 3D 模型，并決定無論如何都要堅持將該 3D 模型納入我的作品集！

該模型是 Oscar Creativo 的杰作，這是他在 Sketchfab 上的個人資料。 我強烈建議你檢查一下！

由于我花了相當多的時間尋找解決方案，然后結合了一些最佳實踐和優化，并且因為我知道還有更多像我一樣固執的人，所以我決定讓他們的生活更輕松，并分享我的經驗和實現目標的步驟 相同的結果。

我的目標是通過提供簡單明了的解釋來簡化整個過程，并使其對初學者友好。

那么讓我們開始吧！

2、關于 Three.js 和先決條件

雖然 Three.js 提供了一個廣泛的工具包來從頭開始構建 3D 體驗，但我的重點將是利用可供開發人員使用的巨大的預制 3D 模型存儲庫。 為什么？

因為通過這樣做，我們可以立即升級我們的 React 應用程序并引入一些真正令人印象深刻的東西。

盡管如此，在做出決定之前權衡利弊還是很重要的。 雖然利用預制 3D 模型具有明顯的優勢，例如節省時間、高質量、廣泛的選擇、潛在的成本節省和更快的學習曲線，但我們也必須考慮到一些缺點，例如定制有限、可能超載、許可限制 ，以及可能需要仔細考慮和適應的無縫集成的潛在挑戰。

我的建議是探索可用的免費 3D 模型，并確保檢查并包含適當的許可信息。 或者，考慮選擇符合你偏好的付費模式。

現在，讓我們做好準備，為你的應用程序注入活力！

先決條件如下：

2.1 很棒的3D模型

有什么新鮮事嗎，chromehead？

選擇 3D 模型后，繼續下載。 將出現以下對話框：

正如您將看到的，存在不同的格式，雖然 Three.js 可以處理所有這些格式，但 GLTF 或 GLB 是首選，因為它們的效率、多功能性以及 Three.js 社區和更廣泛的 Web 開發生態系統中的廣泛支持。

以下是幾種格式的簡短解釋：

• FBX (Filmbox)：電影和娛樂行業使用的流行專有 3D 模型格式，以其多功能性以及對動畫和復雜場景的支持而聞名。 Three.js可以通過FBXLoader處理FBX模型。 它可以加載幾何圖形、動畫和材質，適合導入電影和娛樂行業常用的復雜 3D 模型。
• USDZ（通用場景描述）：針對在 iOS 設備上共享 3D 模型和 AR 體驗而優化的文件格式，與 Apple 的 ARKit 良好集成。 USDZ 主要用于 iOS 設備上的 AR 應用程序。 雖然 Three.js 可以處理這些模型，但可能需要額外的步驟或轉換才能將它們有效地集成到基于 Three.js 的項目中。
• GLTF（GL 傳輸格式）：開放標準文件格式，可有效表示 3D 模型和場景，同時針對 Web 進行優化，使其成為基于 Web 的 3D 體驗的廣泛使用的格式。 由于其效率和對 Web 的適用性，GLTF 是 Three.js 的首選格式。 Three.js 有一個內置的 GLTFLoader，可以無縫加載 GLTF 模型，包括幾何圖形、材質、動畫等。
  GLB（GL Binary）：基于 GLTF 的二進制文件格式，將 3D 場景、紋理和動畫打包到單個文件中，提高效率和可移植性。 GLB 是 GLTF 的二進制版本，Three.js 可以使用相同的 GLTFLoader 來處理它。 GLB 文件是獨立的，封裝了 3D 模型及其關聯數據，使其高效且易于使用。

由于上述原因，在本文中我將使用 GLTF 格式。 這些文件將以 zip 存檔的形式下載，之后你需要將其解壓縮。

3.2 React和three.js技術棧

我們需要安裝以下庫：

npm install three @react-three/drei @react-three/fiber    

yarn add three @react-three/drei @react-three/fiber

• Three.js：一個強大的 JavaScript 庫，用于創建和使用 3D 圖形和模型。
• @react-two/drei：有用的鉤子、組件和實用程序的集合，用于增強 Three.js 和 React 集成。
• @react-two/fibre：Three.js 的 React 渲染器，允許將 Three.js 無縫集成到 React 應用程序中。

4、關于文件夾結構和文件??

public -> 3DfolderName 

解壓后的 3D 模型文件夾位于包含紋理文件夾以及 scene.bin、scene.gltf 和許可證的公共文件夾中。 請注意，每種格式都有不同的文件和結構。

src -> components (containing Loader.jsx) -> canvas folder -> CyberGirl.jsx + index.js

包含代碼 CyberGirl.jsx 的主要組件放置在 canvas 文件夾中，并導出到 index.js 中，以便將來可擴展。 Loader.jsx 用作后備組件，用于顯示 3D 模型的加載百分比。

5、代碼及解釋

CyberGirl.jsx：

useGLTF 鉤子用于從指定路徑加載 3D 模型。 它獲取并準備 3D 模型以在 Three.js 環境中進行渲染。

useRef()創建一個名為 modelRef 的 React 引用。 React 中的 Refs 用于直接訪問 DOM 或 React 元素并與之交互。 它用于引用組件內的 3D 模型并應用轉換或與其交互。

細節層次 (LOD) 是 Three.js 庫中的一項功能，用于優化 3D 模型的渲染。 首先創建 LOD 類的實例來管理模型的不同版本。 在這種情況下，將創建原始 3D 模型的四個克隆實例，每個實例代表不同的細節級別。 此 LOD 通過在距離相機較遠時顯示簡化模型來提高渲染性能，從而減少計算負載。

LOD 系統的運行獨立于變焦或相機控制設置。 它旨在根據相機與模型之間的距離自動在不同版本的 3D 模型之間切換，無論是否啟用縮放。

LOD 主要用于在不需要遠距離渲染高細節模型且計算成本較高的場景下優化 3D 模型的渲染。 當相機靠近或遠離模型時，LOD 系統會自動切換到適當的細節級別。

<primitive/> 是 Three.js 元素，用于渲染 3D 模型。 它使用 gltf.scene 作為模型/對象來顯示并設置模型在 3D 空間中的比例、位置和旋轉。 位置和旋轉都使用具有三個值 [ X, Y, Z ]的數組，表示沿 X、Y 和 Z 軸的坐標。 使用參考 (modelRef) 可以與渲染的 3D 模型進行潛在的編程交互。

Canvas 組件設置陰影和基于需求的幀循環，以及針對不同顯示器的 1 和 2 的設備像素比。

• shadows 是啟用或禁用 3D 場景中陰影渲染的屬性。 它表示場景將支持陰影渲染，這意味著 3D 對象可以投射和接收來自光源的陰影，從而為場景增添真實感。
• frameloop 是一個屬性，決定如何在 3D 場景中管理動畫循環。 在本例中，它設置為“需求”。 這意味著動畫循環僅在明確請求時才會運行，通常是在需要設置動畫時。 這可以更有效，因為它不會連續運行動畫循環，從而可以節省計算資源。 幀循環的其他選項始終是 rAF (requestAnimationFrame)、調整大小和自定義函數。
• dpr（設備像素比）是控制設備像素比的屬性。 它被設置為數組 [1, 2]，這意味著它為不同的顯示器提供不同的像素比。 設備像素比用于確保圖形在不同屏幕密度的設備（例如標準和高密度顯示器）上清晰顯示。 值 1 表示標準像素密度，值 2 表示高密度（視網膜）顯示，需要以更高分辨率進行渲染才能清晰。

Suspense 將 CanvasLoader 組件渲染為后備，并在加載 3D 模型時顯示加載進度指示器。

ambientLight 是一種光源，它均勻地照亮場景中的所有對象，無論其位置或方向如何。 它通常用于為整個場景提供基本級別的光線，模擬全局照明。 環境光不會投射陰影或具有特定方向，相反，它只是照亮一切。 有關道具的更多信息請查閱這里。

pointLight 是一種更具方向性的光源，從 3D 空間中的特定點向各個方向發射光。 它模擬點光源，如燈泡。 它可以投射陰影并具有各種屬性，例如位置、顏色和強度。 位置指定燈光的位置，而顏色和強度分別控制燈光的顏色和亮度。 點光源對于創建局部的、真實的光照效果非常有用。 有關道具的更多信息，請檢查此。

OrbitControls 組件允許在 3D 場景中進行交互式攝像機控制。 它使用戶能夠平移、縮放和繞 3D 對象旋轉。

• enableZoom 是指使用鼠標或觸摸板進行放大和縮小的可能性。
• enablePan 指的是在場景內橫向移動攝像機的可能性。 要使用此功能，請刪除將 3D 模型固定在某個位置的 maxPolarAngle 和 minPolarAngle。
• autoRotate 通常使相機圍繞某個興趣點緩慢旋轉。 將其設置為 false 會停止此行為。
• maxPolarAngle 和 minPolarAngle 屬性設置相機可以向上或向下傾斜的最大和最小角度（以弧度為單位）。 在這種情況下，其設置方式使得相機不能直視向上或向下。

要查找用于配置 OrbitControls 組件的可用屬性的完整列表，請參閱此資源。

Preload 組件用于在渲染 3D 場景之前預加載資源。 具體來說，它用于異步預加載紋理、模型或其他資源，確保它們在場景開始渲染之前完全加載并可用。 它應該放置在 Suspense 組件中，以便在預加載資源時提供后備 UI。

Loader.jsx

CanvasLoader 組件的目標是在 3D 模型加載之前顯示加載元素。 它從 @react-two/drei 庫導入兩個元素：Html 和 useProgress，以跟蹤 3D 資源的加載進度。

加載進度以百分比形式顯示在嵌套在居中的 Html 元素內的 p 中。 由于進度常量保存有幾個小數位的浮點數，因此使用 toFixed(2) 將確保它在最終輸出中顯示為精確兩位小數。

index.js

該文件充當 CyberGirl 組件的中心導出點，使得從應用程序的其他部分導入更加方便。 這種做法使導入語句保持干凈和有組織，并且可以輕松擴展以包含其他 3D 組件。

Hero.jsx - 使用 3D 模型的地方

最后，從canvas文件夾中的index.js文件導入 CyberGirl組件。

雖然還有更多選項可供探索和自定義，但此示例是使用 Three.js 集成令人印象深刻的預制 3D 模型的簡單方法。 源代碼可以在我的 GitHub 上找到。

6、結束語

Three.js 和 React 的結合開啟了一個充滿創意可能性的世界，使我們能夠將迷人的 3D 模型無縫集成到我們的 Web 應用程序中。 憑借大量可用的預制 3D 模型以及 react-three/fiber 和 react-three/drei 等庫提供的簡化 React 集成，為我們的應用程序注入活力是如此酷且輕松！

原文鏈接：React.js 3D應用開發入門 - BimAnt

們最近為荷蘭設計師家具制造商 KILO 發布了基于網絡的 3D 配置器的第一個生產版本。我們使用了 Salsita 3D 配置器，這是一個內部 SDK，使新的 3D 配置器的實施變得輕而易舉。雖然它給我們帶來了巨大幫助，但我們仍然面臨一些有趣的挑戰。

NSDT工具推薦： Three.js AI紋理開發包 - YOLO合成數據生成器 - GLTF/GLB在線編輯 - 3D模型格式在線轉換 - 可編程3D場景編輯器 - REVIT導出3D模型插件 - 3D模型語義搜索引擎 - Three.js虛擬軸心開發包 - 3D模型在線減面 - STL模型在線切割

1、參數化模型

最大的挑戰是實現完整的參數化建模（parametric modeling）。 KILO 的制造工藝使他們能夠提供定制尺寸的家具。然而，到目前為止，他們的在線客戶僅限于標準尺寸的產品。為了解決這個問題，我們在配置器中添加了尺寸滑塊。用戶可以選擇家具的準確高度、寬度和深度，并將更改立即應用于產品的 3D 可視化。

具有可定制尺寸的 KILO 家具配置器

為了實現這一目標，我們需要使用所謂的參數化 3D 模型。與普通的 3D 模型不同，它們的形狀不是固定的，而是取決于各種輸入參數：尺寸、架子數量、門安裝的一側等。

參數化模型通常使用復雜的建模語言（例如 Grasshopper）來指定。不幸的是，他們缺乏一個基于 JavaScript 的解釋器，可以在輸入參數發生變化時快速生成模型。我們還考慮了 OpenJSCAD 和其他一些替代方案，但事實證明它們都過于復雜，要么是我們需要將它們集成到配置器中，要么是它們用于設計新模型的語言。

最后，我們決定直接依賴 Three.js，這是一個著名的 WebGL 3D 引擎，我們的配置器 SDK 已經大量使用它。我們將模型分成單獨的部分，繪制每個部分的 2D 形狀，然后使用 Three.js 將其拉伸為 3D。最后一步是組裝各個部件以形成實際的家具。我們使用 React-Three-Fiber 作為管理 Three.js 場景的反應式方式，使最后兩個步驟變得非常簡單?；旧衔覀冎恍枰峁┝慵?2D 形狀、位置和旋轉，并且每次它們發生變化時模型都會更新。

這種方法意味著我們需要一種描述二維形狀的方法。 KILO的家具造型簡單干凈，以直線為主，帶有少量圓角。有了這組非常有限的構建塊，就形成了一種簡單的基于 JavaScript 的“領域特定語言”(DSL)，通過它我們可以對任何 KILO 部件進行建模。簡而言之，DSL 允許你指定形狀的角點，可以選擇通過提供半徑來使它們變圓。再加上圓形家具的通用弧形元素，足以覆蓋 KILO 的所有產品。

模型的動態性（即尊重輸入參數）留給 JavaScript 本身。無需在 DSL 中指定固定坐標，只需使用高度和寬度等變量以及 JavaScript 計算即可。所有 JavaScript 開發人員都知道的各種技術都可以輕松地應用于 DSL 代碼，使其更加模塊化、可讀和可重用。單個產品的所有模型生成邏輯都封裝在單個工廠函數中。

以下代碼片段顯示了一個基于高度變量動態構造的圓角矩形：

const height=1
const width=height + 0.5

const shape: ShapeElement[]=[
  { corner: [0, 0] },
  {
    corner: [width, 0],
    radius: Math.min(width / height) / 4
  },
  { corner: [width, height] },
  { corner: [0, height] }
]

我們使用一組相當簡單的例程將上述工廠函數生成的定義“繪制”到目標空間中，無論是用于 3D 擠出的 2D 形狀、SVG 圖像還是后來的 AutoCAD DXF 文件。 DSL 還可以簡單且高精度地計算面積和周長，這對于向客戶顯示正確的價格非常重要。

通過我們的繪圖例程傳遞片段時得到的結果

剛才提到的所有內容都是用 TypeScript 編寫的，可以在服務器和瀏覽器上的 Node.js 中運行。這樣，當用戶調整尺寸滑塊時，可以輕松地近乎實時地動態更新 3D 模型，并允許在服務器上進行價格計算等處理。在進一步的版本中，DSL 還將為我們的生產儀表板提供訂單分組、零件自動嵌套以及完全嵌套板的 DXF 導出等功能。

一張膠合板上的部分布局可供數控機床切割

2、站點集成

另一個挑戰是使用 WooCommerce 商業功能集成到現有的 WordPress 網站。盡管我們考慮過使用 iframe，但最終我們決定使用自定義 WordPress 插件進行無縫集成。該插件將配置器的 React 應用程序直接注入主站點。

為了減少配置器和 WordPress 站點之間的耦合，我們將配置器前端和 API 托管在單獨的服務器上。每當用戶登陸產品頁面時，我們的 WordPress 插件就會從我們的服務器中提取前端包。

幸運的是，配置器 SDK 設計得很好，在我們集成配置器時并沒有妨礙我們。所有樣式的范圍都正確地限定為目標組件（我們使用emotion庫），因此我們只需要在 WordPress 插件中定義一個根元素，然后在該元素中引導整個配置器應用程序。

我們使用 Create React App 來生成生產版本。該代碼由 Webpack 捆綁到帶有隨機版本哈希后綴的文件中。這是在部署新版本時使瀏覽器重新獲取應用程序文件的最可靠方法。不幸的是，這意味著插件無法在不提前知道哈希值的情況下將正確的文件鏈接到 WordPress 中。

我們通過在每次部署到我們的服務器時將插件的更新版本推送到 WordPress 網站來解決這個問題。作為一個有益的副作用，我們可以將插件更新與應用程序的其余部分一起部署，而無需任何額外的工作。所有這一切都是由我們的 CI/CD 管道精心安排的。

除了向現有站點添加配置器之外，我們還解決了一些用戶體驗問題并總體改進了用戶界面。主頁就是一個很好的例子，頂部的時尚照片輪播占據了中心舞臺。重點關注 KILO 令人驚嘆的設計師家具的高分辨率圖片是激發客戶興趣的有效方式。

但凡事都有其限度。由于原始輪播占據了瀏覽器窗口的整個高度，因此用戶可以向下滾動以查看輪播下方的內容并不明顯。然而，最重要的內容隱藏在用戶瀏覽器底部邊緣的正下方：包含整個產品組合中的產品圖像的圖塊。我們稍微降低了傳送帶的高度，以便產品圖塊的頂部始終可見。這個簡單的提示足以讓用戶向下滾動。

KILO 使用定制的 WordPress/WooCommerce 主題來真正創建獨特的外觀和感覺，并遵循公司的高設計標準。為了使我們對網站的影響易于追蹤和可逆，我們根據現有主題創建了自己的子主題。這使我們能夠覆蓋網站的某些方面，同時保持其余部分完好無損。子主題只是 WordPress 站點內的一個目錄，它是作為我們的 CI/CD 部署的一部分推送的，如上所述。

3、外觀和性能

一開始客戶對使用3D模型表示了一些疑慮?？蛻舯硎?，3D 模型通?？雌饋聿粔蛘鎸?，并且具有卡通外觀，給客戶留下了負面印象。他們說他們更喜歡簡化的外觀。然而，看到 KILO 家具簡單的形狀，我們有信心能夠讓它看起來不錯。客戶對我們所做的早期預覽深信不疑，因此我們最終追求“現實模型”的想法。

我們收到了 KILO 使用的層壓膠合板的實物樣品，拍攝了幾張邊緣照片，并將其轉化為逼真的紋理。令人驚訝的是，拍攝照片的最佳工具是中端智能手機，因為它的景深是固定的（幾乎是無限的）。我們還仔細觀察了表面層，發現了合適的“橙皮”凹凸貼圖。該貼圖將平坦的人造表面變成了具有逼真紋理的更加“有形”的材質。

另一個大大提高 3D 模型真實感的因素是照明。事實證明，找到一種可以投射真實陰影同時準確顯示材質顏色的照明設置幾乎是不可能的。一個方向上的微小改進往往會對另一個方向產生災難性的影響。

最后，我們決定定義場景的照明以創建適當的陰影、反射和其他效果。然后，我們通過稍微改變其實際值來補償不完美的顏色。例如，黑色不再是純RAL黑色（RGB#000000）；我們必須讓它變得更輕，這樣它才不會看起來像一個耗光的黑洞。其他顏色需要降低飽和度，以使它們看起來不那么卡通化。

即使 KILO 零件的幾何形狀很簡單，當我們轉向越來越真實的陰影時，我們也開始面臨性能問題。巧合的是，GPU 檢測功能剛剛被引入到我們已經使用的支持庫中。得益于此，我們能夠在高端 GPU 上顯示真實的陰影，并在低端設備上回退到所謂的“接觸陰影”（其計算成本要低得多）。接觸陰影只是物體下方的一個模糊點，如果場景中有數百個來自各個方向的燈光，就會出現這種情況。對于真實陰影與接觸陰影的優點存在不同的看法。我個人更喜歡接觸陰影，因為它們讓我專注于物體本身而不是陰影。

4、結束語

KILO 項目證明我們的 3D Configurator SDK 可以輕松擴展用于初始設計期間未預期的用例。不需要對 SDK 進行任何重大重寫（甚至不需要參數化模型），我們要做的更改主要涉及改進總體架構以使其更加靈活。得益于我們的 SDK，我們能夠在短短六周內準備好 MVP。

我們還證明，我們可以成功地將配置器集成到在 WordPress 和 WooCommerce 等傳統整體平臺上運行的電子商務解決方案中，盡管該過程并不像我們將其與 Shopify 或等現代平臺集成時那樣順利。更好的是像 commercetools 這樣的 MACH 兼容解決方案。

原文鏈接：參數化3D產品配置器 - BimAnt