使用AFrame和ARJ我想在标记上增加图像。当我点击或触摸(桌面和移动)图像然后它应导航到URL

问题描述 投票:0回答:1

我试图在标记(HIRO)上增加图像。当我单击图像然后它应该导航到URL。它应该在移动和桌面上工作。我尝试了所有可能的方法,但它不起作用。在桌面它工作有时,有时它不起作用。并且点击准确度也不存在。如果我点击它不会导航的图像,我需要点击图像的底部。

我在GLITCH执行了该代码,但它没有正常工作。请修改代码并帮助我。

我试过所有可能的方式,有时它有时会工作它不起作用,指点准确性不存在

<!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>
​

当我点击或触摸图标或图像时,它应该重定向到新的URL。当我点击或触摸图像时,它应该重定向。它应该在MOBILE和DESKTOP上工作

javascript web augmented-reality aframe artoolkit
1个回答
0
投票

您的组件未正确注册。当包含index.js时,你添加了defer属性,它告诉浏览器在解析文档后要执行脚本(source

工作故障here

© www.soinside.com 2019 - 2024. All rights reserved.