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