The link component connects between experiences and allows for traversing between VR web pages. When activated via an event, the link component sends the user to a different page, just like a normal web page redirect. To maintain VR across pages, the following conditions must apply:
- The browser is up-to-date with the WebVR specification and implements the
- The destination web page listens to the window [
vrdisplayactivate] event and enters VR. A-Frame experiences behave this way by default.
- At the moment, in-VR navigation is only implemented by Firefox desktop, Oculus Browser, Samsung Internet, and Supermedium.
A link in VR can be anything such as grabbing onto an object, placing something on our head, clicking something, even eating something! We provide a default implementation of links as a portal or window, using a 360° image thumbnail to preview the destination.
The UX of link traversal will continue to refine as we iterate and experiment, both in content and from the browser.
The default UX of the link component as a portal can be interacted with using a cursor or controllers. This is not provided directly in the A-Frame core, but there is a link-controls component in the A-Frame examples. This component shows tooltips and provides button mappings for peeking and entering portals.
We also provide a link primitive with a different syntax:
<a-link href="index.html" title="My Homepage" image="#homeThumbnail"></a-link>
|backgroundColor||Inner (background) color of the portal.||red|
|borderColor||Border color of the portal.||white|
|highlighted||Boolean to toggle link highlight color.||false|
|highlightedColor||Border color when highlighted.||‘#24CAFF’|
|href||Destination URL where the link points to.||‘’|
|image||360° image used as scene preview in the portal. Can be a selector to an
|on||Event to listen to that triggers link traversal.||‘click’|
|peekMode||Whether the 360° image is fully expanded for preview.||false|
|title||Text displayed on the link. The
|titleColor||Color of the text displayed on the link.||white|
|visualAspectEnabled||Whether to enable the default visual appearance of a portal. Set to false if we want to implement our own pattern or form of link traversal.||true|
To navigate manually, use
window.location API. See this StackOverflow question on navigating. For example:
window.location.href = 'https://supermedium.com/supercraft/';