淺談將three項(xiàng)目遷移至vue項(xiàng)目遇到的問題
由于我的3D場景起初是自己為了測試搭建的，所以使用的是html + three，后來將代碼遷移到vue項(xiàng)目的過程中出現(xiàn)了下面的幾個問題：
- 通過npm下載three依賴無法正常使用
- 導(dǎo)入模型的路徑出現(xiàn)了問題，導(dǎo)致模型無法正常渲染
- 3D場景渲染后沒有進(jìn)行銷毀
通過npm下載的three依賴無法正常使用
在原項(xiàng)目中使用的是three相關(guān)的js文件，而遷移項(xiàng)目的時(shí)候本來準(zhǔn)備直接通過npm下載相關(guān)依賴進(jìn)行操作，但是發(fā)現(xiàn)下載依賴后照著常規(guī)的形式導(dǎo)入相關(guān)的控件會報(bào)錯；
// 例如下面的代碼，導(dǎo)入three可以正常創(chuàng)建場景、創(chuàng)建模型 // 但是使用OrbitControls等控件會報(bào)錯 import * as THREE from 'three' // 查詢資料后有人說是需要單獨(dú)導(dǎo)入，但是我是使用下面的導(dǎo)入形式從three包中導(dǎo)入相關(guān)文件依然會報(bào)錯 import "three/examples/js/controls/OrbitControls"
當(dāng)時(shí)轉(zhuǎn)而使用直接導(dǎo)入下載好的js文件的形式，將文件放在public目錄下，直接在index.html中進(jìn)行引用，才解決了這個問題。
導(dǎo)入模型的路徑出現(xiàn)了問題
一開始我將需要導(dǎo)入的模型文件放在src/assets下面，但是導(dǎo)入模型的方法找不到模型文件，代碼如下：
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) {
? });
});
// 頁面直接報(bào)錯，無法正常渲染通過查詢資料后，有人說要把模型文件放在public/static目錄下，修改后導(dǎo)入成功，代碼如下：
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)了變化，但是設(shè)置的路徑不會隨著打包變化，導(dǎo)致打包和本地運(yùn)行時(shí)需要不同的路徑；
因?yàn)槲覀兊捻?xiàng)目部署后是通過ip訪問的，所以我的做法是判斷當(dāng)前的url，區(qū)分是本地運(yùn)行還是線上運(yùn)行；也可以通過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場景渲染后沒有進(jìn)行銷毀
在項(xiàng)目中發(fā)現(xiàn)頻繁的在3D場景的頁面和其他頁面切換會導(dǎo)致頁面卡頓，是由于在切換路由時(shí)沒有清除相關(guān)模型導(dǎo)致大量占用了內(nèi)存；
所以需要在離開3D場景銷毀模型，并且釋放相關(guān)的變量，例如renderer、scene、camera、controls
scene.remove(mesh); // scene下的模型 scene = null; camera = null; controls = null; renderer.dispose();
到此這篇關(guān)于淺談將three項(xiàng)目遷移至vue項(xiàng)目遇到的問題的文章就介紹到這了,更多相關(guān)three項(xiàng)目遷移至vue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例
這篇文章主要介紹了Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
最近通過在網(wǎng)上查找資料，自己整合研究了一個可以直接在表格中操作數(shù)據(jù)的基于element-ui的前端模板。可以讓增改數(shù)據(jù)的操作顯得方便一點(diǎn)，感興趣的可以了解一下2021-12-12
這篇文章主要介紹了關(guān)于表單組件el-form中的prop的作用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細(xì)介紹了Vue?Canvas實(shí)現(xiàn)電子簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue實(shí)現(xiàn)導(dǎo)航吸頂效果的教程詳解
在瀏覽器上下滾動的時(shí)候,如何距離頂部的距離大于78px,吸頂顯示,小于78px則隱藏,所以本文小編給大家介紹了Vue設(shè)置導(dǎo)航吸頂?shù)脑敿?xì)教程,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2024-01-01
在Vue進(jìn)行前端開發(fā)中,條件判斷主要用于根據(jù)不同的條件來決定顯示或隱藏,或者進(jìn)行視圖之間的切換,這篇文章主要給大家介紹了關(guān)于Vue條件判斷之循環(huán)舉例詳解的相關(guān)資料,需要的朋友可以參考下2024-07-07
vue動畫之點(diǎn)擊按鈕往上漸漸顯示出來的實(shí)例
今天小編就為大家分享一篇vue動畫之點(diǎn)擊按鈕往上漸漸顯示出來的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue渲染器如何對節(jié)點(diǎn)進(jìn)行掛載和更新
這篇文章主要介紹了Vue 的渲染器是如何對節(jié)點(diǎn)進(jìn)行掛載和更新的,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-05-05
vue項(xiàng)目中運(yùn)用webpack動態(tài)配置打包多種環(huán)境域名的方法
本人分享一個vue項(xiàng)目里，根據(jù)命令行輸入不同的命令，打包出不同環(huán)境域名的方法。需要的朋友跟隨小編一起看看吧2019-06-06
這篇文章主要為大家介紹了VueRouter原理解讀之初始化流程實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05