日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

  • <label id="icpwa"></label>
  • <ruby id="icpwa"></ruby>
      <s id="icpwa"></s>
      <button id="icpwa"></button><meter id="icpwa"></meter>
      
  
      
   
      
    學無先后，達者為師
    
   
      
  
       
  
      
   
       
     
    
    
     
      
            
      
     
      
           
    
      
   
       
  
       
  
       
    
    
    
	
  
       
  
       

      
 
  



	


      
  
      
    
       網站首頁 
      Vue  正文
      
    
      
      
      淺談將three項目遷移至vue項目遇到的問題_vue.js
      
      
                 作者：Brc ? 
                 更新時間：
          2022-04-03  
            Vue
          
          
      
    
      
 
    
    
      
            
      
      

      由于我的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();
      
    
      
        
      原文鏈接：https://juejin.cn/post/7054913673818537991
      
        

    
  
      

      




 
   
       
    
       
     
      
      欄目分類
     
      
     
       
    


     
       
    
      
    
      
    
    
    
       
     
      
      最近更新