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

你可能感兴趣的:(three.js 渲染.obj模型)