# point-cloud

<p align="center">
<a href="https://www.npmjs.com/package/@arizeai/point-cloud">
  <img alt="NPM Version" src="https://img.shields.io/npm/v/%40arizeai%2Fpoint-cloud">
</a>
</p>

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

## Installation

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

## Usage

Basic usage:

```tsx
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.

```bash
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:

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