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操作就可以啦。