R3f Physics

This brings React Three Fiber physics through the Rapier engine, giving you RigidBody components, colliders, forces, and joints for 3D web scenes. You wrap your meshes in RigidBody tags, set types like dynamic or fixed, and let gravity and collisions handle the rest. The colliders auto-generate from geometry or you can place them manually with CuboidCollider, BallCollider, and friends. Forces apply through refs with methods like applyImpulse and addForce. It's genuinely well designed for the R3F ecosystem, the debug wireframes are helpful, and the on-demand rendering integration means physics don't tank your frame rate when nothing's moving.

skills.sh installs: 2K
GitHub stars: 135
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add enzed/r3f-skills --skill r3f-physics --agent claude-code

Installs into .claude/skills of the current project.

Files

React Three Fiber physics

Check installed Fiber, React, and Rapier versions. Rapier 2 targets Fiber 9 / React 19; older projects need their compatible package line. Keep rendering and simulation ownership separate.

Falling and clickable body

Mount beneath Canvas with lighting. Physics loads WASM asynchronously; include Suspense. Cuboid collider arguments are half-extents, unlike BoxGeometry's full dimensions.

import { Suspense, useRef } from 'react'
import { CuboidCollider, Physics, RigidBody, type RapierRigidBody } from '@react-three/rapier'

function FallingBox() {
  const body = useRef<RapierRigidBody>(null)
  return (
    <RigidBody ref={body} position={[0, 2, 0]} colliders="cuboid" restitution={0.2}>
      <mesh name="physics-box" onClick={() => body.current?.applyImpulse({ x: 0, y: 3, z: 0 }, true)}>
        <boxGeometry />
        <meshStandardMaterial color="coral" />
      </mesh>
    </RigidBody>
  )
}

SKILL.md on GitHub