Potree Core 2.0

Potree Core uses a unified visibility rule for clipping. Clipping volumes can be defined as include (keep what is inside) or exclude (remove what is inside).

Clipping Modes

• ClipMode.DISABLED: A global master switch that disables all clipping/highlighting.
• include: Clip-outside semantics (the volume's interior remains visible).
• exclude: Clip-inside semantics (the volume's interior is removed).
• If a volume's mode is undefined, it inherits the global pco.material.clipMode.
• ClipMode.HIGHLIGHT_INSIDE: Highlights the interior without changing visibility.

Clipping Primitives

1. Clip Boxes: Created via createClipBox(size, position, mode?). Returns an IClipBox.
2. Clip Spheres: Created via createClipSphere(center, radius, mode?). Returns an IClipSphere.
3. Clip Planes: These do not have individual modes; they always use the inherited global material mode. They are evaluated as insideAllPlanes (point is on the positive side of all planes).

To apply clipping to a point cloud, use pco.material.setClipBoxes([...]) or pco.material.setClipSpheres([...]).

import { ClipMode, createClipBox, createClipSphere } from 'potree-core';
import { Vector3 } from 'three';

// Set global fallback
pco.material.clipMode = ClipMode.CLIP_OUTSIDE;

// Clip Boxes
const includeA = createClipBox(new Vector3(10, 10, 10), new Vector3(0, 0, 0), 'include');
const excludeB = createClipBox(new Vector3(4, 4, 4), new Vector3(0, 0, 0), 'exclude');
const inheritedD = createClipBox(new Vector3(3, 3, 3), new Vector3(-3, 0, 0)); // inherits CLIP_OUTSIDE
pco.material.setClipBoxes([includeA, excludeB, inheritedD]);

// Clip Spheres
pco.material.clipMode = ClipMode.HIGHLIGHT_INSIDE;
const sphereA = createClipSphere(new Vector3(0, 1, 0), 3, 'exclude');
const sphereB = createClipSphere(new Vector3(5, 1, 0), 2); // inherits HIGHLIGHT_INSIDE
pco.material.setClipSpheres([sphereA, sphereB]);

To use Potree Core, instantiate the Potree class, use loadPointCloud to fetch your data, and call updatePointClouds within your animation loop to ensure the point cloud is rendered and updated relative to the camera and renderer.

Note that loadPointCloud accepts a URL and a callback function to resolve the base URL (e.g., to prepend a base path).

const scene = new Scene();
const camera = new PerspectiveCamera(60, 1, 0.1, 10000);
const canvas = document.getElementById("canvas");
const renderer = new WebGLRenderer({canvas:canvas});

// ... setup scene objects ...

const pointClouds = [];
const baseUrl = "data/test/";
const potree = new Potree();

// Load the point cloud
potree.loadPointCloud("cloud.js", url => `${baseUrl}${url}`,).then(function(pco) {
   scene.add(pco);
   pointClouds.push(pco);
});

function loop()
{
   // Crucial: Update point clouds every frame
   potree.updatePointClouds(pointClouds, camera, renderer);

   renderer.render(scene, camera);
   requestAnimationFrame(loop);
};
loop();