r3f-physics

Enable physics-based interactivity in React Three Fiber scenes with Rapier collisions and joints.

Updated Mar 18, 2025
One-click install
npx skills add https://github.com/utsavm81098/88-residences --skill r3f-physics-utsavm81098
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: r3f-physics
Source: https://github.com/utsavm81098/88-residences/tree/main/.agents/skills/r3f-physics
Command: npx skills add https://github.com/utsavm81098/88-residences --skill r3f-physics-utsavm81098

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables physics-based interactions in React Three Fiber scenes using Rapier for realistic collisions, joints, and sensors.

Core Features & Use Cases

  • RigidBody dynamics with dynamic, fixed, and kinematic bodies
  • A variety of colliders (cuboid, ball, hull, trimesh) and manual colliders
  • Joint systems: fixed, revolute, spherical, prismatic, spring, rope, motorized
  • Collision and sensor events, debugging, and world access
  • Instanced physics for many objects and easy integration with React components
  • Use cases include character controllers, interactive simulations, puzzle mechanics, and dynamic environments

Quick Start

Initialize a Canvas with a Physics world and place RigidBody and Colliders to start simulating.

Frequently Asked Questions about r3f-physics

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add physics to a React Three Fiber scene?

Add physics to React Three Fiber by initializing a Canvas with a Physics world and wrapping objects in RigidBody components. This enables Rapier-based rigid bodies, colliders, and joints for realistic 3D collisions and interactions.

What types of colliders and rigid bodies does Rapier support in R3F?

Rapier in R3F supports dynamic, fixed, and kinematic RigidBody types. Available colliders include cuboid, ball, hull, trimesh, and manual colliders, allowing diverse physics interactions and precise collision shape matching.

Can I create character controllers and interactive joints using React Three Fiber physics?

Yes, you can build character controllers and interactive simulations using joint systems like fixed, revolute, spherical, prismatic, spring, rope, and motorized joints, alongside collision and sensor events for dynamic environments.

Do I need to manually step the Rapier physics world in React Three Fiber?

Manual stepping is supported but not required. @react-three/rapier handles the physics loop automatically, but you can integrate manual stepping, access world snapshots, and listen to collision events for advanced control.

How do collision sensors and events work in R3F physics simulations?

Collision and sensor events trigger callbacks when RigidBody colliders intersect, allowing you to detect interactions without generating physical responses. This is useful for puzzle mechanics, triggers, and interactive environment logic.

What is the best way to simulate many physics objects in React Three Fiber?

Use instanced physics to efficiently simulate many objects in React Three Fiber. This approach integrates Rapier colliders and rigid bodies with React components, maintaining performance for complex dynamic environments.