Potree开源初探

最新推荐文章于 2024-07-31 11:46:03 发布
原创 最新推荐文章于 2024-07-31 11:46:03 发布 · 8.4k 阅读 · 20 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了基于Web的三维模型展示工具Potree，它是一个基于WebGL的点云数据可视化解决方案，优化了数据传输和渲染。文章详细阐述了Potree与Three.js的区别，转换过程，软件环境，浏览器及操作支持，以及基于Potree的Web展示效果和解决方案。Potree在速度上表现出色，但在显示质量上由于基于点云模型稍有不足。

Potree开源初探

徐景周

一、      简介

    基于Web端的三维模型展示，这里仅介绍Three.js和Potree。

    Three.js 是一款基于WebGL的运行在浏览器中的 3D 开源引擎，用它创建各种三维场景。它类似于Meshlab开源中的VCGLib库，后者是基于OpenGL进行封装的3D开源库，本质是相同的。所以，基于three.js会比较灵活，模型显示不失真。但对初学者来说，学习难度较大。另外，它没有对模型网格存取与显示做什么优化，在模型文件较大时，在浏览器打开时会等待较长时间。

    Potree是一种基于WebGL的点云数据可视化解决方案，包含点云数据转化，以及进行可视化的源码。该解决方案的主要优势在于对点云数据进行了多尺度的管理，在数据传输和可视化上都做了优化。它是一套开源的系统，基于Three.js，由奥地利维也纳理工大学的Harvest4D项目贡献。

    实际应用中，业务三维模型往往比较大(100M以上)，考虑到网络带宽等诸多原素，为了在Web端能快速的展示与操作三维模型。如果选择Three.js，工作量会比较大；选择Potree会相对比较省事，因为它已经在文件分离下载与快速渲染方面已行了很多优化。Potree的主要缺点是基于点云格式显示，存在部分失真情况。所以，下面主要将针对Potree进行重点说明，Three.js内容请大家参考下面网址。

 

二、      软件环境

2.1   Potree

https://github.com/potree/potree<

最低0.47元/天 解锁文章

