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