point-cloud

A point cloud library for visualizing point clouds using 2D and 3D canvases.

Installation

# or pnpm, yarn, etc
npm install @arizeai/point-cloud @react-three/drei

Usage

Basic usage:

import { ThreeDimensionalCanvas, ThreeDimensionalControls, Points, type PointBaseProps } from '@arizeai/point-cloud';

const data: PointBaseProps[] = [
  { position: [0, 0, 0], metaData: {} },
  { position: [1, 1, 1], metaData: {} },
];

export const PointCloud = () => {
  return (
    <ThreeDimensionalCanvas>
      <ThreeDimensionalControls />
      <Points data={data} pointProps={{ color: '#7BFFFF' }} />
    </ThreeDimensionalCanvas>
  );
};

See additional usage examples in Storybook.

npm run storybook

Usage with React 19

React 19 is not yet supported by stable versions of @react-three/drei. To use this library with React 19, you can try the following:

npm install @arizeai/point-cloud @react-three/drei@alpha