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

字风传诎

目录

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

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

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

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

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

1. // 例如下面的代码，导入three可以正常创建场景、创建模型
   
2. // 但是使用OrbitControls等控件会报错
   
3. import * as THREE from 'three'
   
4. 
   
5. // 查询资料后有人说是需要单独导入，但是我是使用下面的导入形式从three包中导入相关文件依然会报错
   
6. import "three/examples/js/controls/OrbitControls"

复制代码

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

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

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

1. let mtlLoader = new THREE.MTLLoader();
   
2. let objLoader = new THREE.OBJLoader();
   
3. mtlLoader.setPath(`@/assets/objs/`);
   
4. mtlLoader.load("server2.mtl", function(materials) {
   
5.   materials.preload();
   
6.   objLoader.setMaterials(materials);
   
7.   objLoader.setPath(`@/assets/objs/`);
   
8.   objLoader.load("server2.obj", function(object) {
   
9. 
   
10.   });
    
11. });
    
12. 
    
13. // 页面直接报错，无法正常渲染

复制代码

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

1. let mtlLoader = new THREE.MTLLoader();
   
2. let objLoader = new THREE.OBJLoader();
   
3. mtlLoader.setPath(`/static/objs/all/`);
   
4. mtlLoader.load("server2.mtl", function(materials) {
   
5.   materials.preload();
   
6.   objLoader.setMaterials(materials);
   
7.   objLoader.setPath(`/static/objs/all/`);
   
8.   objLoader.load("server2.obj", function(object) {
   
9. 
   
10.   });
    
11. });

复制代码

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

1. let resourcesUrl = ''; // 通过判断赋予不同的路径
   
2. 
   
3. let mtlLoader = new THREE.MTLLoader();
   
4. let objLoader = new THREE.OBJLoader();
   
5. mtlLoader.setPath(`${resourcesUrl}/static/objs/all/`);
   
6. mtlLoader.load("server2.mtl", function(materials) {
   
7.   materials.preload();
   
8.   objLoader.setMaterials(materials);
   
9.   objLoader.setPath(`${resourcesUrl}/static/objs/all/`);
   
10.   objLoader.load("server2.obj", function(object) {
    
11. 
    
12.   });
    
13. });

复制代码

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

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

1. scene.remove(mesh); // scene下的模型
   
2. 
   
3. scene = null;
   
4. camera = null;
   
5. controls = null;
   
6. renderer.dispose();

复制代码

到此这篇关于浅谈将three项目迁移至vue项目遇到的问题的文章就介绍到这了,更多相关three项目迁移至vue内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

aw355

感谢楼主，顶。

钟立平讲平ou

感谢楼主分享。

湛碧莹

顶顶更健康！！！