UI Components
Point Cloud Viewer

Point Cloud Viewer

Render millions of 3D points with color mapping by height, intensity, or classification. Designed for LIDAR data, photogrammetry outputs, and any large-scale spatial datasets.

Category: 3d · Maturity: stable

Installation

npx @plexus/cli add point-cloud-viewer

Dependencies

This component requires Three.js and React Three Fiber:

npm install three @react-three/fiber @react-three/drei

Usage

import { PointCloudViewer } from '@plexus/ui'
 
function TerrainView({ points }) {
  return (
    <PointCloudViewer
      data={points}
      colorBy="height"
      colorScale="viridis"
      pointSize={1.5}
      width={800}
      height={600}
    />
  )
}

Color Mapping Modes

ModeDescription
heightColor by Z-axis value. Good for terrain elevation.
intensityColor by return intensity. Common in LIDAR data.
classificationDiscrete colors by point class (ground, vegetation, building).
rgbUse embedded RGB values from the point data.
customProvide your own scalar array and color scale.

Performance

SpecValue
Max data points10,000,000+
Target FPS60
Typical memory~500 MB
RendererThree.js (WebGL2)

Aerospace Use Cases

  • LIDAR terrain mapping — Visualize airborne or ground-based LIDAR scans with elevation coloring and classification overlays
  • Satellite imaging — Display 3D point data from photogrammetric reconstruction of satellite or aerial imagery
  • Structural scanning — Render 3D scans of buildings, bridges, or vehicles for inspection and measurement

Related Components