This project demonstrates how to create ragdoll physics using RapierJS for physics and Three.js for rendering along with a Blender mesh (Blender file included).
Demo: RapierJS Ragdoll
- Ragdoll physics simulation with articulated joints.
- Real-time physics debugging with a toggleable debug renderer.
- Add multiple ragdolls dynamically.
- Tweak parameters like gravity and toggle debug mode via a GUI.
- Syncs 3D GLTF model bones to physics bodies.
Clone this repository and install the dependencies:
npm install
Start the development server:
npm run dev
Then open your browser to the local address provided (usually http://localhost:5173).
- Physics World: Created using
@dimforge/rapier3d-compat. - Graphics: Handled by Three.js.
- Ragdoll: Each body part is a dynamic rigid body. Joints are created using spherical joints to simulate articulation.
- GLTF Model: Loaded and colored dynamically. Each bone is mapped to a physics body.
- Synchronization: The position and rotation of each physics body are used to update the corresponding bone's transformation every frame.
- Left Mouse Button: Orbit camera around.
- Scroll Wheel: Zoom in/out.
- Right Mouse Button: Pan camera.
- Tweakpane UI:
- Add Ragdolls
- Toggle physics debug view
- Adjust gravity
- Ensure the GLB model has bones properly named as per the bone mapping in
Ragdoll.ts. - The project uses DRACO compression to optimize 3D model loading.
This project is open-source and available under the MIT License.