使用vue-3d-loader同时加载多个3D模型

众所周知，ThreeJS是一个网页加载3D模型的JS库。广泛应用于物联网和一些游戏行业。它很强大，因为它可以加载大多数类型的3D模型，例如：.dae/.fbx/.gltf(.glb)/.obj/.ply/.stl/.json模型。但是在工作中经常会遇到独立模型比较大，建模师会把一个大模型拆分成多个小模型，所以需要三个JS来加载多个模型；另一种情况是需要加载多个模型。不同种类的模型。我将以上两种情况分为以下两种需求：加载多个3D模型加载多个不同种类的3D模型由于加载多个3D模型，大部分人会想到直接使用for循环加载模型，但实际应用中，当同时加载的.fbx模型大小超过60M左右时，浏览器会变得很卡。因此，我又将其分为两种加载方式：并行加载（即for循环）一个一个加载为了面对上面的功能需求，所以我开发了一个可以满足上面需求的vue组件，vue-3d-loader(github.com)功能支持列表加载单个3D模型同时加载多个3D模型模型内置动画加载多个模型、图片、材质、灯光在项目中安装vue-3d-loader注意：vue2版本使用版本1.x.x，vue3版本使用2.0.0+版本npmivue-3d-loader@2.0.0-S使用方法全局使用，在入口文件全局安装，代码如下：/*vue2*/importvue3dLoaderfrom"vue-3d-loader";Vue.use(vue3dLoader)/*vue3*/importvue3dLoaderfrom"vue-3d-loader";createApp(App).use(vue3dLoader).mount('#app')是没有全局使用，Vue文件中使用了如下代码：import{vue3dLoader}from"vue-3d-loader";//注意vue3dLoader使用标签filePath必填，支持字符串和数组传入支持的事件eventdescriptionmousedown(event,intersects)mousepress,intersect:当前相交的最近物体mousemove(event,intersects)鼠标移动,intersect:当前相交的最近物体mouseup(event,intersects)鼠标release,intersect:当前相交的最近物体click(event,intersects)click,intersect:当前相交最近的对象加载加载模型事件process(event,fileIndex)加载进度,fileIndex:当前加载模型的索引error(event)错误事件Loadingmultiplemodelsinasamescene材质和贴图加载</vue3dLoader>Moredemos3Ddemo（网络问题速度可能会慢）当然你也可以clonevue-3d-loader项目npmi&&npmrundev在本地查看demo