three.js 性能優化之gltf轉化與壓縮

項目背景

在vue中利用three.js,搭建3D智慧配電房監測系統，其中發現設計師給的模型太大了最大的一個模型有6MB之大，以至於后面模型加載的時候頁面速度變得超級的慢，所以需要將模型進行優化，將其變小；

模型優化

設計師給我的模型類型是obj的，還帶有素材mtl。通過百度發現瀏覽器對gltf格式的模型支持是比較友好的。所以現將ob模型轉化成gltf格式的。

安裝插件

首先安裝obj2gltf；該插件的作用是把obj格式轉為gltf格式。下面開始安裝，建議全局安裝，這樣下次在其他文件夾或者目錄下都可以用命令行來實現格式轉換。

cnpm i -g obj2gltf

接着安裝gltf-pipeline；該插件的作用是把現有的gltf格式模型進行壓縮，跟圖片壓縮一樣。減少大小，更快的加載。

cnpm i -g gltf-pipeline

執行命令

格式轉化

首先對obj進行模型轉化，將其變成gltf模型；輸入命令：（參數：-i 是輸入路徑，-o 是輸出路徑，其他參數可參考插件官方文檔，根據自己的需要添加即可,輸入輸出的路徑一定要正確，不然會報找不到directory之類的錯誤);注意：在這個過程中，obj和mtl名字最好對應，而且最好放在統一目錄下面，要不然命令會報錯，說找不到xx.mtl文件。

obj2gltf  -i ./static/models/obj/11-6.obj -o ./static/models/new/11-6.gltf -u

將文件轉換好格式，你會得到對應的gltf文件。

 

模型壓縮

執行下面命令行，通過DRACO壓縮算法對gltf模型進行壓縮；（-d 就是draco算法）

gltf-pipeline  -i ./static/models/new/11-6.gltf -o ./static/models/new/11-6_mini.gltf -d

引入外部gltf模型

調用解析器

因為three.js中基本上包含了所有three的資源，所以就直接引用gltf和壓縮算法的解析器；

	import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader'
	import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader'

具體代碼

				//加載模型
        let loader = new GLTFLoader();
        let dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath("/static/models/draco/");//加載draco算法，這樣才能解析壓縮后的gltf模型格式，具體的draco算法文件，直接可以three依賴文件中找到，賦值到static目錄下面就好了
        loader.setDRACOLoader(dracoLoader);
        loader.load("/static/models/new/1p_mini.gltf",//引入壓縮的gltf模型
          function(obj) { // 這個obj就是解析后的模型，可添加到scene內。
            obj.scene.position.set(-27.5, 0, -2);//設置物體的位置
            obj.scene.scale.set(0.00065, 0.00065, 0.00065);//設置物體的大小
            that.scene.add(obj.scene);// 在場景中添加物體
          },
          // called while loading is progressing
          function(xhr) {
            console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
          },
          // called when loading has errors
          function(error) {
            console.log("An error happened");
          }
        );

引入draco算法文件

遇到的問題：

1. Chrome 加載gltf模型時控制台報錯：DevTools was disconnected from the page以及RangeError: WebAssembly.Memory(): could not allocate memory；解決方案：將瀏覽器升級到最新版本；
2. 將obj模型轉化gltf過程中，如果報錯說沒有找到xx.mtl文件時；解決方案：確定mtl和obj文件是否相同，其次mtl和obj文件放在同一錄下面。
3. 如果需要轉化的模型太多或者需要壓縮的模型太多了，可以使用Windows bat腳本批處理。新建一個txt文本，輸入下圖代碼，將后綴改成.bat將文件放到項目根目錄文件,雙擊就可以執行11條壓縮命令了。

@echo offt,
 for  %%I in (1,2,3,4,5,6,7,8,9,10,11) do call gltf-pipeline -i ./static/models/new/3-%%I.gltf -o ./static/models/new/3-%%I_mini.gltf -d
pause

參考資料

1. Three.js 開發之加載外部GLTF模型和壓縮（一）