THREE.JS 关于导入外部模型的可能问题

一、加载器导入

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

二、加载模型

• /js/draco/gltf/  用于解码使用KHR_draco_mesh_compression扩展压缩过的文件的地址。  

• /static/model/obj.glb 为模型的文件地址

   addModel() {
      loader
        .setDRACOLoader(new DRACOLoader().setDecoderPath('/js/draco/gltf/'))
        .load('/static/model/obj.glb', function (gltf) {
          turbine.add(gltf.scene)
        })

      turbine.scale.set(0.04, 0.04, 0.04) // 模型缩放
      turbine.position.set(3, -142, 0) // 模型位置调整

      scene.add(turbine)
    },

三、文件地址   

这部分常见问题为模型地址不对，通常报错：

目前分为两种情况：

1、webpack 打包：模型最好放在 static 中，并且加载的模型地址需要写全，不能省略前面的 static。（如上面示例）

2、vue-cli 打包：模型最好放在 public 中，加载地址可以省略前面的 public。