Three.js Rapier Physics Tutorial:
Build a Rocket Lander

What Is Rapier Physics in Three.js? (Quick Definition)

Rapier is a physics engine compiled to WebAssembly. In a Three.js game, Rapier owns the motion: rigid bodies, colliders, forces and contacts. You step the Rapier world at a fixed rate, copy each body's translation() and rotation() onto its mesh, and read collision events to decide what happens, like a landing or a crash.

Introduction

Rocket Lander went live on Indie Forge Studio today with a small physics step written in plain JavaScript. In this tutorial I rebuild that rocket on Rapier: a dynamic body with two colliders, a kinematic pad that really carries it, thrust and steering as forces and torque, wind gusts, and collision events that judge every touchdown. A crash spawns a dozen physics blocks that bounce and settle.

Want the why before the how? The free article Three.js Rapier physics: landing a 3D rocket with real rigid bodies compares Rapier, cannon-es and hand-written physics.

What You'll Learn

• How to load Rapier from a CDN with await RAPIER.init() and create a World
• Fixed, kinematic and dynamic bodies, and when to use each
• How to build one body from two colliders and lock it to a 2D plane
• Thrust with addForce() and PD steering with addTorque()
• Collision events with EventQueue and drainCollisionEvents()
• Spawning and removing debris bodies, and a fixed-timestep loop

Prerequisites

• Basic Three.js: scene, camera, renderer and meshes
• Comfortable with ES modules and an importmap (no build step needed)
• Helpful first: the free Ball vs. Wall collision events tutorial (cannon-es)

Frequently Asked Questions

How It Works

1. Imports, Scene, Camera and Renderer — In plain words: we load three.js and Rapier from a CDN and set up a camera and a full-page canvas to draw on.
2. Lights, Stars and the Moon Surface — In plain words: we light the scene, scatter stars and lay down a grey moon floor with a few craters so motion is easy to read.
3. Start Rapier and Create the World — In plain words: we wait for Rapier's WebAssembly to load, make a physics world with low moon-like gravity, and add a solid floor collider.
4. A Moving Landing Pad — In plain words: the pad is a kinematic body: our code moves it, and Rapier makes everything else respect it.
5. The Rocket Body and Colliders — In plain words: the rocket is one dynamic body with a capsule for the hull and a flat box for the feet, locked so it only moves and tips in the screen's plane.
6. Thrust and Steering as Forces — In plain words: every physics step we clear old forces, push the rocket along its nose when the engine is on, and twist it gently toward the angle the player wants.
7. Wind Gusts — In plain words: every few seconds the wind picks a new strength and direction and eases toward it, pushing the rocket sideways.
8. Input and Autopilot — In plain words: keyboard, mouse or touch fly the rocket; when nobody touches anything for eight seconds an autopilot takes over and lands it.
9. Collision Events Decide Land or Crash — In plain words: Rapier tells us the moment the rocket touches something, and we check speed, drift and tilt to decide if that was a landing.
10. Landing, Crash Debris and Respawn — In plain words: a good landing scores and refuels; a crash hides the rocket and throws a dozen small physics blocks around, then a new rocket drops in.
11. Fixed-Timestep Loop, Camera and HUD — In plain words: physics runs at a steady 60 steps per second whatever the screen's frame rate, then we copy positions onto the meshes, move the camera and update the readout.

That's the shape of the build. The detailed code breakdown for every step and the full copy-paste file are below. Members unlock them.

How To Use It

• Fly it badly on purpose. Come in fast or tipped and watch the collision event turn the rocket into debris.
• Tune the feel. Change gravity, thrust and the steering torque numbers to make it floaty or twitchy.
• Reuse the pattern. Body plus colliders, forces each step, events after the step: the same loop works for cars, balls or falling crates.