200万优质内容无限畅学
Johnny-Xu
关注
一文带你了解三大开源关系型数据库：SQLite、MySQL和PostgreSQL
dvlinker的技术专栏
10-08 5万+
一文带你了解三大开源关系型数据库：SQLite、MySQL和PostgreSQL。
Potree 中文使用手册（非官方，个人通过操作和查阅整理的）
qq_41471097的博客
05-22 7551
使用 "Angle measurement"，您可以选择点云中的三个位置点，这些点可以是点云上的任意点。以形成封闭的多边形区域。在 Potree 中，"Appearance"（外观）是一个功能强大的工具，它允许对点云的外观进行各种调整和定制，以满足您的可视化需求。1.4.1.2High Quality（高质量）：在高质量级别下，点云的渲染会使用一种更精细的插值算法，以提供更高的细节和平滑度。当点云的点数超过点预算时，Potree 会自动根据一定的策略进行点云的简化和采样，以确保性能和流畅的交互体验。
基于 Potree.js 的 3D 点云展示
ScriptEcho的博客
06-03 916
通过使用 Potree.js 库，我们成功地实现了基于 Web 浏览器的 3D 点云展示功能。熟悉了 Potree.js 库的 API 和功能，掌握了点云加载、可视化和交互式操作的实现方法。深入了解了点云数据处理和优化技术，提高了点云展示的效率和性能。掌握了 Vue.js 框架中加载第三方库和管理生命周期的方法。拓展点云数据的来源，支持更多格式和协议的加载。优化点云的 LOD 管理，实现无缝的点云切换和渲染。集成更多交互式工具，如切面、剖面和体积测量。
颜色分类leetcode-potree-core:Potree点云查看器库核心组件，可更轻松地集成到three.js项目中
07-06
颜色分类leetcode 波特里核心 本项目基于 Potree V1.6。 Potree 是由 Markus Schütz 创建的基于 Web 的 pouint 云可视化项目。 该项目仅包含 potree 项目的主要部分，更易于用作独立库（我仅从原始存储库中改编了代码）。 支持来自 LAS、LAZ、二进制文件和 Grehound 服务器的点云。 点云自动更新，使用视锥剔除避免不必要的更新（多个点云的更新性能更好）。 支持对数深度缓冲区（只需在threejs渲染器上启用它），对于大规模可视化很有用。 如何使用 从构建文件夹下载自定义 potree 构建或使用 NPM 将其添加到您的项目中。 将它与项目中的 worker 文件夹一起包含（可以在源文件夹中找到）。 从github存储库下载threejs。 build 是一个 ES 模块，可以导入到其他项目中，它假设存在 Threejs 依赖项的三个命名空间。 演示 现场演示 包含以不同格式多次存储的相同模型。 双击模型以对场景进行光线投射并创建标记点。 例子 下面是一个功能齐全的示例，说明如何使用此包装器将 potree 点云加载到 THR
Potree点云可视化卡片开发指南
ScriptEcho的博客
07-31 736
Potree点云可视化卡片是一款基于Potree库开发的Vue组件，它允许用户在Web应用程序中轻松嵌入和交互式可视化大规模点云数据。该卡片特别适用于需要在Web环境中展示和分析三维空间数据的应用场景，例如建筑、测绘、地理信息系统（GIS）和虚拟现实（VR）。加载和显示点云数据：该卡片支持加载多种格式的点云数据，包括LAS、LAZ和PLY。交互式点云操作：用户可以通过平移、旋转和缩放手势与点云交互，以获得不同的视角和细节。
potree的API说明文档
06-16 2198
Potree .version major: 1, minor: 5, suffix: "RC" .pointBudget 1*1000*1000 .Webgl shaders: {}, vaos: {}, vbos: {} .scriptPath null .startQuery(name, gl) @return:query ...
Potree点云手册
huhuan123456的博客
05-24 1939
如果你还没有点云并希望获取点云，我建议使用Geotiles获取来自荷兰的数据，使用LiDAR HD获取来自法国的数据，或者使用3DE程序获取来自美国的数据。这些来源提供了可用于你的项目的有价值的点云数据。但是，如果你已经拥有自己的数据，那就更好了，因为它允许你使用根据你的需求定制的熟悉的数据集。你还可以仅在浏览器中操作一些Potree 示例（Entwine 和 Potree）。在本演示中，我在法国蒙彼利埃下载了 4 个 LiDAR HD 图块，然后将它们导入到 Potree Desktop 中。
3D-基于Cesium+Potree实现在线点云查看+处理工具-优质项目
10-15
Cesium和Potree作为两个强大的开源工具，它们在3D点云数据的在线查看和处理方面有着各自的优势和特点。 Cesium是一个开源的JavaScript库，可以用来构建三维地球和二维地图的应用程序。它支持多种数据格式，比如B3DM...
初探基于云计算的OpenStack开源技术 (1).pdf
07-17
初探基于云计算的OpenStack开源技术 (1).pdf
基于Java的开源GIS编程教学初探.pdf
06-27
本文所探讨的“基于Java的开源GIS编程教学初探”正是为了满足这一教学需求，通过实践教学的方式，培养学生利用Java语言进行开源GIS编程的综合能力。 Java语言作为一门成熟稳定的编程语言，在开源软件开发领域拥有...
potree-毕业论文翻译
06-01
介绍了Potree，一种基于网络的大点云的渲染器。它允许用户在标准网络浏览器中实时查看来自诸如LIDAR或摄影测量等来源的数十亿个点的数据集。
potreeSelfDriving:Potree是用于大型点云的免费开源基于WebGL的点云渲染器。 它基于TU Wien Scanopy项目，并且是Harvest4D项目的一部分
05-11
自述文件 关于 Potree是用于大型点云的免费开源基于WebGL的点云渲染器。 它基于，并且是一部分。 最新信息和正在进行的工作通常可以在 联系人： （ ） 参考： 建造 确保您已安装 安装package.json中指定的所有依赖项，然后安装gulp构建工具： cd <potree> npm install --save npm install -g gulp npm install -g rollup 使用gulp watch命令来 创建./build/potree 监视源代码的更改，并根据更改自动创建新版本 在localhost：1234上启动Web服务器。 转到来测试示例。 gulp watch 资料下载 PotreeConverter源代码和Win64二进制文件 展示柜 看一下potree展示厅，了解一些现场示例。 兼容性 浏览器 作业系
three-loader:基于Potree核心部分的ThreeJS点云加载器
05-14
自述文件 该项目基于的核心/加载部分，转换为Typescript，可直接在基于ThreeJS的第三方应用程序中使用。 该项目仅专注于将点云加载到ThreeJS应用程序中，而不尝试提供Potree中可用的其他功能：土方控件，测量工具，高程剖面等。 如果您需要这样的辅助组件/工具，我们将绝对欢迎您的贡献，有可能作为PNext组织下另一个项目的一部分。 当然，也欢迎大家提出更好/更轻松的API或新功能以及PR的建议！ 用法 import { Scene } from 'three' ; import { PointCloudOctree , Potree } from '@pnext/three-loader' ; const scene = new Scene ( ) ; // Manages the necessary state for loading/updating one or
potree-react-example
02-15
该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 而是将所有配置文件和传递依赖项（Webpack，Babel，ESLint等）直接复制到您的项目中，以
Potree是一个免费的基于WebGL的大型点云渲染器
08-08
Potree是一个免费的基于WebGL的大型点云渲染器
potree--加载二进制格式文件
06-22 755
针对二进制文件的处理，potree里面用到了第三方库plasio和Laszip，palsio是一个针对las、laz格式点云数据处理的js库，Potree里面的plasio主要包括以下几个部分： 其中laslaz.js主要负责数据的解析，bluebird主要是负责数据的异步加载，laz-loader-worker是一个数据加载的多线程解决方案； 首先介绍一下bluebird....
Potree在web端显示大型点云模型文件
silent702366的博客
07-23 1010
Potree在web端显示大型点云模型文件
postgresql点云las_使用Potree进行点云可视化
weixin_29768055的博客
01-15 1142
实验步骤一、配置Potree1、首先，确定电脑已经安装了nodejs和gulp，可以使用npm命令和gulp命令。2、在一个文件夹下，打开git命令面板，输入git clone https://github.com/potree/potree。3、在终端输入以下命令：cd Potree安装目录npm installnpm install -g gulp4、输入命令：gulp watch此时Potr...
Potree框架学习笔记记录
sl1463127791的博客
06-02 1186
Potree是一款基于WebGL的开源点云可视化软件，glupfiles.js是Potree中的一个模块，用于打包点云数据和资源文件，以便于在Web上快速轻松地加载和传输点云数据。5）.gulp.watch()->监视文件，就是监视文件的变化，然后运行指定的Tasks或者函数，这个相比Grunt需要使用插件，gulp本身就支持的很好。在上述示例代码中，使用点云的可视化对象pointcloud的属性来设置点云的可视化参数，例如设置点云的点大小和显示的点数量等等。最后将点云加入到场景中。
potree
最新发布
03-25
### Potree 3D点云可视化库介绍 Potree 是一种用于大规模三维点云数据可视化的开源 JavaScript 库，其核心依赖于 WebGL 技术来实现实时高效的渲染效果[^2]。该工具支持在浏览器环境中加载、处理以及展示大体量的点云数据集，适用于地理信息系统（GIS）、建筑信息建模（BIM）以及其他涉及高精度空间数据分析的应用场景。 #### 主要特性 1. **高效的数据管理** Potree 支持通过分层结构优化点云数据传输与存储效率。具体而言，它采用八叉树算法对原始点云进行分割和压缩，从而显著减少网络带带宽占用并提升客户端性能表现。 2. **丰富的交互功能** 用户可以通过鼠标或触控设备轻松完成诸如缩放(zooming)、旋转(rotate)和平移(panning)等基础操作；除此之外还提供了高级别的自定义选项允许调整视图角度、光照条件以及颜色映射方案等等[^3]。 3. **详尽的信息反馈机制** 在实际应用过程中，除了能够直观呈现目标对象外貌特征之外，还可以获取到更多深层次的技术参数比如密度分布状况、坐标范围界定值或者是特定区域内的测量数值等重要指标[^1]。 4. **跨平台兼容性良好** 鉴于现代Web标准的高度普及程度加之本身轻量级的设计理念使得Potree几乎可以在任何主流操作系统之上运行无阻塞现象发生包括但不限于Windows/Linux/macOS三大桌面端环境亦或是Android/iOS两大移动端阵营均能获得一致性的用户体验感受。 以下是利用Vue框架集成Potree组件的一个简单实例演示： ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.mount('#app'); // PotreeViewer.vue <template> <div id="potree_container"></div> </template> <script> export default { name: "PotreeViewer", mounted() { this.initPotree(); }, methods: { initPotree() { const container = document.getElementById("potree_container"); let config = new Potree.RendererConfig(); config.pointBudget = 50e6; config.workerLimit = 8; let renderer = new Potree.WebGLRenderer(config); renderer.setClearColor(new THREE.Color(0xeeeeee)); renderer.domElement.style.position = "absolute"; renderer.domElement.style.top = "0px"; renderer.domElement.style.left = "0px"; container.appendChild(renderer.domElement); let viewer = new Potree.Viewer(container, renderer); viewer.loadPointCloud("./path_to_pointcloud.laz", "laz").then((pc) => { pc.material.size = 2; // Adjust point size. pc.material.intensity = true; // Enable intensity visualization. viewer.scene.addPointCloud(pc); // Add the loaded point cloud to scene. console.log(`Point Cloud Loaded Successfully! Total Points:${pc.numPoints}`); }); } } }; </script> <style scoped> #potree_container { width: 100%; height: 100vh; } </style> ``` 上述代码片段展示了如何在一个基于Vue构建的项目里引入Potree，并初始化一个包含指定路径下LAZ文件格式点云资源的基础查看器界面。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值