💃 Getting Started

This package is available in the Node Package Repository and can be easily installed with npm or yarn.

$ npm i @jolly-pixel/three
# or
$ yarn add @jolly-pixel/three

👀 Usage example

import { Grid } from "@jolly-pixel/three";

const grid = new Grid({
  cell: { size: 1 },
  section: { size: 10 }
});
scene.add(grid); // self-updating: no manual .update() call needed

📚 API

Components

• AreaBox: Translucent axis-aligned area, moved and resized on a grid by BoxControls.
• Grid: Ground-plane grid mesh. (TSL, THREE.WebGPURenderer).
• MarqueeBox: Empty axis-aligned box with animated two-color dashed edges, for 3D selections, moved and resized by BoxControls. (TSL, THREE.WebGPURenderer).
• MeshHighlight: Draws local and peer selection, with outline and postprocess rendering techniques.
• TransformControls: Customizable translate, rotate and scale gizmo for one THREE.Object3D, with a configurable orientation and pivot.

Utilities

• BakedRoomEnvironment: Prefiltered RoomEnvironment reflection map, loaded instead of generated at runtime.
• Utilities: Coordinate conversions between world, client and normalized device space (projectToClient, clientToNdc), and createCanvas2D for canvas-backed textures.

Network

Optional integrations are exported from @jolly-pixel/three/network.

• Network guide: Peer cameras, selection, and hover presence with @jolly-pixel/network.

✨ Contributors guide

If you are a developer looking to contribute to the project, you must first read the CONTRIBUTING guide.

Once you have finished your development, check that the tests (and linter) are still good by running the following script:

$ pnpm run test
$ pnpm run lint

CAUTION

In case you introduce a new feature or fix a bug, make sure to include tests for it as well.

📃 License

MIT