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.

import "spatial-design-system/components/controllers.js";
import "spatial-design-system/components/vrinteractive.js";

<a-scene>
  <a-entity id="rig" position="0 1.6 0" controllers>
    <a-camera></a-camera>
  </a-entity>
  
  <!-- Interactive objects with custom highlighting and controller buttons -->
  <a-box position="-1 3 -3" color="#03FCC6" vr-interactive="
    highlightColor: #ffff00;
    enabledButtons: trigger, grip;
  "></a-box>
  
  <a-sphere position="1 3 -3" color="#03FCC6" vr-interactive="
    highlightEnabled: false;
    scaleOnClick: 0.8;
  "></a-sphere>
</a-scene>

Props

Property	Type	Default	Description
enabledButtons	array	["trigger", "grip", "a", "b", "x", "y"]	Controller buttons that will trigger interaction with the object
clickAnimation	boolean	true	Whether to animate the object when clicked
highlightEnabled	boolean	true	Whether to show visual highlighting when pointing at the object
highlightColor	color	#666666	Color of the highlight effect
highlightOpacity	number	1.0	Opacity of the highlight effect (0.0-1.0)
borderWidth	number	2	Width of the highlight border
scaleOnClick	number	0.9	Scale factor applied to the object when clicked (0.9 = 90% of size)

Events

Event	Properties	Description
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:

<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:

<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:

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