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

1,148

「这是我参与2022首次更文挑战的第2天,活动详情查看:2022首次更文挑战」。

由于我的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();