Skip to content

vr-interactive

The vr-interactive component adds enhanced interactivity to A-Frame entities when using VR controllers. It provides visual feedback through highlighting, handles controller button events, and animates elements on interaction.

Example

Below is an example of using the vr-interactive component with objects in a VR scene:

Props

PropertyTypeDefaultDescription
enabledButtonsarray["trigger", "grip", "a", "b", "x", "y"]Controller buttons that will trigger interaction with the object
clickAnimationbooleantrueWhether to animate the object when clicked
highlightEnabledbooleantrueWhether to show visual highlighting when pointing at the object
highlightColorcolor#666666Color of the highlight effect
highlightOpacitynumber1.0Opacity of the highlight effect (0.0-1.0)
borderWidthnumber2Width of the highlight border
scaleOnClicknumber0.9Scale factor applied to the object when clicked (0.9 = 90% of size)

Events

EventPropertiesDescription
click{ source: "vr-controller", button: "trigger" }Emitted when the object is clicked with a VR controller

Usage with Controllers

This component is designed to work with the controllers component. The controllers create the raycasters and button events, while vr-interactive handles the interaction response.

Controller Button Types

The enabledButtons property accepts the following button names:

  • trigger: Main trigger button (index finger)
  • grip: Side grip button (middle finger)
  • a/b: Primary buttons on right controller
  • x/y: Primary buttons on left controller

For example, to only allow interaction with the trigger button:

html
<a-box vr-interactive="enabledButtons: trigger"></a-box>

Customizing Highlighting

The highlight effect creates an outlined edge around the object. You can customize its appearance:

html
<a-sphere vr-interactive="
  highlightColor: #ff0000;
  highlightOpacity: 0.8;
  borderWidth: 3
"></a-sphere>

Handling Click Events

You can listen for click events from your component:

html
<script>
  yourElement.addEventListener('click', () => {
    // Perform actions based on the interaction
  });
</script>