Skip to main content
A component wrapper for contact event subscriptions. Fires callbacks when a body starts or stops touching other bodies.

​
Usage

<MujocoCanvas config={config}>
  <ContactListener
    body="cube"
    onContactEnter={(info) => console.log("Touch!", info.geom2Name)}
    onContactExit={(info) => console.log("Released!", info.geom2Name)}
  />
</MujocoCanvas>

​
Props

​
body
string
required
Name of the MuJoCo body to monitor for contacts.
​
onContactEnter
(info: ContactInfo) => void
Fired when a new contact begins (geom pair not in previous frame’s contacts).
​
onContactExit
(info: ContactInfo) => void
Fired when a contact ends (geom pair was in previous frame but not current).

​
ContactInfo

interface ContactInfo {
  geom1: number;
  geom1Name: string;
  geom2: number;
  geom2Name: string;
  pos: [number, number, number];
  depth: number;
}

​
Example: Pickup Detection

function PickupDetector() {
  const [holding, setHolding] = useState(false);

  return (
    <>
      <ContactListener
        body="gripper_left"
        onContactEnter={(info) => {
          if (info.geom2Name === "cube") setHolding(true);
        }}
        onContactExit={(info) => {
          if (info.geom2Name === "cube") setHolding(false);
        }}
      />
      {holding && <Billboard>Holding cube!</Billboard>}
    </>
  );
}

​
Notes

  • This is a component wrapper around the useContactEvents hook
  • Contact transitions are computed by diffing the contact list frame-to-frame
  • Renders nothing visually