three.js 載入3D模型

目前，3D模型的格式有成千上萬種可供選擇，但每一種格式都具有不同的目的、用途以及復(fù)雜性。 雖然 three.js已經(jīng)提供了多種導(dǎo)入工具， 但是選擇正確的文件格式以及工作流程將可以節(jié)省很多時(shí)間，以及避免遭受很多挫折。某些格式難以使用，或者實(shí)時(shí)體驗(yàn)效率低下，或者目前尚未得到完全支持。

對(duì)大多數(shù)用戶，本指南向你推薦了一個(gè)工作流程，并向你提供了一些當(dāng)沒有達(dá)到預(yù)期效果時(shí)的建議。

在開始之前

如果你是第一次運(yùn)行一個(gè)本地服務(wù)器，可以先閱讀如何在本地運(yùn)行Three.js。 正確地托管文件，可以避免很多查看3D模型時(shí)的常見錯(cuò)誤。

推薦的工作流程

如果有可能的話，我們推薦使用glTF（gl傳輸格式）。.GLB和.GLTF是這種格式的這兩種不同版本， 都可以被很好地支持。由于glTF這種格式是專注于在程序運(yùn)行時(shí)呈現(xiàn)三維物體的，所以它的傳輸效率非常高，且加載速度非?？臁?功能方面則包括了網(wǎng)格、材質(zhì)、紋理、皮膚、骨骼、變形目標(biāo)、動(dòng)畫、燈光和攝像機(jī)。

公共領(lǐng)域的glTF文件可以在網(wǎng)上找到，例如 Sketchfab，或者很多工具包含了glTF的導(dǎo)出功能：

• Blender by the Blender Foundation
• Substance Painter by Allegorithmic
• Modo by Foundry
• Toolbag by Marmoset
• Houdini by SideFX
• Cinema 4D by MAXON
• COLLADA2GLTF by the Khronos Group
• FBX2GLTF by Facebook
• OBJ2GLTF by Analytical Graphics Inc
• …and 還有更多

倘若你所喜歡的工具不支持glTF格式，請(qǐng)考慮向該工具的作者請(qǐng)求glTF導(dǎo)出功能， 或者在the glTF roadmap thread貼出你的想法。

當(dāng)glTF不可用的時(shí)候，諸如FBX、OBJ或者COLLADA等等其它廣受歡迎的格式在Three.js中也是可以使用、并且定期維護(hù)的。

加載

在three.js中只會(huì)內(nèi)置一部分加載器（例如：ObjectLoader） —— 其它的需要在你的應(yīng)用中單獨(dú)引入。

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

一旦你引入了一個(gè)加載器，你就已經(jīng)準(zhǔn)備好為場景添加模型了。不同加載器之間可能具有不同的語法 —— 當(dāng)使用其它格式的時(shí)候請(qǐng)參閱該格式加載器的示例以及文檔。對(duì)于glTF，使用全局script的用法類似：

const loader = new GLTFLoader();

loader.load( 'path/to/model.glb', function ( gltf ) {

	scene.add( gltf.scene );

}, undefined, function ( error ) {

	console.error( error );

} );

請(qǐng)參閱GLTFLoader documentation來深入了解詳細(xì)信息。

故障排除

你花了幾個(gè)小時(shí)親手建了一個(gè)堪稱杰作的模型，現(xiàn)在你把它給導(dǎo)入到網(wǎng)頁中—— 哦，天吶~??它導(dǎo)入以后完全失真了、材質(zhì)貼圖丟了、或者說整個(gè)模型完全丟失了！接下來我們來按照下面的步驟排除故障：

1. 在Javascript的Console中查找錯(cuò)誤，并確定當(dāng)你調(diào)用.load()的時(shí)候，使用了onError回調(diào)函數(shù)來輸出結(jié)果。
2. 請(qǐng)?jiān)谄渌膽?yīng)用程序中查看3D模型。對(duì)于glTF格式的模型來說，可以直接在下面的應(yīng)用程序中進(jìn)行查看： three.js和 babylon.js。 如果該模型能夠在一個(gè)或者多個(gè)應(yīng)用程序中正確地呈現(xiàn)，請(qǐng)點(diǎn)擊這里向three.js提交Bug報(bào)告。 如果模型不能在任意一個(gè)應(yīng)用程序里顯示，我們強(qiáng)烈鼓勵(lì)你向我們提交Bug報(bào)告，并告知我們你的模型是使用哪一款應(yīng)用程序創(chuàng)建的。
3. 嘗試將模型放大或縮小到原來的1000倍。許多模型的縮放比例各不相同，如果攝像機(jī)位于模型內(nèi)，則大型模型將可能不會(huì)顯示。
4. 嘗試添加一個(gè)光源并改變其位置。模型或許被隱藏在黑暗中。
5. 在網(wǎng)絡(luò)面板中查找失敗的紋理貼圖請(qǐng)求，比如說C:\\Path\To\Model\texture.jpg。載入貼圖時(shí)，請(qǐng)使用相對(duì)于模型文件路徑，例如 images/texture.jpg —— 這或許需要在文本編輯器中來對(duì)模型文件進(jìn)行修改。

請(qǐng)求幫助

如果你已經(jīng)嘗試經(jīng)歷了以上故障排除的過程，但是你的模型仍然無法工作，尋求正確的方法來獲得幫助將使您更快地獲得解決方案。 您可以將您的問題發(fā)布到three.js forum， 同時(shí)，盡可能將你的模型（或者一個(gè)簡單的、具有相同問題的模型）包含在你能夠使用的任何格式中，為其他人提供足夠的信息，以便快速重現(xiàn)這個(gè)問題 —— 最好是一個(gè)能夠現(xiàn)場演示的Demo。