关于three.js:利用vue3dloader同时加载多个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模型
设置场景宽高
设置材质及纹理
交互管制
鼠标事件
灯光
相机地位及旋转
增加标注点

演示

自动播放模型内置动画

加载多个模型

图片材质

灯光

在你的我的项目中装置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>