Appearance

On this page

Interactables ​

Nodes in a scene can be marked as having an interactable behavior. There are currently two different types of interactables that can be specified:

  • WebSG.InteractableType.Interactable: The object tracks if it's been pressed, held, or released.
  • WebSG.InteractableType.Grabbable: The object is made grabbable and can be picked up and moved around.

Interactable ​

Interactables are used for any object that you want add a custom behavior to when interacted with. For example, you might want to add a button to toggle the lights in a room.

js
world.onload = () => {
  const lightSwitch = world.findNodeByName("LightSwitch");
  // Note: LightSwitch must already have a collider and physics body defined
  materialButton.addInteractable(); // Default is InteractableType.Interactable

  let lightSwitchState = false;

  world.onupdate = () => {
    // Get the interactable pressed state.
    if (lightSwitch.interactable.pressed) {
      lightSwitchState = !lightSwitchState;
      // Toggle the light
    }
  };
};

Grabbable ​

Grabbables are used for any object that you want to be able to pick up and move around. For example, you might want to add a ball that you can pick up and throw.

js
const ball = world.createNode({
  mesh: sphereMesh,
});

// You must specify a collider and physics body before adding the grabbable interactable behavior
ball.collider = world.createCollider({
  type: WebSG.ColliderType.Sphere,
  radius: 0.5,
});

// Make sure the physics body is rigid so it moves when grabbed
ball.addPhysicsBody({
  type: WebSG.PhysicsBodyType.Rigid,
  mass: 1,
});

// Add the interactable behavior after adding the physics body
ball.addInteractable({
  type: WebSG.InteractableType.Grabbable, // Make the ball grabbable
});

For a more complete example, see Part 1 of the WebSG tutorial series.