NETROOM
A drop-in component for 3D force-directed graphs: nodes, links, zoom and click handling out of the box, built on three plus d3-force-3d. Reach for it when you need to show relationships - a network, a dependency map, a social graph - on a plain page with no React. Actively released, but the peer range is strict: three >=0.179, so an older three will not fit. It pulls in three-forcegraph, three-render-objects and kapsule, so the bundle is not small. Siblings: force-graph (2D), VR/AR builds, and react-force-graph-3d.
The official JS bindings for Rapier, a Rust physics engine compiled to wasm. Fast, deterministic, with CCD, joints, a character controller, and full world serialization. This is the raw ESM build: the .wasm ships as a separate file, so your bundler must handle wasm modules (a plugin for Vite, asyncWebAssembly for webpack). If you would rather skip that, use rapier3d-compat instead. Apache-2.0. Actively developed, but minor releases break the API - pin the version.
The same Rapier with the wasm inlined as base64 - no bundler configuration at all, works everywhere including old webpack setups and CDN scenarios. The price is a couple of megabytes of extra bundle before gzip and a mandatory await RAPIER.init() before first use. This is the package @react-three/rapier depends on. Make it your default, and switch to plain @dimforge/rapier3d only when size matters and you know your bundler handles wasm modules. Apache-2.0.
Don McCurdy's SDK for glTF 2.0: it reads a file into a document object model, lets you edit meshes, materials, nodes and animations in code, and writes it back - in Node or in the browser. The foundation for your own asset optimization pipeline. Actively released, TypeScript throughout. Core on its own understands base glTF only: vendor extensions live in @gltf-transform/extensions and ready-made optimizations in @gltf-transform/functions. MIT.
Extension support for @gltf-transform/core: KHR_draco_mesh_compression, KHR_texture_basisu, EXT_meshopt_compression, the KHR_materials_* family (clearcoat, transmission, volume, sheen), KHR_lights_punctual and more. Without it, core will read a file but drop everything non-standard on write - and that is exactly what asset compression relies on. Install it at the same version as core; the packages release in lockstep. MIT, and light.
Ready-made glTF operations on top of core: dedup, prune, weld, simplify (via meshoptimizer), quantization, texture compression to KTX2/WebP, Draco, instancing, and animation resampling. This is exactly what the gltf-transform CLI runs - take the package when optimization belongs in your build rather than in a manual step. Models shrink several times over with little visible loss. It pulls ndarray and image codecs, so watch the size in a browser bundle. MIT, actively developed.
A pack of CC0 assets encoded as base64 inside JS modules: HDRI environments (studio, city, sunset, dawn), matcaps, normal maps, and the Inter font for troika text. Each file is a separate lazy import, so only what you take reaches the bundle. The point is removing the CDN dependency: demos and offline builds work with no network and no CORS dance. Licensed CC0-1.0, so no attribution needed. Last release September 2024, but it is just data.
drei-style helpers without React: Grid, PCSS softShadows, MeshRefractionMaterial, MeshTransmissionMaterial, caustics, a water shader, and an effects set. Take it when you write plain three but do not want to reimplement the good-looking parts of drei demos by hand. It is not at parity with drei - things get ported as needed and the list is noticeably shorter. Peer three >=0.137, released regularly. It pulls meshline and glsl-noise. Per-file imports keep the bundle honest.
The react-spring target for React Three Fiber: `useSpring` returns animated values and `<a.mesh>` mutates the object inside the frame loop, skipping React re-renders entirely. Actively released (10.1.x, mid-2026) with loose peers - three from 0.126, R3F from 6, React up to 19. The npm blurb is stale and still says "version 6 of react-three-fiber"; v8 and v9 are fine. Pick it for interruptible springs and gesture-driven motion; for timelines and choreography reach for GSAP or Theatre.js.
An accessibility layer for the canvas: wrap an object in `<A11y>` and you get keyboard focus, tab order, button or link semantics and screen-reader descriptions, driven by hidden DOM nodes layered over the scene. Still the only ready-made answer of its kind, but it has sat at 3.0.0 since 2022: zustand 3 inside, peers pinned to R3F 8 and React 18. On R3F 9 with React 19 it installs only through overrides and is largely untested, so budget time for patching.
Physics hooks over cannon-es with the solver running in a Web Worker, so React only ever receives finished transform matrices. The API is pleasant: `useBox`, `useSphere`, a ref on the mesh and the body lives on its own while the main thread stays free. No releases since August 2023 though, and pmndrs now points people at @react-three/rapier, which is Rust/WASM, faster and actively developed. Keep cannon for legacy scenes or when you specifically want the worker isolation.
Constructive solid geometry declared in JSX: `<Geometry><Base/><Subtraction/><Addition/></Geometry>` cuts windows out of a wall without touching the Evaluator by hand. It sits on three-bvh-csg and three-mesh-bvh, so it is fast enough to re-evaluate at runtime rather than only at authoring time. v4.0.0 landed in March 2025 and pins three-bvh-csg 0.0.16 with bvh 0.6.x, so on a recent three you will need overrides or a direct call into the CSG library.
Flexbox layout inside a 3D scene, powered by Yoga: `<Flex>` and `<Box>` place meshes using familiar CSS rules so you stop hand-computing coordinates. Good idea, bad shape: the last release, 1.0.1, shipped in December 2022, the peer is hard-pinned to React 18, and npm complains on React 19. For anything new take @react-three/uikit instead - same Yoga engine underneath, but active releases, instanced rendering and a full component kit on top.
Moves the R3F canvas into a Web Worker via OffscreenCanvas, freeing the main thread so the scene no longer stutters under React work, scrolling or layout. You use `<Offscreen worker={...} fallback={...}/>` and the scene lives as a separate module inside the worker. It is experimental: 0.0.8 from May 2023, peers on R3F 8, event forwarding is limited and there is no DOM in the worker at all. The win on heavy scenes is real, the debugging cost is too.
The R3F wrapper around the postprocessing library: `<EffectComposer>` plus `<Bloom>`, `<DepthOfField>`, `<SSAO>`, `<Vignette>`. Effects are merged into a single pass rather than chained render targets, which makes it cheaper than wiring the EffectComposer from three's examples yourself. v3 demands React 19, R3F 9.7+, three 0.156+ and postprocessing 6.36 - stay on the v2 line if you are still on R3F 8. It also bundles n8ao for fast ambient occlusion.
Renders the R3F tree without WebGL or a browser so scenes can be asserted in Vitest or Jest: query objects by type and props, dispatch `fireEvent`, step the loop with `advanceFrames`. It checks the scene graph and your logic, not pixels - visual regressions still need Playwright screenshots. 9.1.1 is current but the peers are strict: React 19 and R3F 9 or newer, with the 8.x line left for older setups.
A real UI layer inside the scene: Yoga flexbox, Tailwind-flavoured props, scrolling, shadows and rounded corners, all instanced down to a handful of draw calls instead of a DOM overlay through `<Html>`. Component kits in shadcn and Apple styles ship on top. Releases are steady (1.0.7x, September 2026), peers are loose - R3F 8+, React 18+ - and the license file is plain MIT. The default answer now instead of the abandoned @react-three/flex.
WebXR for R3F: VR and AR sessions, controllers, hand tracking, hit-testing against real surfaces, teleport and portals. v6 is a ground-up rewrite on top of @pmndrs/xr - the `<XR>` component gave way to a store created with `createXRStore()`, so moving from 5.x is not cosmetic; read the migration guide. Peers are loose (any three, R3F 8+, React 18+), the license is MIT and releases are regular. The WebXR Emulator extension covers debugging without a headset.
The Theatre.js runtime: it plays back animations you authored by hand in the studio and stores them as plain JSON. Only core ships to production - small, editor-free, Apache-2.0. The model is simple: a project, sheets, objects with props, curves, and a subscription that hands you values to apply wherever you like. Development stalled at 0.7.2 in May 2024, so three and React upgrades are on you. For code-driven motion GSAP is simpler; Theatre is for hand-directed sequences.
The Theatre.js bridge into React Three Fiber: `<SheetProvider>`, `editable.mesh` and a snapshot editor with gizmos let you drag the camera and objects in the browser while values land in the project and export as JSON. The catch is the peer range: it declares @react-three/fiber ^8.13.6, so there is no supported path to R3F 9 and React 19 - only a forced install at your own risk. Last release 0.7.2, May 2024. Apache-2.0 here, but the studio next to it is AGPL.
The editor itself: a timeline with curves and keyframes layered over your running app, values tweaked live. It is a dev-only dependency - production ships @theatre/core plus the exported JSON. Check the license separately: the studio is AGPL-3.0, not Apache like core, which is usually fine for an internal tool but occasionally trips up legal review. Version 0.7.2 from May 2024 and development has stopped. The living alternative for this job is GSAP timelines with GSDevTools.
The internal core of Tweakpane: the blade system, input handling, events and theming that both the main package and third-party plugins are built on. You do not install it in an app - it matters only when authoring a plugin and importing types such as `BladePlugin` or `ValueController`. Version 2.0.5 pairs with tweakpane 4.x, and the major numbers deliberately diverge: the v4 pane wants core 2.x. Ordinary users just install tweakpane and get this transitively.
Gestures as hooks: `useDrag`, `usePinch`, `useWheel` and `useHover` hand back ready-made handlers carrying velocity, direction, momentum and bounds - you just pipe the values into an animation. The classic pairing is with react-spring, but it works fine with motion or plain state, and in an R3F scene you can bind it to mesh events or to the canvas DOM node. Version 10.3.1 from March 2024; quiet for a while, though the API has settled and bugs are not piling up. React 16.8+, MIT.
OrbitControls grown up for production: inertia and smooth damping, truck/dolly/pedestal, promise-based camera flights, fitToBox, and collider-aware clamping. Take it when the camera is part of the UI rather than a way to spin a model. You wire three in yourself via CameraControls.install({ THREE }) so the bundle only carries what you use. Peer three >=0.126 and released often. Note that v3 shipped breaking changes - a 2.x upgrade is not a drop-in.
