DraggableRigidBody — physics-based drag and drop for React Three Fiber

This demo drops six procedural rigid bodies — a cube, a sphere, a dodecahedron, an octahedron, a capsule and a glossy ball — into a visible bounding box simulated by react-three-rapier. Grab one with the pointer and fling it: the drag is driven by @use-gesture/react, which projects the pointer onto a plane and moves an invisible proxy mesh; the real body follows through the physics solver instead of being teleported, so momentum, collisions and the walls of the box all keep working while you hold it. Switching the joint control from None to Spring or Jelly links the body to its handle with a rapier spring joint, giving the wobbly, lagging follow, and gravity is editable live from the panel.

DraggableRigidBody is not published on npm: you copy DraggableRigidBody.tsx and CustomDragControls.tsx from the DraggableRigidBody repository on GitHub into your project and install three, @react-three/fiber, @react-three/rapier, @react-three/drei and @use-gesture/react alongside it. CustomDragControls is a modified drei DragControls that fixes overlapping drags.

More experiments on the three.js and WebGL demo hub, and the rest of the work on Niccolò Fanton's portfolio.