three项目迁移至vue

时间:2022-05-23 Brc 人气:1

由于我的3D场景起初是自己为了测试搭建的，所以使用的是html + three，后来将代码迁移到vue项目的过程中出现了下面的几个问题：

通过npm下载three依赖无法正常使用
导入模型的路径出现了问题，导致模型无法正常渲染
3D场景渲染后没有进行销毁

通过npm下载的three依赖无法正常使用

在原项目中使用的是three相关的js文件，而迁移项目的时候本来准备直接通过npm下载相关依赖进行操作，但是发现下载依赖后照着常规的形式导入相关的控件会报错；

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

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

当时转而使用直接导入下载好的js文件的形式，将文件放在public目录下，直接在index.html中进行引用，才解决了这个问题。

导入模型的路径出现了问题

一开始我将需要导入的模型文件放在src/assets下面，但是导入模型的方法找不到模型文件，代码如下：

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) {

  });
});

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

通过查询资料后，有人说要把模型文件放在public/static目录下，修改后导入成功，代码如下：

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) {

  });
});

但是打包部署之后，3D模型的路径又出现了错误，原因是打包后的文件路径出现了变化，但是设置的路径不会随着打包变化，导致打包和本地运行时需要不同的路径；
因为我们的项目部署后是通过ip访问的，所以我的做法是判断当前的url，区分是本地运行还是线上运行；也可以通过webpack配置根据不同的命令使用不同的路径；

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) {

  });
});

3D场景渲染后没有进行销毁

在项目中发现频繁的在3D场景的页面和其他页面切换会导致页面卡顿，是由于在切换路由时没有清除相关模型导致大量占用了内存；
所以需要在离开3D场景销毁模型，并且释放相关的变量，例如renderer、scene、camera、controls

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

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

加载全部内容