What web technologies power the @pmndrs/racing-game (racing.pmnd.rs)?
Updated
The @pmndrs/racing-game is a browser-based 3D racing game built with the React Three Fiber ecosystem: React for the UI layer, Three.js for rendering, and react-three-fiber as the bridge between them. Because it runs on standard web graphics APIs in the browser, you can play it by opening the site — no separate app install is required. The project is associated with the pmndrs (Poimandres) open-source collective, which maintains React Three Fiber and related libraries.
The core stack
The pmndrs name is the strongest signal here: Poimandres is the group behind react-three-fiber, and a game published under that namespace is built to showcase that toolchain. The stack breaks down into three layers:
- Three.js — the underlying WebGL renderer. It handles scene graph, geometry, materials, lighting, and the render loop.
- react-three-fiber — a React renderer for Three.js. Scene objects are declared as React components, and React's state and lifecycle drive the 3D scene.
- React — manages UI state, component composition, and the game's interface elements.
Supporting libraries from the same ecosystem
pmndrs projects typically pull in companion packages rather than hand-rolling everything. In a racing game context, the likely candidates are:
| Concern | Typical pmndrs package |
|---|---|
| Physics (vehicle movement, collisions) | @react-three/rapier (Rapier physics engine) |
| Post-processing (bloom, motion blur) | @react-three/postprocessing |
| Helper utilities and controls | @react-three/drei |
| Global game state | zustand |
These are the standard building blocks across pmndrs demos, so expect the game to lean on them for physics, visual effects, and state management rather than custom engines.
Why it runs in the browser
The game renders through WebGL, the browser's 3D graphics API. That means:
- No install step. The game loads as a web page; the browser does the rendering.
- Cross-platform by default. Any device with a modern browser and WebGL support can run it, subject to GPU performance.
- Asset loading over HTTP. Models, textures, and audio are fetched like any other web resource, which affects initial load time.
The trade-off is that performance depends on the player's GPU and browser, not a fixed console or desktop target.
What this means if you want to learn from it
Because the project is open source and built on public libraries, it works as a reference implementation for browser 3D games. If you want to study or reuse the approach:
- Check the repository linked from the site or the pmndrs GitHub organization for the actual dependency list — that is the authoritative source for which packages and versions are used.
- Start with react-three-fiber docs if you are new to the stack; the game's patterns (declarative scene graph, hooks for the render loop) follow the library's conventions.
- Expect physics to be the hard part. Vehicle handling in a racing game usually comes from a physics engine integration, so look at how the physics world is stepped and how the car body is driven.
Common sticking points
- Load time and bundle size. 3D assets are heavy; first load can be slow on modest connections.
- Mobile performance. WebGL on phones is capable but constrained; a desktop-oriented scene may not hit smooth frame rates everywhere.
- Version drift. React Three Fiber and its companions evolve quickly, so older tutorials may not match the current API.
For the exact technology list, the project's own repository and package manifest are the reliable reference; the stack described above reflects the pmndrs ecosystem the game is built to demonstrate.