three.js 渲染.obj模型

通过引入外部文件渲染模型和使用内部模型对象的方式是一样的，只不过需要使用内部方法先将文件解析为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都是异步，在加载多个外部模型时，我们可以通过两种方式：同步/异步

1. 同步,我们通过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)
      })
    })
  })
}

2. 异步，先执行模型渲染，获取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)
    })
  })
}