voxelkloudBack to the project

DOCS / PACKAGE GUIDE

@voxelkloud/react
Thin React wrapper

Use the wrapper when React should own the canvas lifecycle and you do not want to write that wiring yourself.

npm install @voxelkloud/react threepublic

Minimal mount

Point the component at a cloud URL, pass the LOD policy you want, and let the wrapper keep the renderer in sync with React.

import { PointCloudViewer } from '@voxelkloud/react'

<PointCloudViewer
  url="/pointclouds/autzen/"
  lod={{ targetScreenError: 1.35, pointBudget: 3_000_000 }}
/>

If you need state first

When your app needs the loaded source or tree before the canvas exists, use the same package’s hook and keep the renderer thin.

  • React owns the component lifecycle.
  • The renderer stays shared with the vanilla and Vue integrations.
  • The wrapper should not become a second viewer implementation.

Related guides