threejs显示本地硬盘上的ply文件,通过webapi

由于ply文件是第三方提供的,threejs无法用绝路路径的方式显示ply

所以想通过webapi把ply通过url地址的方式给threejs 

1.webapi部分

        /// <summary>
        /// 获取PLY文件
        /// </summary>
        /// <returns></returns>
        [HttpPost(Name = "GetPly")]
        public async Task<IActionResult> GetPly(GlueFileModel gfm)
        { 

            string fileExt = Path.GetExtension(gfm.PlyFile); //绝对路径的ply文件 例如"D:\test\test.ply"
            //获取文件的ContentType
            var provider = new FileExtensionContentTypeProvider();
            //var memi = provider.Mappings[fileExt];
            var memi = "application/octet-stream";
            var fileBytes = System.IO.File.ReadAllBytes(gpm.PlyFile);
            string fileName = Path.GetFileName(gpm.PlyFile);
            return File(fileBytes, memi, fileName);
        }

2.Vue部分取得ply文件

		let pa = { No: "", PlyFile: "D:/test/test.ply" }
		//let pa = { No: "", PlyFile: GluePlyResultFile.value }
		let plyUrl = ""
		await axios.post(global_const.WEBAPI + `Python/GetPly`, pa, { responseType: 'blob' })
			.then(function (response) {
				console.log(response);
				plyUrl = window.URL.createObjectURL(new Blob([response.data]));

				return plyUrl//response.data;
			})
			.catch(function (error) {
				//ElMessage.error(cmd + '命令执行异常!' + error)
				console.log(error);
			});

3.threejs中load ply方法 

		//let s = '../src/assets/ply/Result.ply'
		let s = plyUrl;
		loader.load(s,
			function (geometry) {
				console.log('loader.load ');
				console.log(geometry);
				geometry.computeVertexNormals();

				const pos = geometry.attributes.position;
				const count =10;// pos.count;
				const colorsArr = [];
				for (let i = 0; i < count; i++) {
					const percent = i / count; //点索引值相对所有点数量的百分比
					//根据顶点位置顺序大小设置颜色渐变
					// 红色分量从0到1变化,蓝色分量从1到0变化
					colorsArr.push(percent, 0, 1 - percent); //蓝色到红色渐变色
				}
				//类型数组创建顶点颜色color数据
				//const colors = new Float32Array(colorsArr);
				// 设置几何体attributes属性的颜色color属性
				//geometry.attributes.color = new THREE.BufferAttribute(colors, 3);

				// color vertices based on vertex positions
				const colors = geometry.getAttribute('position').array.slice();
				console.log('colors',colors)
				for (let i = 0, l = colors.length; i < l; i++) {

					if (colors[i] > 0) colors[i] = 0.5;
					else colors[i] = 0;

				}

				geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3, false));


				const material2 = new THREE.PointsMaterial({ size: 0.01, vertexColors: true });//THREE.VertexColors
				//const material.vertexColors = true;
				let mesh2 = new THREE.Points(geometry, material2);
				mesh2.position.x = 1;//0;
				mesh2.position.y = 2;//-1;
				mesh2.position.z = 3;//0;
				mesh2.scale.multiplyScalar(0.4);
				mesh2.castShadow = true;
				mesh2.receiveShadow = true;
				scene.add(mesh2);

				scene.background = new THREE.Color(0x52645b);
				console.log('loader.load OK');

			},
			function (xhr) {
				//console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
			},
			function (err) {
				console.error(err);
			}
		);

### 加载并显示PLY模型文件 #### 使用 `THREE.PLYLoader` 实现基本功能 为了在 Three.js 中加载 PLY 文件,可以利用官方提供的 `THREE.PLYLoader` 工具[^1]。此工具专门用于解析 PLY 格式的几何体数据,并将其转换成适合 Three.js 渲染的形式。 ```javascript import * as THREE from 'three'; import { PLYLoader } from 'three/examples/jsm/loaders/PLYLoader'; // 创建场景对象Scene const scene = new THREE.Scene(); // 初始化相机参数 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 设置渲染器属性 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 将WebGL渲染的Canvas内容添加到body // 定义加载器实例 const loader = new PLYLoader().load( './models/myModel.ply', // 模型路径需放在public目录下才能正常访问[^3] function (geometry) { const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); animate(); // 开始动画循环 function animate() { requestAnimationFrame(animate); // 更新逻辑 renderer.render(scene, camera); } }, undefined, function (error) { console.error(error); } ); ``` 上述代码展示了如何创建一个简单的 Three.js 应用程序来加载和展示 PLY 文件中的三维模型。注意,这里假设所使用的 `.ply` 文件位于项目的 `/public/models/` 路径下。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值