Potree在web端显示大型点云模型文件

一、克隆项目代码(准备好上网工具,得先有node.js npm 环境)

复制代码
git clone https://github.com/potree/potree.git

二、依赖安装(换淘宝镜像能快一些)

复制代码
cd potree
npm install

三、运行

复制代码
npm start

四、使用样例

打开浏览器,输入http://localhost:1234/,即可看到 Potree 的界面。

打开任意examples下的html查看模型

五、换成自己的点云模型

将地址中的cloud.js换成自己模型的地址。

复制代码
// Load and add point cloud to scene
		Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/helimap/360/MLS_drive1/cloud.js", "MLS", e => {
			let scene = viewer.scene;
			let pointcloud = e.pointcloud;
			
			let material = pointcloud.material;
			material.size = 0.5;
			material.minSize = 2.0;
			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
			material.shape = Potree.PointShape.SQUARE;
			material.activeAttributeName = "rgba";
			
			scene.addPointCloud(pointcloud);

			viewer.scene.view.setView(
				[2652381.103, 1249049.447, 411.636],
				[2652364.407, 1249077.205, 399.696],
			);

			run();
		});

		async function run(){

			proj4.defs("WGS84", "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs");
			proj4.defs("pointcloud", viewer.getProjection());
			let transform = proj4("WGS84", "pointcloud");

			let params = {
				transform: transform
			};

Potree加载的点云格式为OCTree格式的数据结构,无法直接加载格式为LAS,LCD,PLY等格式的点云文件,所以我们需要通过PotreeConverter来将普通的点云格式文件转换为OCtree格式的点云文件。去github下载PotreeConverter对模型文件进行格式转换,只能转换las格式的文件。

复制代码
https://github.com/potree/PotreeConverter
1.7版本可用

win系统下载目录执行如下样例指令

复制代码
PotreeConverter.exe D:\\test.las -o D:\\output

linux系统,可加上版本新版本不好用

复制代码
git clone https://github.com/potree/PotreeConverter.git
cd PotreeConverter
mkdir build && cd build
cmake ..
make

完成以后执行
PotreeConverter /home/yr/test.las -o /home/yr/output
即可得到模型

转换后的文件结构

换成自己的点云后的效果图

相关推荐
wefly201735 分钟前
免安装!m3u8live.cn在线 M3U8 播放器,小白也能快速上手
java·开发语言·python·json·php·m3u8·m3u8在线转换
爱学习的程序媛1 小时前
【Web前端】JavaScript设计模式全解析
前端·javascript·设计模式·web
薛先生_0991 小时前
js学习语法第一天
开发语言·javascript·学习
苦瓜小生2 小时前
【前端】|【js手撕】经典高频面试题:手写实现function.call、apply、bind
java·前端·javascript
踩着两条虫2 小时前
AI驱动的Vue3应用开发平台深入探究(十):物料系统之内置组件库
android·前端·vue.js·人工智能·低代码·系统架构·rxjava
和沐阳学逆向2 小时前
我现在怎么用 CC Switch 管中转站,顺手拿 Codex 举个例子
开发语言·javascript·ecmascript
阿酷tony2 小时前
Nano Banna 提示词:创意超逼真的3D商业风格产品图
人工智能·3d·gemini·图片生成
慧一居士2 小时前
nuxt3 项目和nuxt4 项目区别和对比
前端·vue.js
智算菩萨4 小时前
【OpenGL】10 完整游戏开发实战:基于OpenGL的2D/3D游戏框架、物理引擎集成与AI辅助编程指南
人工智能·python·游戏·3d·矩阵·pygame·opengl
kgduu4 小时前
js之客户端存储
javascript·数据库·oracle