grabbable

The grabbable component adds an interactive grab effect to any A‑Frame entity. When a hand intersects the entity’s oriented bounding box (via the companion obb-collider component) and create pinch gesture (grabs the object), user is able to move the object around and drop it elsewhere.

Disclaimer

This components comes from A‑Frame and is not part of Spatial Design System. This page only demonstrates how to use it with SDS component hands.

Example

This component is mainly prepared for hand gestures. You should use it with the hands component and test it on XR devices, that support hand gestures (e.g. Meta Quest Pro).

import 'spatial-design-system/components/autoXr.js';
import 'spatial-design-system/components/hands.js';

<a-scene auto-xr>
  <a-entity id="rig" hands></a-entity>
  <a-box position="0 1.5 -0.5" grabbable></a-box>
</a-scene>

Events

When used together with the SDS hands component, each hand entity emits the following events so you can build interactions on top of grabbing:

Event	Parameters	Description
grabstarted	{ grabbedEl: HTMLElement }	Emitted when a hand grabs an object. Returns the grabbed entity.
grabended	{ grabbedEl: HTMLElement }	Emitted when a hand releases a grabbed object. Returns the released entity.

These events bubble, so you can listen on the hand entity or on the scene:

document.querySelector('a-scene').addEventListener('grabstarted', (event) => {
  console.log('grabbed', event.detail.grabbedEl);
});

How It Works

Component handsuses under the hood A‑Frame component hand-tracking-grab-controls to detect pinch gesture and grab the object.

Limitations

• Must be used in conjunction with the hands component and a hand-tracking-enabled XR device. It is not supported in mobile browsers.