$ show pmndrs/react-three-fiber
React Three Fiber (R3F) is a React renderer for three.js, enabling declarative construction of 3D scenes using JSX. It provides a `<Canvas>` component that bootstraps a WebGL renderer, a custom React reconciler that bridges React's component lifecycle with three.js objects, and a rich set of hooks (`useFrame`, `useThree`, `useLoader`) for imperative control. The architecture follows a monorepo pattern with three packages: the core fiber library (web and React Native), a test renderer for unit testing 3D components, and an ESLint plugin enforcing performance rules. The core library abstracts WebGL details, handles pointer events with raycasting, manages the render loop, and supports advanced features like portals, Suspense for async assets, and context bridging. It is a foundational tool for building interactive 3D applications in the browser or on mobile via Expo. The codebase demonstrates high craftsmanship with clean abstractions, extensive test coverage, and a modular design that separates concerns across reconciler, event system, state management, and rendering utilities.
The LLM identified 5 files worth highlighting for reuse:
Implements a custom React host config (reconciler) that targets three.js scene objects instead of the DOM. It handles instance creation, attachment/detachment, property diffing, and disposal. This pattern is reusable for any non-DOM rendering target (e.g., custom canvas, WebGPU, native graphics) and demonstrates deep understanding of React's internal architecture.
Provides a complete pointer event system for 3D scenes, managing intersection tests, hover state, pointer capture, and event propagation via React's event system. It is self-contained and can be extracted to add interactive event handling to any custom three.js setup, demonstrating reusable raycasting and event delegation patterns.
Defines the global store for R3F state (camera, scene, viewport, frameloop mode, performance) using Zustand. It encapsulates the render loop control, invalidation, and performance budgets in a single composable store. This pattern is reusable for any React-based rendering system that needs to manage shared 3D state and imperative lifecycle.
Exposes a headless test environment for R3F components, simulating WebGL rendering without a DOM. Provides `create()`, `act()`, `fireEvent()`, `advanceFrames()`, and tree/graph serialization. It is a standalone testing utility that demonstrates how to mock 3D rendering and write deterministic unit tests for complex visual components.
A custom ESLint rule that detects `new` allocations inside loops, specifically targeting `useFrame` callbacks in R3F projects. This pattern is reusable for any performance-sensitive JavaScript environment where object creation in hot paths should be avoided. The rule is well-structured with metatest support and demonstrates how to enforce React best practices via linting.