利用vue-3d-loader同時載入多個3D模型

眾所周知ThreeJS是web端用於載入3D模型的JS庫，廣泛應用於物聯網及部分遊戲行業中，其強大就強大在可以載入大多數型別的3D模型，如：.dae/.fbx/.gltf(.glb)/.obj/.ply/.stl/.json的模型。

但是在工作中，經常會遇到獨立的模型會比較大，建模師會將一個大型的模型拆分成多個小模型，因此就需要threeJS載入多個模型；另一種情況是需要載入多種不同種類的模型。

我將以上兩種情況區分為以下兩個需求：

載入多個3D模型
載入多個不同種類的3D模型

由於載入多個3D模型，大多數人會想到直接使用for迴圈對模型進行載入，但是實際應用中，當同時載入.fbx模型大小超過60M左右，瀏覽器就會變得非常卡頓。由此我將其再次分割為兩種載入方式：

並行載入（即for迴圈）
按順序一一載入

面對以上的功能需求，因此我開發了一款能夠滿足以上需求的vue元件，vue-3d-loader(github.com)

功能支援列表

載入單個3D模型
同時載入多個3D模型
同時載入多個不同型別3D模型
設定場景寬高
設定材質及紋理
互動控制
滑鼠事件
燈光
相機位置及旋轉
新增標註點

演示

自動播放模型內建動畫

自動播放3D模型內建動畫

載入多個模型

載入多個3D模型

圖片材質

圖片材質

燈光

在你的專案中安裝vue-3d-loader

注意：vue2版本使用1.x.x版本，vue3版本使用2.0.0+版本

npm i vue-3d-loader@2.0.0 -S

使用方法

全域性使用，在入口檔案中全域性安裝，程式碼如下：

/* vue2 */
import vue3dLoader from "vue-3d-loader";
Vue.use(vue3dLoader)

/* vue3 */
import vue3dLoader from "vue-3d-loader";
createApp(App).use(vue3dLoader).mount('#app')

非全域性使用，在Vue檔案中使用如下程式碼:

import { vue3dLoader } from "vue-3d-loader"; // 注意 vue3dLoader 寫在 {...} 內

在元件中使用標籤<vue3dLoader></vue3dLoader>

<vue3dLoader
  :height="200"
  :showFps="true"
  :filePath="['/fbx/1.fbx', '/obj/2.obj', '/gltf/3.gltf']"
  :mtlPath="[null, '/obj/2.mtl', null]"
  :backgroundColor="0xff00ff"
></vue3dLoader>

filePath為必填，並支援字串與陣列兩種方式傳入

支援的事件

event	description
mousedown(event, intersects)	滑鼠按下, intersect:當前相交最近的物體
mousemove(event, intersects)	滑鼠移動, intersect:當前相交最近的物體
mouseup(event, intersects)	滑鼠放開, intersect:當前相交最近的物體
click(event, intersects)	點選, intersect:當前相交最近的物體
load	載入模型事件
process(event, fileIndex)	載入進度, fileIndex:當前載入模型的索引
error(event)	錯誤事件

同一個場景中載入多個模型

<!-- 可同時載入多個不同種類的模型 -->
<template>
  <vue3dLoader
    :filePath="filePath"
    :scale="{ x: 0.4, y: 0.4, z: 0.4 }"
    :cameraPosition="{ x: 100, y: 200, z: 30 }"
  ></vue3dLoader>
</template>
<script>
export default {
  data() {
    return {
      filePath: [
        "/models/fbx/Samba Dancing.fbx",
        "models/collada/pump/pump.dae",
      ],
    };
  },
};
</script>

材質及紋理載入

<!-- obj載入mtl材質 -->
<vue3dLoader filePath="/obj/1.obj" mtlPath="/obj/1.mtl" ></vue3dLoader>
<!-- fbx圖片紋理載入 -->
<vue3dLoader filePath="/fbx/1.fbx" textureImage="/fbx/1.png" ></vue3dLoader>