由于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"//获取文件的ContentTypevar 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 positionsconst 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);});