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

深夜徘徊 發表於 2022-07-15
Vue

眾所周知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模型
  • 設定場景寬高
  • 設定材質及紋理
  • 互動控制
  • 滑鼠事件
  • 燈光
  • 相機位置及旋轉
  • 新增標註點

演示

  1. 自動播放模型內建動畫

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

  1. 載入多個模型

載入多個3D模型

  1. 圖片材質

圖片材質

  1. 燈光

燈光

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

注意:vue2版本使用1.x.x版本,vue3版本使用2.0.0+版本

npm i [email protected] -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為必填,並支援字串與陣列兩種方式傳入

支援的事件

eventdescription
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>

更多演示

3D演示(由於網路問題可能速度會比較慢)

當然你也可以clone vue-3d-loader 專案 npm i && npm run dev在本地檢視演示