Skip to main content
Enables mouse-driven interaction with physics bodies. Hold Ctrl/Cmd and drag to pull bodies with a spring force.

​
Usage

<MujocoCanvas config={config}>
  <DragInteraction />
</MujocoCanvas>

​
Custom Stiffness

<DragInteraction stiffness={500} showArrow={false} />

​
Props

​
stiffness
number
default:"250"
Spring stiffness multiplier. The actual force is (mouseWorld - grabPoint) * body_mass * stiffness.
​
showArrow
boolean
default:"true"
Show a red arrow indicating the drag direction and force magnitude.

​
How It Works

  1. Ctrl/Cmd + Click on a body starts the drag
  2. The component raycasts to find the clicked body and grab point
  3. Each frame, a spring force is computed: F = (mouseWorld - grabWorld) * mass * stiffness
  4. The force is applied via useBeforePhysicsStep, adding to qfrc_applied
  5. Releasing the mouse ends the drag
The Ctrl/Cmd modifier is required to avoid conflicting with OrbitControls.

​
Notes

  • Forces are applied in the useBeforePhysicsStep callback, composing correctly with other force sources
  • The arrow visual is a Three.js ArrowHelper updated each frame
  • Body 0 (world body) cannot be dragged