当前位置：首页 > news >正文

PLY文件格式讲解与可视化展现方式（基于Viser库）

news 2025/10/18 12:16:07

PLY文件格式介绍

.ply（Polygon File Format / Stanford Triangle Format）是一种专门为 3D点云与网格 设计的文件格式，广泛用于像 COLMAP、Open3D、Meshlab、Blender 等软件中。

如果看到文件头以下的内容为乱码，则说明是用的二进制格式储存的

还原成ascii编码：


o3d.io.write_point_cloud("/data/xxx/projects/colmap/mycolmap_project/dense/fused_ascii.ply", pcd, write_ascii=True)

实例展示：

注意：颜色被归一化到 [0, 1] 范围。还原方法：

import numpy as np
colors_256 = (np.asarray(pcd.colors) * 255).astype(np.uint8)

PLY文件可视化：

可视化方式1:直接下载到mac用meshlab打开

可视化方式2: windows用户应该可以用可视化代码基于mobaXterm的方式打开

可视化方式3: 使用html打开

使用下面的main.js文件：


import * as THREE from 'https://esm.sh/three@0.158.0';
import { OrbitControls } from 'https://esm.sh/three@0.158.0/examples/jsm/controls/OrbitControls';
// import { PLYLoader } from 'https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/loaders/PLYLoader.js';
import { PLYLoader } from 'https://esm.sh/three@0.158.0/examples/jsm/loaders/PLYLoader';// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x222222);// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.z = 2;// 渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 控制器
const controls = new OrbitControls(camera, renderer.domElement);// 加载 PLY 文件（注意路径相对于 index.html）
const loader = new PLYLoader();
loader.load('./mycolmap_project/dense/fused.ply', function (geometry) {geometry.computeVertexNormals(); // 可选：计算法线const material = new THREE.PointsMaterial({ color: 0x00ff00, size: 0.005 });const points = new THREE.Points(geometry, material);scene.add(points);
}, 
// 加载进度
(xhr) => {console.log((xhr.loaded / xhr.total * 100).toFixed(2) + '% loaded');
},
// 加载出错
(error) => {console.error('Error loading PLY file:', error);
});// 动画循环
function animate() {requestAnimationFrame(animate);controls.update();renderer.render(scene, camera);
}
animate();// 自适应窗口大小
window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);
});

用下面的demo.html文件进行可视化：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>COLMAP PLY Point Cloud Viewer</title><style>body { margin: 0; }canvas { display: block; }</style>
</head>
<body><!-- 加载我们单独写的 main.js --><script type="module" src="./main.js"></script>
</body>
</html>

但是效果不是很好，而且很难调整角度

可视化方式3:使用viser库

https://viser.studio/main/examples/demos/colmap_visualizer/https://viser.studio/main/examples/demos/colmap_visualizer/

代码：核心的部分就是提取PLY文件的xyz和rgb的部分，然后直接接到Viser的接口进行可视化即可，同时Viser还支持COLMAP的格式，参见其文档：

import numpy as np
import open3d as o3d
import viserdef main():server = viser.ViserServer()# add PLY point cloudpcd = o3d.io.read_point_cloud("/data/xxx/projects/colmap/mycolmap_project/dense/fused.ply")points = np.asarray(pcd.points)colors = np.asarray(pcd.colors)print(points.shape)print(colors.shape)server.scene.add_point_cloud(name="/fused_cloud",points=points,colors=colors,point_size=0.03,)print("Point cloud visualization loaded!")print("- Spiral point cloud with height-based colors")print("- Random noise point cloud with random colors")print("Visit: http://localhost:8080")while True:passif __name__ == "__main__":main()

可视化效果：

这个库很好用，而且很好调整