Development

  1. After accessing your project files, edit the project by pushing the Remix button. This will copy everything into your own project.


  1. The code to edit is in index.html.

  2. We will start by adding a new JavaScript library, A-Frame AR, which will provide our Augmented Reality abilities. Add this <script> tag underneath the A-Frame one:

    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
    
  3. Next, we need to set up our A-Frame AR scene. Add these attributes to the <a-scene> element:

    embedded arjs="sourceType: webcam;"
    

    So the element will look like this:

    <a-scene embedded arjs="sourceType: webcam;">
    
  4. Now, we need to tell A-Frame AR what marker we want to detect in the real world and augment. Add this underneath the <a-assets>:

    <a-marker preset="pattern" type="pattern" url="https://cdn.glitch.com/548c358d-9b53-4e28-9ca1-c119ef2bfe7f%2Fpattern-marker.patt?1536834951374">
    </a-marker>
    

    This points towards a pattern file made from our Samsung Internet AR marker image. The pattern file was made using this generator tool.

  5. Next, we can define what virtual object(s) we want to appear on top of the marker when it is detected through the camera. Add the following inside the <a-marker ...> </a-marker> section:

    <a-entity obj-model="obj:#lighthouse-obj;mtl:#lighthouse-mtl" scale="2 2 2"></a-entity>
    
  6. Finally we need to add one more thing inside our <a-scene>, a camera element:

    <a-entity camera></a-entity>
    
  7. Your code should now be ready! Run it by clicking Show button. Try pointing the AR marker print-out in front of your computer’s camera, and you should see a Lighthouse appear above it.

  8. Now, try it out on the Samsung Internet browser of your phone. Just visit the same URL and do the same steps discussed. Remember to accept the camera permission prompt.


You're done!

Congratulations! You have successfully achieved the goal of this Code Lab activity. Now, you can create an AR environment on Samsung Internet.