Skip to content

Variable: Interactable

const Interactable: Component<{ }>

Defined in: packages/core/src/input/state-tags.ts:36

Marks an entity as eligible for XR/UI pointer interaction.

Remarks

  • The InputSystem discovers all entities with Interactable and, when XR visibility is Visible, registers their Object3D roots as raycast targets (computing BVHs for meshes to accelerate intersection tests).
  • When a pointer enters/leaves or presses/releases on the entity, the system adds/removes the transient tags Hovered and Pressed so other systems can react declaratively without manual event wiring.
  • Add this tag to the root Object3D of your UI/interactive object. Children are implicitly covered because the InputSystem registers the whole subtree.

Example

ts
export class HighlightSystem extends createSystem({ items: { required: [Interactable] } }) {
  update() {
    this.queries.items.entities.forEach(e => {
      e.object3D.visible = !e.hasComponent(Pressed);
      e.object3D.material.emissiveIntensity = e.hasComponent(Hovered) ? 1.0 : 0.0;
    });
  }
}