r3f-physics

Add physics-based interactions to React Three Fiber scenes using Rapier.

1|Updated Mar 23, 2026
One-click install
npx skills add https://github.com/sbalagan22/bloomr --skill r3f-physics-sbalagan22
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: r3f-physics
Source: https://github.com/sbalagan22/bloomr/tree/main/.claude/skills/r3f-physics
Command: npx skills add https://github.com/sbalagan22/bloomr --skill r3f-physics-sbalagan22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React Three Fiber physics with Rapier enables realistic physics simulations, rigid bodies, colliders, joints, and sensors to add interactive dynamics to 3D scenes.

Core Features & Use Cases

  • RigidBody, Colliders, and Joints for simulating motion and collisions
  • Sensors for trigger zones and event-driven interactions
  • Gravity, forces, and impulse control for character controllers and interactive objects
  • On-demand physics integration with React Three Fiber via @react-three/rapier

Quick Start

Set up a Canvas with a Physics world, drop a dynamic RigidBody onto a ground collider, and observe gravity and collisions.

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?

Use @react-three/rapier to integrate Rapier physics into React Three Fiber by setting up a Physics world, adding RigidBody components for dynamic objects, and configuring gravity and colliders for collision detection.

How do rigid bodies and colliders work in React Three Fiber physics?

Rigid bodies simulate mass and movement while colliders define collision boundaries, allowing objects to interact through gravity, forces, and impulses within your React Three Fiber physics simulation.

Can I use joints and sensors for interactive simulations in React Three Fiber?

Yes, you can use joints to constrain rigid body movements and sensors to create trigger zones for event-driven interactions, enabling complex interactive simulations and character controllers in React Three Fiber.

Do I need @react-three/rapier to build character controllers in 3D web applications?

Yes, @react-three/rapier provides the necessary physics integration for character controllers in React Three Fiber, supplying rigid bodies, colliders, and impulse controls for interactive 3D web applications.

What is the best way to configure gravity and forces in React Three Fiber?

Configure global gravity and apply forces or impulses to individual RigidBody components using the @react-three/rapier library to achieve realistic physics interactions in React Three Fiber.

Why are my React Three Fiber physics collisions not working?

Collisions may fail if RigidBody components lack properly configured colliders or if the Physics world gravity and dampings are incorrectly set, preventing rigid bodies from registering intersections.