Search code examples
javascriptwebaugmented-realityaframeartoolkit

Using AFrame And ARJs I Want To Augment An Image On A Marker . When I Click Or Touch (Desktop & Mobile) The Image Then It Should Navigate To An URL

I Am Trying To Augment An Image On A Marker (HIRO). When I Click The Image Then It Should Navigate To An URL . It Should work ON Mobile And Desktop Also . I tried All Possible Ways But Its Not Working . In Desktop It Works Sometime and sometimes it does not work. And Click Accuracy Is Not There Also . If i click on the image it wont navigate , I need to click out the bottom part of the image .

I Executed The Code In GLITCH But Its Not Working Properly . Please Modify The Code And Help Me Out .

I Tried All possible ways some times it work some times it doesn't works, the Pointing Accuracy is not there

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>AFRAME ONCLICK-URL</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
​
    <!-- A FRAME -->
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
  <script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"> </script>
     <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>  
  <body>
    <a-scene vr-mode-ui="enabled: false" embedded artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 60; canvasWidth: 200; canvasHeight: 200' arjs='debugUIEnabled: false;'>
    <a-marker id="memarker" preset="hiro">

        <a-entity position="0 0 0">
​
            <a-image src="https://pbs.twimg.com/profile_images/927446347879292930/Fi0D7FGJ_400x400.jpg"  width="0.3" height="0.3" position="0.5 0 0" rotation="-90 0 0" shadow event-set__enter="_event: mouseenter; color: #76D7C4" event-set__leave="_event: mouseleave; color: #FFD700" navigate-on-click="url: https://www.google.com/">
            </a-image>

            <a-image src="https://cdn-images-1.medium.com/max/536/1*oORAGqcJB-2MBl0Dt65D4Q.png" width="0.3" height="0.3" position="-0.5 0 0" rotation="-90 0 0" shadow event-set__enter="_event: mouseenter; color: #76D7C4" event-set__leave="_event: mouseleave; color: #FFD700 " navigate-on-click="url: https://aframe.io/">
                </a-image>
​
        </a-entity>
​
    </a-marker>
    <a-entity camera>
        <a-entity cursor="rayOrigin: mouse;fuse: false;"></a-entity>
    </a-entity>
</a-scene>
  </body>

</html>
​

When i click or touch on the icon or image then it should redirect to a new URL . When Ever I click or touch on the image it should redirect . It Should Work On Both MOBILE AND DESKTOP

Solution

  • Your component is not being registered properly. When including index.js you add the defer attribute, which tells the browser that the script is meant to be executed after the document has been parsed (source)

    Working glitch here.