淺談將three項目遷移至vue項目遇到的問題
由于我的3D場景起初是自己為了測試搭建的，所以使用的是html + three，后來將代碼遷移到vue項目的過程中出現(xiàn)了下面的幾個問題：
- 通過npm下載three依賴無法正常使用
- 導入模型的路徑出現(xiàn)了問題，導致模型無法正常渲染
- 3D場景渲染后沒有進行銷毀
通過npm下載的three依賴無法正常使用
在原項目中使用的是three相關的js文件，而遷移項目的時候本來準備直接通過npm下載相關依賴進行操作，但是發(fā)現(xiàn)下載依賴后照著常規(guī)的形式導入相關的控件會報錯；
// 例如下面的代碼，導入three可以正常創(chuàng)建場景、創(chuàng)建模型 // 但是使用OrbitControls等控件會報錯 import * as THREE from 'three' // 查詢資料后有人說是需要單獨導入，但是我是使用下面的導入形式從three包中導入相關文件依然會報錯 import "three/examples/js/controls/OrbitControls"
當時轉而使用直接導入下載好的js文件的形式，將文件放在public目錄下，直接在index.html中進行引用，才解決了這個問題。
導入模型的路徑出現(xiàn)了問題
一開始我將需要導入的模型文件放在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模型的路徑又出現(xiàn)了錯誤，原因是打包后的文件路徑出現(xiàn)了變化，但是設置的路徑不會隨著打包變化，導致打包和本地運行時需要不同的路徑；
因為我們的項目部署后是通過ip訪問的，所以我的做法是判斷當前的url，區(qū)分是本地運行還是線上運行；也可以通過webpack配置根據(jù)不同的命令使用不同的路徑；
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場景渲染后沒有進行銷毀
在項目中發(fā)現(xiàn)頻繁的在3D場景的頁面和其他頁面切換會導致頁面卡頓，是由于在切換路由時沒有清除相關模型導致大量占用了內存；
所以需要在離開3D場景銷毀模型，并且釋放相關的變量，例如renderer、scene、camera、controls
scene.remove(mesh); // scene下的模型 scene = null; camera = null; controls = null; renderer.dispose();
到此這篇關于淺談將three項目遷移至vue項目遇到的問題的文章就介紹到這了,更多相關three項目遷移至vue內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
使用Vue?Query實現(xiàn)高級數(shù)據(jù)獲取的示例詳解
構建現(xiàn)代大規(guī)模應用程序最具挑戰(zhàn)性的方面之一是數(shù)據(jù)獲取,這也是?Vue?Query?庫的用途所在,下面就跟隨小編一起學習一下如何利用Vue?Query實現(xiàn)高級數(shù)據(jù)獲取吧2023-08-08
本篇文章主要介紹了vue+iview寫個彈框的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了Vue項目判斷開發(fā)、測試、正式環(huán)境過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue-router 起步步驟詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了加速vue組件渲染之性能優(yōu)化，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了Vue中的插槽，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-10-10
這篇文章主要為大家詳細介紹了Vue.js動態(tài)組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
Vue3實現(xiàn)provide/inject的示例詳解
Vue3 的 Provide / Inject 的實現(xiàn)原理其實就是巧妙利用了原型和原型鏈來實現(xiàn)的。本文將通過示例為大家介紹下provide/inject的具體實現(xiàn)，需要的可以參考一下2022-11-11
這篇文章主要為大家詳細介紹了vue遞歸實現(xiàn)樹形組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Vue中ElementUI分頁組件Pagination的使用方法
這篇文章主要為大家詳細介紹了Vue中ElementUI分頁組件Pagination的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05