three.js加载obj模型和材质

1.Vue中安装three.js和加载用的包

安装three.js使用npm install three --save
安装加载obj和mtl文件的包npm install three-obj-mtl-loader

2.Vue中引用three.js和加载用的包

这里threejs我是作为全局变量引入的
main.js的代码如下：

import * as THREE from 'three'
Vue.prototype.THREE = THREE

组件中引入相应的加载类

import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader'

3.对于obj和mtl文件说明

3D软件导出的文件包含：obj是3D模型，mtl是材质路径，还有一些图片。
这些图片就是所谓的材质，mtl文件规定了这些贴图所对应的模型，一个大型的obj文件会有很多个子模型，在mtl中也会有很多个子模块，每个模块都有对应的贴图以及贴图的路径，即mtl是联系obj和图片文件的桥梁。

4.加载obj模型和材质

 var mtlLoader = new MTLLoader()// mtl材加载器
      mtlLoader.setTexturePath('/data/tex/')// 材质加载路径
      mtlLoader.load('/data/Shuriken.mtl', materials => {
        materials.preload()
        var objLoader = new OBJLoader()
        objLoader.setMaterials(materials)
        objLoader.load('/data/Shuriken.obj', (obj) => {
          obj.traverse((child) => {
            if (child instanceof that.THREE.Mesh) {
              child.material.side = that.THREE.DoubleSide
              child.scale.set(50, 50, 50)
            }
          })
          that.scene.add(obj)
        })
      })

mtlLoader.setTexturePath('/data/tex/')
这个是材质加载路径，这个要和mtl文件中的路径结合起来才是对应材质图片的路径。
obj.traverse((child) => {}
用来遍历obj文件中的每一个子模型，注意一定需要if (child instanceof that.THREE.Mesh)这个判断，因为遍历返回的child不光有Mesh还有Group，我们这里只需要对Mesh操作就可以啦。

5.遇到的问题

（一）文件路径问题

3D软件导出文件都要放在静态文件夹下面，对于Vue3+而言是public文件，所以在引用的时候要用“/”。mtlLoader.load('/data/Shuriken.mtl'单斜杠的意思就是public文件夹，这个静态文件夹在编译的时候是不会编译其地址的，所以放在服务器上也就是这个地址。

（二）threejs版本问题

报错：xxx has been removed，plase use loadingManager…

这个问题的原因是在加载mtl文件的时候用了旧版本的方式。

解决方案：

1.打开对应的index.js文件
2.找到对应位置更改
我的问题是因为Handler.get方法已经不用啦，用的是manager.getHandler()，即将下图中箭头的代码删去后半部分，将框中的代码恢复就行。