Point Cloud Viewer

High-performance 3D point cloud visualization with color mapping by height, intensity, or classification. Supports millions of points with interactive camera controls. Use cases: LIDAR scans (terrain/building mapping), photogrammetry output, 3D scanning (industrial inspection), satellite/aerial imaging, medical 3D reconstructions (CT/MRI), robotics perception (depth sensors, SLAM).

Installation

Copy and paste the following code into your project.

npx @plexusui/cli add point-cloud-viewer

Manual Installation

1. Copy the component code from components/point-cloud-viewer.tsx

2. Install dependencies:

npm install react@latest

3. Copy any required primitive components

Examples

Terrain Mapping

Synthetic terrain point cloud colored by elevation (height). Simulates topographic LIDAR scanning.

Building Scan with Classification

LIDAR building scan with LAS classification colors: Ground (brown), Building (red), High Vegetation (dark green).

RGB Point Cloud

10,000 points with RGB color data. Uses Fibonacci sphere distribution for even spacing.

LIDAR 360° Scan

64-beam LIDAR simulation with intensity coloring. ~92,000 points representing a full hemisphere scan.

Composable API (Primitive)

Using primitive components for full control. Switch color modes dynamically.

File Upload & Visualization

Load point cloud files (.xyz, .pcd, .las) and visualize them. Demonstrates real-world data import workflow.

Choose file (.xyz, .pcd, .las)

Upload a point cloud file to visualize. For demo purposes, files are limited to 100,000 points.

3D Annotations & Measurements

Interactive tools for ML labeling and quality control: bounding boxes, measurements, point selection.

API Reference

High-performance 3D point cloud visualization with multiple color modes

PointCloudViewer

Prop	Type	Default	Description
data	PointCloudData	required	Point cloud data with positions (required) and optional colors, intensities, classifications
colorMode	"height" \| "intensity" \| "rgb" \| "classification"	"height"	Color mapping mode: height (Z-coordinate), intensity (LIDAR return), rgb (vertex colors), classification (LAS standard)
pointSize	number	0.05	Point size in 3D space units
colorScale	(value: number) => string	viridis	Color scale function for height/intensity mapping (0-1 input)
minValue	number	auto	Minimum value for color scale normalization
maxValue	number	auto	Maximum value for color scale normalization
width	number \| string	"100%"	Viewer width in pixels or CSS units
height	number \| string	600	Viewer height in pixels or CSS units
showGrid	boolean	true	Show ground grid
showAxes	boolean	false	Show 3D axes helper
cameraPosition	[number, number, number]	auto	Camera position [x, y, z]. Auto-calculated based on point cloud bounds
backgroundColor	string	"#0a0a0a"	Background color (hex)
autoRotate	boolean	false	Enable automatic camera rotation
enableDamping	boolean	true	Enable smooth camera damping
maxDistance	number	undefined	Maximum camera zoom out distance
minDistance	number	undefined	Minimum camera zoom in distance

PointCloudData Type

Data structure for point cloud input

Prop	Type	Default	Description
positions	Float32Array \| number[]	required	Point positions as flat array [x1, y1, z1, x2, y2, z2, ...]
colors	Uint8Array \| number[]	undefined	RGB colors as flat array [r1, g1, b1, ...] (0-255). Used with colorMode='rgb'
intensities	Float32Array \| number[]	undefined	Per-point intensity values (0-1 or 0-255). Used with colorMode='intensity'
classifications	Uint8Array \| number[]	undefined	LAS classification codes (2=Ground, 5=Vegetation, 6=Building, etc.)

Primitive Components

Use for custom composition and full control

Prop	Type	Default	Description
PointCloudViewer.Root	component	-	Root container with context. Props: all PointCloudViewerProps except composed children
PointCloudViewer.Scene	component	-	3D scene with point cloud, grid, axes, and lighting
PointCloudViewer.Controls	component	-	Orbit controls for camera interaction. Props: autoRotate, enableDamping, maxDistance, minDistance
PointCloudViewer.PointCloud	component	-	Raw point cloud renderer (used within Scene)

Loading example...