Ray-based interactions in the WebXR scene — click objects, press UI buttons, or distance-grab with DistanceGrabbable. Use when the user wants to point at and interact with something at a distance, click a UI button, or test ray-based selection.
Copy the install command and let the AI configure it · recommended for beginners
Please install the "iwsdk-ray" skill from askskill: 1. Download https://raw.githubusercontent.com/facebook/immersive-web-sdk/main/packages/starter-assets/claude-injections/skills/iwsdk-ray/SKILL.md 2. Save it as ~/.claude/skills/iwsdk-ray/SKILL.md 3. Reload skills and tell me it's ready
Point at and interact with objects or UI elements in the XR scene using the controller ray. The workflow has a required core (steps 1-4) and optional extensions that depend on whether the target is an object or UI element, and what kind of interaction is needed.
User request is in $ARGUMENTS.
These steps always execute in order.
Check session status. If not in an active XR session, accept and enter.
xr_get_session_status → if not sessionActive → xr_accept_session
For scene objects: Find by name using scene_get_hierarchy, then get the UUID.
scene_get_hierarchy → find node matching target name
For UI elements: UI buttons/elements are children of PanelUI entities and may not have names by default. To locate precisely:
id (e.g., <button id="xr-button">)PanelDocument.name = "element-id" on the Object3D returned by getElementById() — this is harmless and makes it discoverablescene_get_hierarchyIf the element already has a name in the hierarchy, skip straight to getting its transform.
If the object is not found, report the available named objects and stop.
Get the target's world position using its UUID from step 2.
scene_get_object_transform(uuid) → use positionRelativeToXROrigin
Point the controller at the target. Default to "controller-right" unless the user specified left. Do NOT move the controller — only rotate it.
xr_look_at({ device: "controller-right", target: { x, y, z } })
The controller ray is now pointing at the target. What happens next depends on the interaction type.
Based on the user's intent and the target's components, choose ONE of the following.
For simple clicks — fires selectstart, select, selectend events. Use for UI buttons and objects that respond to Pressed component.
xr_select({ device: "controller-right" })
This is a quick press-and-release. Done.
DistanceGrabbable requires press and hold on the trigger (button index 0), not a quick select.
xr_set_gamepad_state({
device: "controller-right",
buttons: [{ index: 0, value: 1 }],
})
The object is now distance-grabbed. Behavior depends on the movementMode:
If the user wants to move the object somewhere, animate the controller to the destination.
xr_animate_to({
device: "controller-right",
position: { x, y, z },
duration: 0.5,
})
If no destination specified but user asked to "move" or "bring" the object, animate to in front of the headset: xr_get_transform({ "device": "headset" }) → place at (head.x, head.y - 0.2, head.z - 0.5).
xr_set_gamepad_state({
device: "controller-right",
buttons: [{ index: 0, value: 0 }],
})
Animate back to resting position.
xr_animate_to({
device: "controller-right",
position: { x: 0.2, y: 1.4, z: -0.3 },
duration: 0.5,
})
Default resting positions: right (0.2, 1.4, -0.3), left (-0.2, 1.4, -0.3).
Take a screenshot to confirm the result.
browser_screenshot
…
Plan IWSDK features, architecture, and code patterns with best-practice guidance.
Test XR session lifecycle and mode transitions to verify behavior and debug state issues.
Build, debug, and refine IWSDK PanelUI panels more efficiently.
Test multiple grab interaction modes with the iwsdk CLI.
Test XR interactions, panels, and audio behavior with the iwsdk CLI.
Find and click XR target objects to verify UI interactions work correctly.