加载OBJ和MTL文件

HTML方式

在vue中使用

第一种方法使用three-obj-mtl-loader插件

使用npm install three-obj-mtl-loader --save

在组件中引入：import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader'

使用OBJLoader和MTLLoader加载文件：

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

 // 加载obj和mtl模型
      let _this = this
      let mtlLoader = new MTLLoader()
      mtlLoader.load('./static/material.mtl',function(materials){
        materials.preload();
        let objLoader = new OBJLoader()
        objLoader.load('./static/model.obj',function(obj){
          obj.scale.x = obj.scale.y = obj.scale.z = 100
          obj.rotation.y = 500
          let mesh =obj
          mesh.position.y = -50
          _this.scene.add(mesh)
        })
      })

第二种方法使用vue-3d-model组件

npm install vue-3d-model --save

引入组件：

import { ModelObj } from 'vue-3d-model'

components: {

​    ModelObj

},
 data() {
    return {
      publicPath: process.env.BASE_URL
    }
  },

使用组件：

​ 一般使用这个会存在找不到obj模块的情况，这是因为经过了webpack的处理,需要把.obj文件放到vue处理静态文件的文件夹中，vue-cli3是放在static文件夹下，但是vue-cli3及之后就需要放到public文件夹下，并且在组件中通过process.env.BASE_URL+public文件夹下的.obj文件的路径来引用