auto-vr

The auto-vr component simplifies VR mode entry by automatically detecting VR capability and providing options to enter VR mode without user interaction. It also creates a customizable VR button and handles VR session state management.

Example

Below is an example of using the auto-vr component to automatically enter VR mode when available:

import "spatial-design-system/components/autoVr.js";

<!-- Set up controllers directly on the scene -->
<a-scene auto-vr="autoEnter: true">
    <a-camera></a-camera>
</a-scene>

Props

Property	Type	Default	Description
autoEnter	boolean	true	Whether to automatically enter VR mode when available
createButton	boolean	true	Whether to create a custom VR button
buttonText	string	"Enter VR"	Text displayed on the VR button
pollInterval	number	2000	Polling interval in milliseconds to check for VR support
maxAttempts	number	10	Maximum number of attempts to enter VR mode

How It Works

1. The component detects VR capabilities using both WebXR and older WebVR APIs
2. If autoEnter is enabled, it attempts to enter VR mode when the scene loads
3. If VR is not initially available, it polls at regular intervals up to maxAttempts
4. If createButton is enabled, it creates a floating VR button that users can click
5. The component handles VR display connection/disconnection events
6. When exiting VR mode, the button text changes back to the specified buttonText

Events

The component works with standard A-Frame VR events that you can listen for:

// Listen for VR mode entry
document.querySelector('a-scene').addEventListener('enter-vr', ()=>{
    // Perform actions based on the interaction
});

// Listen for VR mode exit
document.querySelector('a-scene').addEventListener('exit-vr', ()=>{
    // Perform actions based on the interaction
});