How to Create an AR Experience Using JavaScript and 8thWall

 

Have you ever wanted to create an AR experience that magically brings 3D things into your living room without an app?

Guess what? Yes, you can! AR is not only for big-budget developers or stunning native applications anymore. With 8th Wall, you can build interactive AR on the browser with HTML and JavaScript. Basic web dev skills get you halfway there.

I will guide you through creating an AR environment, adding a 3D model, adding JavaScript for interaction, and running it on your phone in this easy guide. Ready to impress your friends with your AR project? Let' go!

 

Why Use 8th Wall for AR?

First of all, Why 8th Wall? Good question.

8th Wall is your AR Swiss Army knife. As a WebAR platform, your experience runs in the mobile browser without app store installations or friction. Click a link, give camera access, and virtual content appears in real life.

World tracking with SLAM (so AR objects "stick" to actual surfaces), image targets, facial effects, and more are fantastic features. 8th Wall projects make use of A-Frame for scenes and components, so you will feel at home.

For JavaScript developers interested in AR, 8th Wall is a good place to start.

Create an 8th Wall Account and Project

Now is the fun part: get your hands dirty.

1. Go to 8thwall.com and make an account for free.
2. Make a new WebAR project once you are in. If you would rather recreate than start from scratch, they have some useful templates you can use.
3. Copy your App Key for project execution on your domain or localhost.

It is like getting the key to your AR game.

Set Up Your Local Dev Environment

Develop locally or on 8th Wall's Cloud Editor (very useful).

Here's how to go local:

• Download or clone their A-Frame starting project from GitHub.
• Your project will include an index.html file, an assets folder, and maybe a main.js file for custom scripts.
• Edit the HTML to include your App Key instead of the placeholder: 

<script async src="https://apps.8thwall.com/xrweb?appKey=YOUR_APP_KEY"></script>

• Install the 8th Wall Chrome Extension to test localhost on your phone, or utilise their hosted preview function for quick testing on a real device.

Simple, right?

Build Your First AR Scene

Now comes the fun—creating something in your space! 

There is a tag in your index.html file. This is how A-Frame works. You will add an AR object, such as a 3D model or shape, inside.

Example: add a simple GLTF 3D model 2 meters in front of the camera:

<a-entity 
  gltf-model="url(assets/robot/scene.gltf)" 
  position= "0 0 -2"
  scale= "0.5 0.5 0.5">
</a-entity>

Not using a model yet? Try a primitive:

<a-box color="red" position="0 0 -2"></a-box>

The X (left-right), Y (up-down), and Z (forward-back) coordinates in A-Frame are easy to understand. Move it around, change the size, and rotate it until it looks right.

The coolest part? 8th Wall's engine detects and anchors surfaces in world space automatically.

Add JavaScript Logic and Interactivity

AR is fun when you can interact with it! Let us make that model respond to tapping.

Start by adding a simple A-Frame component to your main.js:

AFRAME.registerComponent('tap-listener', {
  init: function () {
    this.el.addEventListener('click', () => {
      console.log('You tapped the robot!');
      this.el.setAttribute('scale', '1 1 1'); // Grow!
    });
  }
});

Now, attach this component to your entity:

<a-entity 
  gltf-model="url(assets/robot/scene.gltf)" 
  position= "0 0 -2"
  scale= "0.5 0.5 0.5"
  tap-listener>
</a-entity>

Now, when you tap the robot, it writes down a message and changes its size. You can add animations, swap models, play sound, or even make the object move around with the user from this screen.

Want even more magic from AR? You can place objects on 8th Wall's hit-test API by striking real-world surfaces. Talk about amazing ways to connect!

Test and Deploy Your AR Experience

When you are ready to see your work in action: 

• Test it on a real mobile device; AR will not look good on the screen of a PC.
• Share your project instantly with 8th Wall's preview link. Your friends can scan a QR code to see how it looks in their browser. 
• Change elements about your scene, fix bugs, and do it again until you are satisfied.

When finished, deploy your project on your website and wow people with immediate AR without downloads.

Conclusion

See? It is not only possible to make AR in the browser with JavaScript, but it is also a lot of fun. You can make rich AR experiences that work anywhere with 8th Wall, some HTML, and some A-Frame magic.

What are you going to build first? A pet that sits on your kitchen table? A live demo of the product? A small AR game? Your creativity is the only thing that stops you.