" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談將three項(xiàng)目遷移至vue項(xiàng)目遇到的問(wèn)題

 更新時(shí)間:2022年01月21日 09:05:39   作者:Brc  
本文主要介紹了將three項(xiàng)目遷移至vue項(xiàng)目遇到的問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

由于我的3D場(chǎng)景起初是自己為了測(cè)試搭建的,所以使用的是html + three,后來(lái)將代碼遷移到vue項(xiàng)目的過(guò)程中出現(xiàn)了下面的幾個(gè)問(wèn)題:

  • 通過(guò)npm下載three依賴無(wú)法正常使用
  • 導(dǎo)入模型的路徑出現(xiàn)了問(wèn)題,導(dǎo)致模型無(wú)法正常渲染
  • 3D場(chǎng)景渲染后沒(méi)有進(jìn)行銷毀

通過(guò)npm下載的three依賴無(wú)法正常使用

在原項(xiàng)目中使用的是three相關(guān)的js文件,而遷移項(xiàng)目的時(shí)候本來(lái)準(zhǔn)備直接通過(guò)npm下載相關(guān)依賴進(jìn)行操作,但是發(fā)現(xiàn)下載依賴后照著常規(guī)的形式導(dǎo)入相關(guān)的控件會(huì)報(bào)錯(cuò);

// 例如下面的代碼,導(dǎo)入three可以正常創(chuàng)建場(chǎng)景、創(chuàng)建模型
// 但是使用OrbitControls等控件會(huì)報(bào)錯(cuò)
import * as THREE from 'three'

// 查詢資料后有人說(shuō)是需要單獨(dú)導(dǎo)入,但是我是使用下面的導(dǎo)入形式從three包中導(dǎo)入相關(guān)文件依然會(huì)報(bào)錯(cuò)
import "three/examples/js/controls/OrbitControls"

當(dāng)時(shí)轉(zhuǎn)而使用直接導(dǎo)入下載好的js文件的形式,將文件放在public目錄下,直接在index.html中進(jìn)行引用,才解決了這個(gè)問(wèn)題。

導(dǎo)入模型的路徑出現(xiàn)了問(wèn)題

一開(kāi)始我將需要導(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) {

? });
});

// 頁(yè)面直接報(bào)錯(cuò),無(wú)法正常渲染

通過(guò)查詢資料后,有人說(shuō)要把模型文件放在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)了錯(cuò)誤,原因是打包后的文件路徑出現(xiàn)了變化,但是設(shè)置的路徑不會(huì)隨著打包變化,導(dǎo)致打包和本地運(yùn)行時(shí)需要不同的路徑;
因?yàn)槲覀兊捻?xiàng)目部署后是通過(guò)ip訪問(wèn)的,所以我的做法是判斷當(dāng)前的url,區(qū)分是本地運(yùn)行還是線上運(yùn)行;也可以通過(guò)webpack配置根據(jù)不同的命令使用不同的路徑;

let resourcesUrl = ''; // 通過(guò)判斷賦予不同的路徑

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場(chǎng)景渲染后沒(méi)有進(jìn)行銷毀

在項(xiàng)目中發(fā)現(xiàn)頻繁的在3D場(chǎng)景的頁(yè)面和其他頁(yè)面切換會(huì)導(dǎo)致頁(yè)面卡頓,是由于在切換路由時(shí)沒(méi)有清除相關(guān)模型導(dǎo)致大量占用了內(nèi)存;
所以需要在離開(kāi)3D場(chǎng)景銷毀模型,并且釋放相關(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)目遇到的問(wèn)題的文章就介紹到這了,更多相關(guān)three項(xiàng)目遷移至vue內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 使用Vue?Query實(shí)現(xiàn)高級(jí)數(shù)據(jù)獲取的示例詳解

    使用Vue?Query實(shí)現(xiàn)高級(jí)數(shù)據(jù)獲取的示例詳解

    構(gòu)建現(xiàn)代大規(guī)模應(yīng)用程序最具挑戰(zhàn)性的方面之一是數(shù)據(jù)獲取,這也是?Vue?Query?庫(kù)的用途所在,下面就跟隨小編一起學(xué)習(xí)一下如何利用Vue?Query實(shí)現(xiàn)高級(jí)數(shù)據(jù)獲取吧
    2023-08-08
  • vue+iview寫(xiě)個(gè)彈框的示例代碼

    vue+iview寫(xiě)個(gè)彈框的示例代碼

    本篇文章主要介紹了vue+iview寫(xiě)個(gè)彈框的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-12-12
  • Vue項(xiàng)目判斷開(kāi)發(fā)、測(cè)試、正式環(huán)境過(guò)程

    Vue項(xiàng)目判斷開(kāi)發(fā)、測(cè)試、正式環(huán)境過(guò)程

    這篇文章主要介紹了Vue項(xiàng)目判斷開(kāi)發(fā)、測(cè)試、正式環(huán)境過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue-router 起步步驟詳解

    vue-router 起步步驟詳解

    這篇文章主要介紹了vue-router 起步步驟詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-03-03
  • 加速vue組件渲染之性能優(yōu)化

    加速vue組件渲染之性能優(yōu)化

    這篇文章主要介紹了加速vue組件渲染之性能優(yōu)化,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • vue中的插槽詳解

    vue中的插槽詳解

    這篇文章主要介紹了Vue中的插槽,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-10-10
  • Vue.js動(dòng)態(tài)組件解析

    Vue.js動(dòng)態(tài)組件解析

    這篇文章主要為大家詳細(xì)介紹了Vue.js動(dòng)態(tài)組件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • Vue3實(shí)現(xiàn)provide/inject的示例詳解

    Vue3實(shí)現(xiàn)provide/inject的示例詳解

    Vue3 的 Provide / Inject 的實(shí)現(xiàn)原理其實(shí)就是巧妙利用了原型和原型鏈來(lái)實(shí)現(xiàn)的。本文將通過(guò)示例為大家介紹下provide/inject的具體實(shí)現(xiàn),需要的可以參考一下
    2022-11-11
  • vue遞歸實(shí)現(xiàn)樹(shù)形組件

    vue遞歸實(shí)現(xiàn)樹(shù)形組件

    這篇文章主要為大家詳細(xì)介紹了vue遞歸實(shí)現(xiàn)樹(shù)形組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • Vue中ElementUI分頁(yè)組件Pagination的使用方法

    Vue中ElementUI分頁(yè)組件Pagination的使用方法

    這篇文章主要為大家詳細(xì)介紹了Vue中ElementUI分頁(yè)組件Pagination的使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-05-05

最新評(píng)論