r3f-physics

Implements Rapier physics simulation in React Three Fiber scenes with rigid bodies, colliders, and joints.

1|Updated Aug 20, 2023
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill r3f-physics-imanlangaran
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: r3f-physics
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/r3f-physics
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill r3f-physics-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @react-three/rapier, @react-three/fiber, @react-three/rapier-addons.

What problem does it solve? Adding realistic physics to React Three Fiber 3D scenes requires wiring up the Rapier physics engine correctly—rigid bodies, colliders, forces, joints, and collision events all have specific APIs that are easy to misuse. This Skill provides complete, working patterns for every common physics scenario so you can build interactive 3D experiences without digging through documentation. ## Core Features & Use Cases - Rigid Bodies & Colliders: Create dynamic, fixed, and kinematic bodies with automatic or manual colliders (cuboid, ball, hull, trimesh, capsule, and more). - Forces, Joints & Sensors: Apply impulses and continuous forces, connect bodies with fixed, revolute, spherical, prismatic, spring, and rope joints, and detect overlaps with sensor colliders. - Collision Events & Groups: Handle collision enter/exit callbacks, filter interactions with collision groups, and access the Rapier world for gravity changes, manual stepping, and state snapshots. - Use Case: Build a physics-based game where a player knocks over stacked boxes, triggers a goal sensor, and swings from a rope joint—all configured declaratively in JSX. ## Quick Start Ask the AI to add Rapier physics to your React Three Fiber scene, for example by creating a falling box that collides with a static ground plane.

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?

Install @react-three/rapier and wrap your scene objects in the Physics component inside Canvas. Add RigidBody components around meshes to make them dynamic, and use fixed RigidBody or standalone colliders for static ground and walls.

How do I apply forces to a rigid body in react-three-rapier?

Attach a ref of type RapierRigidBody to the RigidBody, then call applyImpulse for one-time pushes or addForce for continuous forces, typically inside useFrame. You can also use applyTorqueImpulse and addTorque for rotational forces.

Which collider type should I use for performance in Rapier?

Cuboid and ball colliders are the fastest and should be preferred. Use convex hull for complex dynamic shapes and reserve trimesh for static concave geometry, since trimesh on dynamic bodies is expensive.

How do I detect when two objects collide in react-three-rapier?

Pass onCollisionEnter and onCollisionExit callbacks to RigidBody or individual colliders. For overlap detection without physical response, mark a collider as a sensor and use onIntersectionEnter and onIntersectionExit.

Can I connect two rigid bodies with joints in Rapier?

Yes, react-three-rapier provides hooks like useFixedJoint, useRevoluteJoint, useSphericalJoint, usePrismaticJoint, useSpringJoint, and useRopeJoint. Pass refs of both bodies plus anchor positions and axes in local space.

Why is my physics simulation slow with many objects?

Too many active dynamic bodies or expensive trimesh colliders degrade performance. Use InstancedRigidBodies for many identical objects, enable sleeping, restrict interactions with collision groups, and prefer simple collider shapes.