Terrain Rider: Infinite Real-World 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

theshanergy · July 24, 2026, 4:16pm

Just added a fairly large update which includes full real world terrain and all real world bike trails. Starting at Whistler BC. Fully procedural trails and chair lifts!

KRK_Raju · July 27, 2026, 10:47am

Hi! You did a great job. I really like how it looks overall. I have a few suggestions that could make it even better:

Overall, the design looks great.
I have a few suggestions for improvement:

Improve the Sky
- The current sky texture doesn’t look realistic.
- Please use a higher-quality HDRI or more realistic sky texture for better immersion.
Better Controls
- Add smoother operation controls.
- Include clear keyboard and mouse controls (accelerate, brake, steering, camera rotation, zoom, etc.).
Traffic Animation
- Add other bicycles moving forward on the road to make the environment feel more alive and realistic.
Mini Route Map
- Add a small route map (mini-map) in the top-right corner of the screen.
- It should display the player’s current position and the destination.
Travel Time
- Display the estimated arrival time (ETA).
- Also show the elapsed time from the start of the ride.
Completion Screen
- Once the destination is reached, show a “Congratulations!” popup.
- Display:
  - Total ride time
  - Distance traveled
  - Average speed
  - A “Tap to Continue” or “Play Again” button

These features will make the bicycle simulator more realistic, interactive, and enjoyable for users.

Thanks..

theshanergy · July 27, 2026, 8:06pm

hey, thanks for the feedback. just curious, what graphics quality tier do you have set? the sky quality is heavily dependent on this and on high quality I actually think it looks better than most. on lower qualities though I agree that it is a bit lackluster. other than that, most of these are already on my list. other bikes will be provided by other players, once I add full multiplayer. thanks again for the suggestions!

bartoszu · July 30, 2026, 8:05pm

cool! great job!

theshanergy · August 5, 2026, 6:19pm

Multiplayer is in now for anyone following!

Topic		Replies	Views
Real-Time Flight Simulator Portfolio — Playable 3D Experience Showcase textures , materials , geometry , camera , orbit-controls , animation , threejs , react-three-fiber	0	158	May 20, 2026
Summit Rush — endless downhill skiing in vanilla Three.js (procedural biomes, weather, GTAO on phones) Showcase	7	189	July 24, 2026
New version of Rapier physics + three.js demo app Resources physics	2	9863	September 12, 2023
I turned my portfolio into a tiny Three.js game — bikes, cars, police, and a jetpack Showcase game	0	76	July 24, 2026
Sample app showing three.js with rapier physics Resources	0	3102	September 6, 2021

Terrain Rider: Infinite Real-World Physics Based Mountain Bike Game

Related topics