PLY三维模型在vue中的展示

ply三维模型的展示，使用gsplat插件，该插件需要在vue3中使用：

引入插件

import * as SPLAT from 'gsplat';

一、创建html

html 复制代码

<div class="container_model">
		<canvas id="canvasId" class="model_box" ref="canvasRef"></canvas>
		<div class="progress_view" v-if="isShowProgress">
			<el-progress
				:percentage="currentPercentage"
				:show-text="false"
				style="width:100%;"
				striped
				striped-flow
				:stroke-width="15"
			/>
		</div>
	</div>

因为我这里的ply模型的size比较大，就添加了一个进度条

二、初始化属性

html 复制代码

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;

三、添加模型初始化方法

html 复制代码

/**
 * 加载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);
};