Potree-and-type NPM

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)

npm.io

Getting Started

Install on your PC

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

VR

Showcase

Funding

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

Research projects who's funding contributes to Potree:

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

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里面使用

安装依赖
```
npm i potree-and-type
```
在node_modules里面找到potree-and-type，把dist里面的libs和resources、workers文件夹复制到项目的public目录（vue项目中）

在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`;

在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>

写一个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();
		})
	}
}

point cloud pointcloud octree entwine viewer threejs webgl browser tool

gulp gulp-concat gulp-connect json5 rollup rollup-plugin-dts rollup-plugin-typescript2 through

@everything-registry/sub-chunk-2464 jotree

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago