在vue-cli3中使用three.js的OBJLoader和MTLLoader来加载三维模型文件.obj和.mtl

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

•  使用npm install three-obj-mtl-loader --save
• 在组件中引入：import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader'
• 使用OBJLoader和MTLLoader加载文件：

  // 加载obj和mtl模型
     let _this = this;
     let mtlLoader = new MTLLoader();
     mtlLoader.load(`${_this.publicPath}model/place.mtl`, function(materials) {
        materials.preload();
        let objLoader = new OBJLoader();
        objLoader.load(`${_this.publicPath}model/place.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

  },

使用组件：
 

遇到的问题：

• 出现以下报错的解决方案：
  
  
   
• 报错的原因：
  .obj经过了webpack的处理，需要把.obj文件放到vue中处理静态文件的文件夹中，在vue-cli3中public文件夹下的文件不需要经过webpack处理，在vue-cli3.0之前就是放在static静态文件文件夹下，在vue-cli3.0中需要放在public文件夹下，并且在组件中通过process.env.BASE_URL+public文件夹下的.obj文件的路径来引用。
• 解决方案：

  项目目录：
  node_modules
  public
    -model
      -place.obj
      -place.mtl
  src