potree-and-type

About

• Potree is a free open-source WebGL based point cloud renderer for large point clouds. It is based on the TU Wien Scanopy project and research projects Harvest4D, GCD Doctoral College and Superhumans.
• Newest information and work in progress is usually available on twitter
• Contact: Markus Schütz (mschuetz@potree.org)
• References:
  • Potree: Rendering Large Point Clouds in Web Browsers (2016)
  • Fast Out-of-Core Octree Generation for Massive Point Clouds (2020)

Getting Started

Install on your PC

Install node.js

Install dependencies, as specified in package.json, and create a build in ./build/potree.

npm install

Run on your PC

Use the npm start command to

• create ./build/potree
• watch for changes to the source code and automatically create a new build on change
• start a web server at localhost:1234.

Go to http://localhost:1234/examples/ to test the examples.

Deploy to a server

• Simply upload the Potree folderm with all your point clouds, the build directory, and your html files to a web server.
• It is not required to install node.js on your webserver. All you need is to host your files online.

Convert Point Clouds to Potree Format

Download PotreeConverter and run it like this:

./PotreeConverter.exe C:/pointclouds/data.las -o C:/pointclouds/data_converted

Copy the converted directory into <potreeDirectory>/pointclouds/data_converted. Then, duplicate and rename one of the examples and modify the path in the html file to your own point cloud.

Downloads

• Potree
• PotreeConverter - Convert your point cloud to the Potree format.
• PotreeDesktop - Desktop version of Potree. Allows drag&drop of point clouds into the viewer.

Examples

Basic Viewer	CA13 (18 billion Points)	Retz (Potree + Cesium)	Classifications	Various Features	Toolbar

More Examples

Load Project	Matcap	Virtual Reality	Heidentor	Lion	Lion LAS
Lion LAZ	EPT	EPT Binary	EPT zstandard	Clipping Volume	Oriented Images
Elevation Profile	Measurements	Meshes	Multiple Point Clouds	Camera Animation	Features (CA13)
Annotations	Hierarchical Annotations	Animation Path	Shapefiles	Cesium CA13	Geopackage
Cesium Sorvilier	Custom Sidebar Section	Embedded Iframe	Gradient Colors

VR

Heidentor	Eclepens	Morro Bay	Lion	Dechen Cave

Showcase

Matterhorn	Retz	Lake Tahoe	Sorvilier	Grave	Chowilla

More

Chiller	Cooler	Dechen Cave	Ruins	Eclepens	Heidentor
Building	LDHI	Lion Head	Overpass	Pielach	pompei
Santorini	Skatepark	Subsea Eq.	Subsea Man.	Westend Palais	Whitby

Funding

Potree is funded by a combination of research projects, companies and institutions.

Research projects who's funding contributes to Potree:

Project Name	Funding Agency
LargeClouds2BIM	FFG
Harvest4D	EU 7th Framework Program 323567
GCD Doctoral College	TU Wien
Superhumans	FWF

We would like to thank our sponsors for their financial contributions that keep this project up and running!

Diamond € 15,000+
Gold € 10,000+
Silver € 5,000+
Bronze € 1,000+	Data-viewer

Credits

• The multi-res-octree algorithms used by this viewer were developed at the Vienna University of Technology by Michael Wimmer and Claus Scheiblauer as part of the Scanopy Project.
• Three.js, the WebGL 3D rendering library on which potree is built.
• plas.io point cloud viewer. LAS and LAZ support have been taken from the laslaz.js implementation of plas.io. Thanks to Uday Verma and Howard Butler for this!
• Harvest4D Potree currently runs as Master Thesis under the Harvest4D Project
• Christian Boucheny (EDL developer) and Daniel Girardeau-Montaut (CloudCompare). The EDL shader was adapted from the CloudCompare source code!
• Martin Isenburg, Georepublic, Veesus, Sigeom Sa, SITN, LBI ArchPro, Pix4D as well as all the contributers to potree and PotreeConverter and many more for their support.

如何在npm里面使用

1. 安装依赖

   npm i potree-and-type

2. 在node_modules里面找到potree-and-type，把dist里面的libs和resources、workers文件夹复制到项目的public目录（vue项目中）

3. 在main.ts中加入如下代码（vue项目中）

   import * as Potree from "potree-and-type"
   
   window.Potree = Potree;
   window.Potree.scriptPath = `${window.Potree.scriptPath}${import.meta.env.BASE_URL}`;
   window.Potree.resourcePath = `${window.Potree.scriptPath}/resources`;

4. 在index.html中加入如下代码：

   <!doctype html>
   <html lang="en">
   <head>
       <meta charset="UTF-8" />
       <link rel="icon" type="image/svg+xml" href="/vite.svg" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <!-- 添加需要的依赖项 -->
       <script src="./public/libs/jquery/jquery-3.1.1.min.js"></script>
       <script src="./public/libs/spectrum/spectrum.js"></script>
       <script src="./public/libs/jquery-ui/jquery-ui.min.js"></script>
       <script src="./public/libs/other/BinaryHeap.js"></script>
       <script src="./public/libs/tween/tween.min.js"></script>
       <script src="./public/libs/d3/d3.js"></script>
       <script src="./public/libs/proj4/proj4.js"></script>
       <script src="./public/libs/openlayers3/ol.js"></script>
       <script src="./public/libs/i18next/i18next.js"></script>
       <script src="./public/libs/jstree/jstree.js"></script>
       <script src="./public/libs/plasio/js/laslaz.js"></script>
       <!--  -->
       <title>Vite + Vue + TS</title>
   </head>
   <body>
       <div id="app"></div>
       <script type="module" src="/src/main.ts"></script>
   </body>
   </html>
   

5. 写一个hello world场景（vue项目中）

   // App.vue
   <template>
       <div class="three-container" ref="threeContainer"></div>
   </template>
   <script lang="ts" setup>
   import { onMounted, ref } from "vue";
   import { PotreeHelper } from "./potreeHelper/index"
   
   const threeContainer = ref();
   onMounted(() => {
       const potreeHelper = new PotreeHelper(threeContainer.value);
   })
   </script>
   
   <style lang="scss" scoped>
   .three-container {
       width: 100%;
       height: 100%;
   }
   </style>

   // potreeHelper.ts
   import * as Potree from "potree-and-type"
   
   export class PotreeHelper {
       constructor(threeContainer: HTMLDivElement) {
           const viewer = new Potree.Viewer(threeContainer);
           viewer.setEDLEnabled(true);
           viewer.setFOV(60);
           viewer.setPointBudget(1_000_000);
           Potree.loadPointCloud("datas/pointclouds/room/metadata.json", "room", (e: any) => {
               viewer.scene.addPointCloud(e.pointcloud);
               let material = e.pointcloud.material;
               material.size = 1;
               material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
               viewer.fitToScreen();
           })
       }
   }