Im working on AFrame and AR.js for Business card , i want to add a link inside the scene as a button or 3d model

69 Views Asked by At

i have given the HTML code please let me know How to bring UI interaction in Scene.this Google link inside the script is overlayed bt the scene ,,If camera turns on that link goes behind the camera scene.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WebAR Image Buttons</title>
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
  <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
  
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  <script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"></script>
</head>
<body style='margin: 0px; overflow: hidden;'>
  <div class="scene">
  <a-scene embedded arjs>
    <!-- Create a button image that opens Business card detail -->
    
    
    <a-image position='0 0.5 0' rotation='0 0 0' src="https://raw.githubusercontent.com/Shivaprasad0703/KB-Sir/main/WEBAR/KB%20sir%20Business%20card.jpg">
      
    </a-image>

    <!-- Create another button image that opens Linkedin  -->
    <a-image position='-1 0.5 0' rotation='0 0 0' src="https://raw.githubusercontent.com/Shivaprasad0703/KB-Sir/main/WEBAR/t05_Dr-KB.jpg"
   >
    </a-image>
    

    <!-- Define a camera which will move according to the marker position -->
    <a-marker-camera preset='hiro'></a-marker-camera>
     
  </a-scene>
  </div>
  
  <div><a href="www.google.com" class="link">google</a></div>
  
</body>
</html>

ANY ans, Documentation or any example code is helpul

0

There are 0 best solutions below