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);
			}
		);

  • 8
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值