pcd viewer

This library is a visualization React module developed to efficiently render data output from the module pcd-lod, which converts point cloud data into an LOD (Level of Detail) format for efficient drawing. The purpose of this module is to facilitate effective visualization of this data on web browsers.

It includes a collection of components using React Three Fiber, allowing for easy integration into any React project.

API Documentation

Installation

npm install pcd-viewer # or yarn add pcd-viewer

Usage

/**
 * Example component for the point cloud.
 * fetches & renders the point cloud in the /examples/public/uav-8bit directory.
 */
const Example = () => {
  const root = "/uav-8bit";
  const [meta, setMeta] = useState<PointCloudMeta | null>(null);

  // Fetch & set the metadata of the point cloud.
  useEffect(() => {
    axios.get(`${root}/meta.json`).then(({ data }) => {
      setMeta(data);
    });
  }, [root]);

  // Loader callback for the point cloud.
  const loader: PointCloudLODLoader<PngBuffer> = useCallback((props) => {
    const { address, color } = props;
    const { lod, coordinate } = address;
    // Construct the URL of the PNG file from the address.
    const url = `${root}/${lod}/${coordinate.x}-${coordinate.y}-${coordinate.z}`;
    return pngLoader({ url, color });
  }, [root]);

  return meta !== null ? (
    <Visualizer
      pointCloud={{
        meta,
        loader,
        parser: pngParser,
        pointSize: 15,
        lodHelper: true,
      }}
    />
  ) : null;
};

Run example

git clone pcd-viewer

cd pcd-viewer

npm install # or yarn install

npm run dev # or yarn dev

# then serve the example folder with a static server