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