通過引入外部文件渲染模型和使用內(nèi)部模型對象的方式是一樣的糊肤，只不過需要使用內(nèi)部方法先將文件解析為group慈参，再添加到場景中scene.add(group)
加載.obj模型药版，需要使用MTLLoader和OBJLoader虚缎，我們先引入
// 解析.obj模型
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
// 解析.mtl材質(zhì)
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
MTLLoader\OBJLoader都是異步毫目，在加載多個外部模型時，我們可以通過兩種方式：同步/異步
- 同步,我們通過Promise，async/await 拿到group,再統(tǒng)一添加到scene,最后渲染
// mtlUrl .mtl文件路徑
// objUrl .obj文件路徑
function loadObj(mtlUrl, objUrl) {
return new Promise((resolve) => {
let mTLLoader = new MTLLoader()
let oBJLoader = new OBJLoader()
mTLLoader.load(mtlUrl, (materials) => {
// 設(shè)置模型自帶的材質(zhì)屬性
oBJLoader.setMaterials(materials)
oBJLoader.load(objUrl, (result) => {
resolve(result)
})
})
})
}
- 異步，先執(zhí)行模型渲染淋肾，獲取renderer、scene爸邢、camera樊卓，后續(xù)當(dāng)解析完模型時渲染對應(yīng)模型，這樣不會阻塞模型整體渲染
// mtlUrl .mtl文件路徑
// objUrl .obj文件路徑
// fn 可選杠河，回調(diào)函數(shù)碌尔，自定義對group中mesh做調(diào)整
function loadObj(mtlUrl, objUrl, fn) {
let { renderer, scene, camera } = render
let mTLLoader = new MTLLoader()
let oBJLoader = new OBJLoader()
mTLLoader.load(mtlUrl, (materials) => {
// 設(shè)置模型自帶的材質(zhì)屬性
oBJLoader.setMaterials(materials)
oBJLoader.load(objUrl, (result) => {
if (fn) {
fn(result)
}
scene.add(result)
renderer.render(scene, camera)
})
})
}
