Three.js - 載入3D模型

3D模型有多種格式。您可以將大多數模型匯入Three.js並快速使用它們。有些格式難以使用，對於即時體驗效率低下，或者目前Three.js尚不支援。讓我們討論一些標準格式以及如何將它們載入到Three.js檔案中。

注意 - Three.js中只有少數格式載入器是內建的。要載入其他格式的模型，您需要包含它們的JavaScript檔案。您可以在Three.js程式碼庫的three/examples/jsm/loaders目錄中找到所有不同的載入器。

要載入任何模型，我們使用這三個簡單的步驟：

在您的網頁中包含[NameOfFormat]Loader.js。
使用[NameOfFormat]Loader.load()載入URL。
檢查回撥函式的響應格式是什麼樣的，並渲染結果。

OBJ模型載入器

OBJ檔案以文字形式定義材質的幾何形狀。許多其他3D建模軟體都可以建立OBJ格式的模型。在Threejs中，匯入OBJ時，預設材質為白色MeshPhongMaterial。您的場景中至少需要一個光源。您可以使用OBJLoader載入OBJ格式的模型。

要在您的Three.js專案中使用OBJLoader，您需要新增OBJLoader JavaScript檔案。

<script type="text/javascript" src="../scripts/OBJLoader.js"></script>

然後，您可以像載入紋理一樣使用.load方法載入模型。

const loader = new THREE.OBJLoader()
loader.load('path/to/your/.obj file', (object) => {
   scene.add(object)
})

在此程式碼中，我們使用OBJLoader從URL載入模型。模型載入完成後，我們將提供的回撥函式被呼叫，如果需要，我們可以自定義載入的網格。

MTL模型載入器

OBJ和MTL是配套格式，經常一起使用。MTL檔案定義OBJ檔案中使用的材質。MTL也是基於文字的格式。

<script type="text/javascript" src="../scripts/MTLLoader.js"></script>

我們將在本程式碼片段中一起使用MTLLoader和OBJLoader。

const mtlLoader = new THREE.MTLLoader()
mtlLoader.load('/path/to/your/.mtl file', (materials) => {
   materials.preload()
   // loading geometry
   const objLoader = new THREE.OBJLoader()
   objLoader.setMaterials(materials)
   objLoader.load('path/to/your/.obj file', (object) => {
      mesh = object
      scene.add(mesh)
   })
})

它首先載入材質。然後我們將OBJ檔案的材質設定為載入的材質，然後載入OBJ檔案。它建立了我們渲染物件到場景所需的網格，就像Three.js專案中的那些一樣自定義網格或材質。

GLTF模型載入器

glTF檔案可能包含一個或多個場景、網格、材質、紋理、蒙皮、骨骼、變形目標、動畫、光源和相機。這是Three.js官方推薦的格式。.GLB和.GLTF版本的格式都得到了Three.js的良好支援。由於glTF專注於執行時資源交付，因此它緊湊易於傳輸且載入速度快。

<script src="../scripts/GLTFLoader.js"></script>

使用GLTFLoader物件，您可以匯入JSON（.gltf）或二進位制（.glb）格式。

const loader = new THREE.GLTFLoader()
// loading model
loader.load('path/to/model.glb', (gltf) => {
   scene.add(gltf.scene)
})

匯入的glTF模型的場景被新增到我們的Three.js專案中。載入的模型可能包含兩個場景；您可以指定要匯入的場景。

DRACO載入器

DRACOLoader用於載入使用Draco庫壓縮的幾何體（.drc格式檔案）。Draco是一個用於壓縮和解壓縮3D網格和點雲的開源庫。

glTF檔案也可以使用DRACO庫進行壓縮，也可以使用glTFLoader載入。在這種情況下，我們可以配置glTFLoader使用DRACOLoader來解壓縮檔案。

<script src="../scripts/GLTFLoader.js"></script>
<script src="../scripts/DRACOLoader.js"></script>

像任何其他模型一樣，您可以輕鬆地使用DRACOLoader載入.drc檔案。然後，您可以向載入的幾何體新增材質並將網格渲染到場景中。

const loader = new THREE.DRACOLoader()
loader.setDecoderPath('/scripts/draco/')
// Load a Draco geometry
loader.load('path/to/your/.drc file', (geometry) => {
   const material = new THREE.MeshStandardMaterial({ color: 0xffffff })
   const mesh = new THREE.Mesh(geometry, material)
   scene.add(mesh)
})

當您要匯入使用Draco庫壓縮幾何體的glTF檔案格式時，可以使用此程式碼片段。

const dracoLoader = new THREE.DRACOLoader()
dracoLoader.setDecoderPath('/scripts/draco/')
dracoLoader.setDecoderConfig({ type: 'js' })
// loading glTF model that uses draco library
const loader = new THREE.GLTFLoader()
loader.setDRACOLoader(dracoLoader)
loader.load('models/monkey_compressed.glb', (gltf) => {
   scene.add(gltf.scene)
})

STL模型載入器

STL模型格式廣泛用於快速原型製作、3D列印和計算機輔助製造。

STL檔案僅描述3D物件的表面幾何形狀，沒有任何顏色、紋理或其他常用3D建模屬性的表示。您可以將它們新增到回撥函式中。

<script src="../scripts/STLLoader.js"></script>

我們使用.stl檔案中的幾何體，並在將其新增到場景之前向其新增材質。

const material = new THREE.MeshPhysicalMaterial({ color: 0xaaaaaa })
const loader = new THREE.STLLoader()
loader.load('path/to/your/.stl file', (geometry) => {
   const mesh = new THREE.Mesh(geometry, material)
   scene.add(mesh)
})

您可以載入到Three.js專案的格式還有很多。上面提到的都是標準格式。載入器檔案文件齊全，易於使用。

故障排除

如果您無法正確載入模型，或者模型失真、變色或完全丟失。以下是Three.js官方網站中提到的某些故障排除步驟：

檢查JavaScript控制檯是否有錯誤，並確保在呼叫.load()時使用了onError回撥來記錄結果。
在另一個應用程式中檢視模型。對於glTF，Three.js和Babylon.js都提供拖放檢視器。如果模型在一個或多個應用程式中正確顯示，則針對Three.js提交錯誤報告。如果模型在任何應用程式中都無法顯示，則應向用於建立模型的應用程式提交錯誤報告。
嘗試將模型放大或縮小1000倍。許多模型的縮放比例不同，如果相機位於模型內部，則大型模型可能不會顯示。
嘗試新增和定位光源。模型可能隱藏在黑暗中。
在網路選項卡中查詢失敗的紋理請求，例如C:\\Path\To\Model\texture.jpg。改用相對於模型的路徑，例如images/texture.jpg - 這可能需要在文字編輯器中編輯模型檔案。

尋求幫助

假設您已經完成了上述故障排除過程，但您的模型仍然無法正常工作。在這種情況下，尋求幫助的正確方法可以更快地幫助您找到解決方案。在Three.js論壇上釋出問題，並在可能的情況下，包含您擁有的任何格式的模型（或具有相同問題的更簡單的模型）。包含足夠的資訊以便其他人能夠快速重現問題 - 最好是一個即時演示。

列印頁面