家喻户晓 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>
更多演示
3D 演示(因为网络问题可能速度会比较慢)
当然你也能够 clone vue-3d-loader 我的项目 npm i && npm run dev
在本地查看演示