R3f Physics
Wire Rapier rigid bodies, colliders, forces, and joints into React Three Fiber scenes for collision and interactive 3D.
Overview
r3f-physics is an agent skill for the Build phase that adds Rapier physics—RigidBody, colliders, forces, joints, and sensors—to React Three Fiber scenes.
Install
npx skills add https://github.com/enzed/r3f-skills --skill r3f-physicsWhat is this skill?
- Quick-start Canvas scene with Physics, RigidBody, and CuboidCollider ground
- Documents Physics world props: gravity, debug wireframes, timeStep, paused
- npm install path for @react-three/rapier
- Covers RigidBody, colliders, forces, joints, and sensors per skill description
- Suspense-wrapped pattern for loading the physics world inside R3F
Adoption & trust: 670 installs on skills.sh; 89 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have an R3F scene but meshes do not collide, fall, or respond to forces because no physics world or colliders are configured.
Who is it for?
Solo builders shipping WebGL games, 3D demos, or interactive landing experiences who already use @react-three/fiber.
Skip if: Teams building 2D-only React UIs, native mobile game engines, or backends with no Three.js dependency.
When should I use this skill?
Adding physics simulation, collision detection, character controllers, or creating interactive physics-based experiences in React Three Fiber.
What do I get? / Deliverables
After the skill runs, your Canvas includes a Rapier Physics world with rigid bodies and colliders so objects simulate gravity, contact, and interactive physics behavior.
- Physics-wrapped R3F scene code with RigidBody and colliders
Recommended Skills
Journey fit
How it compares
Procedural R3F + Rapier integration guidance, not a hosted physics SaaS or a generic Three.js modeling tutorial.
Common Questions / FAQ
Who is r3f-physics for?
Indie and solo developers using React Three Fiber who need Rapier-based collision, rigid bodies, joints, or sensors in the browser.
When should I use r3f-physics?
During Build (frontend) when adding physics simulation, collision detection, character controllers, or interactive physics-based 3D experiences to an existing or new R3F project.
Is r3f-physics safe to install?
Review the Security Audits panel on this Prism page and inspect the skill package in your repo before granting agent file or shell access.
SKILL.md
READMESKILL.md - R3f Physics
# React Three Fiber Physics (Rapier) ## Quick Start ```tsx import { Canvas } from '@react-three/fiber' import { Physics, RigidBody, CuboidCollider } from '@react-three/rapier' import { Suspense } from 'react' function Scene() { return ( <Canvas> <Suspense fallback={null}> <Physics debug> {/* Falling box */} <RigidBody> <mesh> <boxGeometry /> <meshStandardMaterial color="orange" /> </mesh> </RigidBody> {/* Static ground */} <CuboidCollider position={[0, -2, 0]} args={[10, 0.5, 10]} /> </Physics> </Suspense> <ambientLight /> <directionalLight position={[5, 5, 5]} /> </Canvas> ) } ``` ## Installation ```bash npm install @react-three/rapier ``` ## Physics Component The root component that creates the physics world. ```tsx import { Physics } from '@react-three/rapier' <Canvas> <Suspense fallback={null}> <Physics gravity={[0, -9.81, 0]} // Gravity vector debug={false} // Show collider wireframes timeStep={1/60} // Fixed timestep (or "vary" for variable) paused={false} // Pause simulation interpolate={true} // Smooth rendering between physics steps colliders="cuboid" // Default collider type for all RigidBodies updateLoop="follow" // "follow" (sync with frame) or "independent" > {/* Physics objects */} </Physics> </Suspense> </Canvas> ``` ### On-Demand Rendering For performance optimization with static scenes: ```tsx <Canvas frameloop="demand"> <Physics updateLoop="independent"> {/* Physics only triggers render when bodies are active */} </Physics> </Canvas> ``` ## RigidBody Makes objects participate in physics simulation. ### Basic Usage ```tsx import { RigidBody } from '@react-three/rapier' // Dynamic body (affected by forces/gravity) <RigidBody> <mesh> <boxGeometry /> <meshStandardMaterial color="red" /> </mesh> </RigidBody> // Fixed body (immovable) <RigidBody type="fixed"> <mesh> <boxGeometry args={[10, 0.5, 10]} /> <meshStandardMaterial color="gray" /> </mesh> </RigidBody> // Kinematic body (moved programmatically) <RigidBody type="kinematicPosition"> <mesh> <sphereGeometry /> <meshStandardMaterial color="blue" /> </mesh> </RigidBody> ``` ### RigidBody Types | Type | Description | |------|-------------| | `dynamic` | Affected by forces, gravity, collisions (default) | | `fixed` | Immovable, infinite mass | | `kinematicPosition` | Moved via setNextKinematicTranslation | | `kinematicVelocity` | Moved via setNextKinematicRotation | ### RigidBody Properties ```tsx <RigidBody // Transform position={[0, 5, 0]} rotation={[0, Math.PI / 4, 0]} scale={1} // Physics type="dynamic" mass={1} restitution={0.5} // Bounciness (0-1) friction={0.5} // Surface friction linearDamping={0} // Slows linear velocity angularDamping={0} // Slows angular velocity gravityScale={1} // Multiplier for gravity // Collider generation colliders="cuboid" // "cuboid" | "ball" | "hull" | "trimesh" | false // Constraints lockTranslations={false} // Prevent all translation lockRotations={false} // Prevent all rotation enabledTranslations={[true, true, true]} // Lock specific axes enabledRotations={[true, true, true]} // Lock specific axes // Sleeping canSleep={true} ccd={false} // Continuous collision detection (fast objects) // Naming (for collision events) name="player" /> ``` ## Colliders ### Automatic Colliders Rigi