PLY三维模型在vue中的展示

ply三维模型的展示使用gsplat插件该插件需要在vue3中使用引入插件import * as SPLAT from gsplat;一、创建htmldiv classcontainer_model canvas idcanvasId classmodel_box refcanvasRef/canvas div classprogress_view v-ifisShowProgress el-progress :percentagecurrentPercentage :show-textfalse stylewidth:100%; striped striped-flow :stroke-width15 / /div /div因为我这里的ply模型的size比较大就添加了一个进度条二、初始化属性const canvasRef ref(); const animationId ref(); const isShowProgress ref(false); const currentPercentage ref(0); let scene: SPLAT.Scene, renderer: SPLAT.WebGLRenderer, camera: SPLAT.Camera, controls: SPLAT.OrbitControls;三、添加模型初始化方法/** * 加载ply高斯模型 * param url */ const initModel async (url: any) { if (!url) return; try { isShowProgress.value true;//展示进度条 scene new SPLAT.Scene(); camera new SPLAT.Camera(); renderer new SPLAT.WebGLRenderer(canvasRef.value); controls new SPLAT.OrbitControls(camera, renderer.canvas); const splatModel await SPLAT.PLYLoader.LoadAsync(url, scene, (progress) { currentPercentage.value Math.round(progress * 1000) / 10; if (currentPercentage.value 100) { isShowProgress.value false; } }); //这里根据自己的模型进行旋转、缩放、平移把模型展示在可视范围中 //旋转 const euler new SPLAT.Vector3(Math.PI / 2, -Math.PI / 5, 0); const quaternionz SPLAT.Quaternion.FromEuler(euler); splatModel.data.rotate(quaternionz); //缩放 const scale new SPLAT.Vector3(0.2, 0.2, 0.2); splatModel.data.scale(scale); //平移 const translate new SPLAT.Vector3(0, 0, -3); splatModel.data.translate(translate); resizeChange(); window.addEventListener(resize, resizeChange); animate(); } catch (err) { isShowProgress.value false; console.log(加载模型报错 err); } }; const resizeChange () { renderer.setSize(canvasRef.value.clientWidth, canvasRef.value.clientHeight); }; const animate () { animationId.value requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); }; //页面销毁时销毁模型 const removeModel () { if (animationId.value) { cancelAnimationFrame(animationId.value); } controls controls.dispose(); renderer renderer.dispose(); if (scene) { let models scene.objects || []; models.forEach((item: any) { scene.removeObject(item); }); } window.removeEventListener(resize, resizeChange); };