AR/VR World Tracking – Floating Buttons

This example shows two buttons in space in front of the user. A short animation plays when the user 'clicks' on the each of the buttons with a controller or hand.

It uses the 'XR Rig AR' rig, supporting headsets such as Quest and Magic Leap, and handheld AR on Google Chrome on Android. In each case 'passthrough' mode is enabled, allowing the user to see their real world environment.

The buttons are implemented in a shared 'Button' component, which you can find in the 'Button' folder. Changes to that shared component apply to both buttons in the Scene. The component exposes two properties - `text`, allowing the parent component to provide the title of the button, and `onClick` allowing the parent component to attach behaviors or event handlers for when the user 'clicks' the button with a controller or hand.

Be sure to check out the Animations panel in the Scene component - that's where the button animations are defined.

This project includes a default splash page - a 'launch' screen shown to the user when they first land on your page. It's important for both technical and user experience related reasons. You can customize it in the index.html file.