由于我的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();
到此这篇关于浅谈将three项目迁移至vue项目遇到的问题的文章就介绍到这了,更多相关three项目迁移至vue内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！