浅谈将three项目迁移至vue项目遇到的问题

// 例如下面的代码，导入three可以正常创建场景、创建模型
// 但是使用OrbitControls等控件会报错
import * as THREE from 'three'

// 查询资料后有人说是需要单独导入，但是我是使用下面的导入形式从three包中导入相关文件依然会报错
import "three/examples/js/controls/OrbitControls"

let mtlLoader = new THREE.MTLLoader();
let objLoader = new THREE.OBJLoader();
mtlLoader.setPath(`@/assets/objs/`);
mtlLoader.load("server2.mtl", function(materials) {
  materials.preload();
  objLoader.setMaterials(materials);
  objLoader.setPath(`@/assets/objs/`);
  objLoader.load("server2.obj", function(object) {

  });
});

// 页面直接报错，无法正常渲染

let mtlLoader = new THREE.MTLLoader();
let objLoader = new THREE.OBJLoader();
mtlLoader.setPath(`/static/objs/all/`);
mtlLoader.load("server2.mtl", function(materials) {
  materials.preload();
  objLoader.setMaterials(materials);
  objLoader.setPath(`/static/objs/all/`);
  objLoader.load("server2.obj", function(object) {

  });
});

let resourcesUrl = ''; // 通过判断赋予不同的路径

let mtlLoader = new THREE.MTLLoader();
let objLoader = new THREE.OBJLoader();
mtlLoader.setPath(`${resourcesUrl}/static/objs/all/`);
mtlLoader.load("server2.mtl", function(materials) {
  materials.preload();
  objLoader.setMaterials(materials);
  objLoader.setPath(`${resourcesUrl}/static/objs/all/`);
  objLoader.load("server2.obj", function(object) {

  });
});

scene.remove(mesh); // scene下的模型

scene = null;
camera = null;
controls = null;
renderer.dispose();