Heightfield Physics Demo

Interactive physics demonstration using React-Three-Rapier's HeightfieldCollider. Objects spawn automatically and fall onto a procedurally generated terrain with realistic physics.

View Simple Version

Heightfield Physics Demo

• Objects spawn and fall onto the terrain

• Heightfield collider provides realistic terrain physics

• Yellow rings show collision points

Collisions: 0

Features

  • Heightfield Collider: Procedurally generated terrain with accurate physics
  • Dynamic Objects: Randomly spawning boxes and spheres
  • Collision Detection: Visual feedback for collision events
  • Realistic Physics: Powered by Rapier physics engine
  • Interactive Camera: Orbit controls for exploring the scene

Technical Details

  • Heightfield Size: 20x20 grid
  • Terrain Scale: 10x2x10 units (width×height×depth)
  • Physics Engine: Rapier.js via @react-three/rapier
  • Rendering: Three.js via @react-three/fiber
  • Collision Events: Real-time collision detection and visualization

How It Works

The demo creates a heightfield collider from a procedurally generated height array. The terrain is visualized using a Three.js PlaneGeometry with the same height data applied to create a matching visual representation.

Objects are spawned dynamically and fall under gravity, interacting with the terrain through Rapier's collision detection system. Yellow ring indicators appear at collision points to visualize the physics interactions.

Built with @react-three/fiber and @react-three/rapier. Heightfield collision detection powered by Rapier physics engine.