通过引入外部文件渲染模型和使用内部模型对象的方式是一样的，只不过需要使用内部方法先将文件解析为group，再添加到场景中scene.add(group)
加载.obj模型，需要使用MTLLoader和OBJLoader，我们先引入
// 解析.obj模型
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
// 解析.mtl材质
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
MTLLoader\OBJLoader都是异步，在加载多个外部模型时，我们可以通过两种方式：同步/异步
- 同步,我们通过Promise，async/await 拿到group,再统一添加到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) => {
// 设置模型自带的材质属性
oBJLoader.setMaterials(materials)
oBJLoader.load(objUrl, (result) => {
resolve(result)
})
})
})
}
- 异步，先执行模型渲染，获取renderer、scene、camera，后续当解析完模型时渲染对应模型，这样不会阻塞模型整体渲染
// mtlUrl .mtl文件路径
// objUrl .obj文件路径
// fn 可选，回调函数，自定义对group中mesh做调整
function loadObj(mtlUrl, objUrl, fn) {
let { renderer, scene, camera } = render
let mTLLoader = new MTLLoader()
let oBJLoader = new OBJLoader()
mTLLoader.load(mtlUrl, (materials) => {
// 设置模型自带的材质属性
oBJLoader.setMaterials(materials)
oBJLoader.load(objUrl, (result) => {
if (fn) {
fn(result)
}
scene.add(result)
renderer.render(scene, camera)
})
})
}
