<head>
<meta aframe-injected="" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,shrink-to-fit=no,user-scalable=no,minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    
      <!--  ---------LIBS & COMPONENTS --------- --> 
          
    <!-- include A-Frame   -->
    <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
    
    <!-- include ar.js for A-Frame -->
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
 
 
  
  </head>
  
  <body>  <!--  ---------BODY --------- --> 
    <a-scene embedded arjs>
     <!-- AR.JS with A-Frame documentation: https://aframe.io/blog/arjs/
          Step by step AR with A-Frame: https://github.com/jeromeetienne/AR.js/blob/master/docs/posts/post-XX-how-to-use-arjs-with-aframe.md-->
    
      
      <!--  ---------ASSETS --------- --> 
    <a-assets>
      <img id="whitesmith_img" crossorigin="anonymous" src="https://scontent.flis5-1.fna.fbcdn.net/v/t31.0-8/p960x960/20229663_705565322965105_5566991771693753796_o.jpg?oh=a10e74a90309205ed5354040fd7d7aab&oe=59ED3A37">
    </a-assets>
    
      
     
       <!--  ---------AR --------- -->   
      
    <!-- define a camera which will move according to the marker position -->
    
    <a-marker preset="hiro">
    <!-- This is a preset marker you can find here https://jeromeetienne.github.io/AR.js/data/images/HIRO.jpg. Just show it to the camera and the image will appear -->
      
    <!-- <a-marker type="pattern" size="2" url="https://cdn.glitch.com/2a1d3f33-8c4f-4985-ab16-4fdd9ff91c67%2Fpattern-marker.patt?1500649950652">
          This is a custom marker created here: https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html -->
      
      <a-plane  src="#whitesmith_img"  width="3" height="1.5"  position="0 0 -1" rotation="-90 0 0 ">  </a-plane>
       <!-- surprise Whitesmith image-->
     
        
    </a-marker>
    
      <!--  here you tell A-Frame that you want ar.js to control the camera
            <a-marker-camera> will make it so that the camera is moving and the marker is static
            If you want the marker to move and camera to be static at all times, you use only <a-marker>-->
      
     
      
    </a-scene>
    
    
  </body>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.