Terrain Rider: Physics Based Mountain Bike Game

theshanergy · July 17, 2026, 11:48am

Hey all - I’ve been working on Terrain Rider, a physics-based mountain biking game that runs in the browser.

It’s built with Three.js / React Three Fiber and Rapier, with procedural terrain, bike customization, timed trails, chairlifts, weather changes, and some very unforgiving ragdoll crashes!

Still tuning the riding feel and adding more trails, so I’d love to hear what you think.

Play it here: https://terrainrider.com/

PavelBoytchev · July 17, 2026, 12:02pm

It was fun, the feeling is OK. Maybe a bit too stable – I zigzagged and it still kept recovering balance and riding. The graphics is OK. At some point the scene froze, then became black with “recursive use of object” error message.

augustopolonio · July 17, 2026, 12:56pm

Amazing! Right from the first few seconds, we can see it’s a great game! The physics of the player falling is very realistic and very funny at the same time. Congrats!

theshanergy · July 17, 2026, 2:26pm

thanks for the feedback - I haven’t seen that bug but I will investigate. sounds like rapier.

as for stability - it’s a real balancing act (so to speak)! since I’m trying to keep it purely physics based without baking/scripting animations it means some amount of auto steering is necessary (it would be nearly impossible to balance otherwise). currently it uses a pd controller to adjust steering while you ride, and balance is an emergent property of steering and lean as it is in the real world. finding the sweet spot is not easy. you’ll notice that it is very hard to crash on perfectly level ground, but if you get into the mountains and ride some trails you may find the opposite. anyway, I’ll keep tuning to try and get it more realistic. one of my main reasons for building this game was that other bike games never seem to use real physics, but I think it can be done.

PavelBoytchev · July 17, 2026, 2:28pm

In case it would help, here is a snapshot of the screen with the console:

theshanergy · July 17, 2026, 2:46pm

was this happening on the valley xc trail by chance? if so, should be fixed now.

PavelBoytchev · July 17, 2026, 3:15pm

made a full round, no browser crash

theshanergy · July 17, 2026, 3:26pm

beauty - thanks for the help debugging. turned out to be a bug in @react-three/rapier - issue opened.

github.com/pmndrs/react-three-rapier

RigidBody forwarded ref still points at the removed body after unmount - one call on it panics the wasm and permanently poisons the World

opened 03:24PM - 17 Jul 26 UTC

theshanergy

**Environment:** `@react-three/rapier` 2.2.0, `@dimforge/rapier3d-compat` 0.19.2… **Problem** `RigidBody` assigns the forwarded ref imperatively inside `useImperativeInstance`'s create callback (RigidBody.tsx): ```ts if (typeof ref === "function") ref(rigidBody); rigidBodyRef.current = rigidBody; ``` Since the ref is never attached to a React element, React's automatic ref-nulling on unmount doesn't apply — and neither the destroy callback (`world.removeRigidBody(rigidBody)`) nor any cleanup resets it. After the component unmounts, the parent's ref still points at a wrapper whose body has been removed from the world. The first later call on that wrapper hits a freed arena handle inside the wasm and panics (`RuntimeError: unreachable`). Because the panic unwinds through wasm-bindgen's borrow guard without releasing it, **every** subsequent call into rapier then throws `recursive use of an object detected which would lead to unsafe aliasing in rust`. The whole physics world is permanently poisoned and the simulation freezes; there's no recovery short of recreating the world. **Repro:** a conditionally-mounted body driven by ref from a parent frame loop (common for streamed / proximity-gated content): ```tsx function Platform({ mounted }: { mounted: boolean }) { const body = useRef<RapierRigidBody>(null); useFrame(({ clock }) => { // body.current is still non-null after <RigidBody> unmounts; // the first call after unmount panics the wasm if (body.current) { body.current.setNextKinematicTranslation({ x: 0, y: Math.sin(clock.elapsedTime), z: 0 }); } }); return mounted ? ( <RigidBody ref={body} type="kinematicPosition"> <CuboidCollider args={[1, 0.1, 1]} /> </RigidBody> ) : null; } ``` Toggle `mounted` off → next frame panics → world poisoned. We hit this with a proximity-streamed kinematic prop; it was painful to diagnose because the "recursive use of an object" spam buries the single initial `unreachable` panic, and the crash fires far from the code that caused it. **Expected:** the forwarded ref follows React semantics and is nulled on unmount — i.e., the cleanup that destroys the instance also resets the ref (`ref(null)` for callback refs, `.current = null` for object refs). **Workaround:** guard ref-driven calls with `body.current.isValid()`.

vielzutun.ch · July 17, 2026, 3:49pm

This is REALLY cool

As an E-MTB Rider myself I REALLY enjoyed scratching your project just barely. It took me several “crashed” states to finally get a hold on the ASWD controls

Great game play, and I especially love the “spinning out” of the the rear wheel after crashing

Thumbs up for the implemenation and idea of this application

theshanergy · July 17, 2026, 4:03pm

thanks for the feedback and playtest! if you’ve got an old Xbox controller or similar it plays a lot better than WASD as you can vary your steering/lean inputs.

Qi_Liu · July 17, 2026, 7:36pm

Wow, this is awesome. I’m pretty new to Three.js, so I’m really impressed by how smooth it feels.

A couple questions:

What helped the most with keeping the FPS high?
Did the procedural terrain or physics cause any major performance issues?

dubois · July 17, 2026, 7:43pm

super cool! How do you get up?

theshanergy · July 18, 2026, 12:56am

FPS is largely a product of hardware, and since this game is fairly heavy overall I decided to create graphic quality tiers with an auto detected quality by default that adjusts things like resolution, shadows, textures, terrain lod, grass density, wind particles, fog, among other things. I also exposed the quality tiers in the pause menu though so you can play around to find a setting that works best. the procedural terrain itself is fairly light-weight. just basic noise for the most part. I have been playing with some more realistic terrain generation though that I might add which will be a bit heavier. I might offload that to a server though.

theshanergy · July 18, 2026, 12:57am

thanks - hit r on your keyboard, or B on gamepad. if you haven’t crashed already, it will ragdoll you. fun for throwing yourself off mountains etc

Topic		Replies	Views
New version of Rapier physics + three.js demo app Resources physics	2	9784	September 12, 2023
Sample app showing three.js with rapier physics Resources	0	3094	September 6, 2021
Real-Time Flight Simulator Portfolio — Playable 3D Experience Showcase textures , materials , geometry , camera , orbit-controls , animation , threejs , react-three-fiber	0	128	May 20, 2026
🌀 Web Labyrinth: Navigate and Conquer with r3f & Rapier Physics! Showcase react-three-fiber , zustand , rapier	0	161	October 13, 2024
Cosmos 404 - A fast-paced planet runner built with R3F Showcase textures , materials , geometry , game-dev , shaders , animation , game , react-three-fiber	0	151	December 31, 2025

Terrain Rider: Physics Based Mountain Bike Game

Related topics