AR.js A-Frame location-based href links issues

user_2060804 0
Viewed 551

I've started looking at AR.js with A-frame. I've adapted this example : projected base camera to display a marker (as an <a-image>). I've also tried adding text and a link.

The <a-image> works, but the "link" component does not.

A separate <a-link> displays, but on tapping or clicking the browser does not navigate to the href; it stays on the current page.

I've been able to test on Safari and Chrome, on both iPad and iPhone, latest versions of iOS.

Can anyone help?

Here is the code:

<!DOCTYPE html>
<html>
  <head>
    <title>AR.js Basic Projected Camera Example</title>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
  </head>
  <body style='margin: 0; overflow: hidden'>
  <a-scene 
    vr-mode-ui='enabled: false' 
    embedded 
    arjs='sourceType: webcam; debugUIEnabled: false'
  >
    <a-assets>
      <img id="my-image" src="../img/markers/map-marker-1-orange.png" scale="10 10 10">
    </a-assets>
    <a-camera 
     gps-projected-camera='simulateLatitude: 51.049; simulateLongitude: -0.723' 
     rotation-reader
    >
    </a-camera>
    <a-image src="#my-image" 
      look-at="[gps-projected-camera]"
      height="50"
      width="50"
      link="href: page.html"
      gps-projected-entity-place="latitude: 51.0486; longitude: -0.7226">
    </a-image>
    <a-link 
      look-at="[gps-projected-camera]"
      href="page.html"
      title="Quercus robur"
      gps-projected-entity-place="latitude: 51.0489; longitude: -0.7240"
    >
    </a-link>
  </a-scene>
  </body>
</html>
ar.js aframe javascript
1 Answers

I needed to add

cursor='rayOrigin: mouse; fuse: true; fuseTimeout: 0;'
raycaster="objects: [gps-projected-entity-place];"

to <a-scene>

as described here: Location based AR on the web

giving:

<a-scene 
  cursor='rayOrigin: mouse; fuse: true; fuseTimeout: 0;'
  raycaster="objects: [gps-projected-entity-place];"
  vr-mode-ui='enabled: false' 
  embedded 
  arjs='sourceType: webcam; debugUIEnabled: false'
>
user_20608040
Related