High School Project

Welcome to another exciting project in the “Future Innovators: Cool STEM Projects to Change the World” series! In this tutorial, you’ll build an Augmented Reality (AR) Environment Explorer that allows users to explore their surroundings in real time using AR technology. You’ll learn how to overlay information, graphics, and interactive elements onto the real world, creating an immersive and educational experience.

By the end of this project, you’ll have created an app that can identify objects, show fun facts about the environment, and allow users to interact with the AR world through their device’s camera. We’ll use web-based AR tools, so there’s no need for special equipment!

What You Will Learn

  • How Augmented Reality (AR) works and how it differs from Virtual Reality (VR).
  • How to use AR.js (a simple JavaScript library for building web-based AR apps).
  • How to overlay digital content onto the real world using a mobile device or webcam.
  • How to create interactive elements in AR using HTML, CSS, and JavaScript.

STEM Learning Process

1. Science: Learn how technology can blend digital and physical environments in real time.
2. Technology: Explore AR tools and learn how to code interactive experiences using JavaScript.
3. Engineering: Build a functional AR app that enhances the user’s environment with educational and fun elements.
4. Math: Use coordinate systems and geometric shapes to position and align virtual objects in the real world.

What You Need

Software Requirements:

  • A computer with a web browser (Chrome or Firefox recommended).
  • A webcam or mobile device camera.
  • AR.js library for web-based AR.
  • A-Frame for building 3D environments in AR.

Tools and Libraries:

  • AR.js: A JavaScript library for building simple AR experiences in a web browser.
  • A-Frame: A web framework for building virtual and augmented reality experiences.

How Augmented Reality (AR) Works

Augmented Reality allows you to overlay digital content—like 3D objects, text, and images—onto the physical world in real time. Unlike Virtual Reality (VR), which creates a completely digital environment, AR enhances your real surroundings by adding interactive elements that appear on your device’s camera.

In this project, we’ll use AR.js to create an environment explorer that identifies objects in your surroundings and displays information about them. The app will use markers (such as QR codes or simple images) to detect real-world locations and place virtual objects on top of them.

Step-by-Step Guide to Building the AR Environment Explorer

Step 1: Set Up AR.js

AR.js allows you to create AR apps that run right in the web browser, without any special apps or devices. Let’s start by setting up a simple AR scene.

  1. Create a New Folder: On your computer, create a folder called “AR_Explorer” where we’ll store the project files.
  2. Open a Text Editor: Use any text editor (like Visual Studio Code, Sublime Text, or Notepad++) to write your code.

Step 2: Create the HTML Structure

Let’s build the basic structure of our AR environment explorer using HTML.

  1. In your project folder, create a file called index.html and open it in your text editor.
  2. Add the following HTML structure:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AR Environment Explorer</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://rawgit.com/jeromeetienne/ar.js/1.6.2/aframe/build/aframe-ar.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <a-scene embedded arjs>
        <a-marker preset="hiro">
            <a-box position="0 0.5 0" material="color: yellow;"></a-box>
        </a-marker>
        <a-entity camera></a-entity>
    </a-scene>
</body>
</html>

Step 3: Understanding the Code

  • A-Frame: We’re using A-Frame, a framework for building 3D and AR/VR experiences in the web browser.
  • AR.js: This allows us to build AR experiences using just a web browser and a marker (like the Hiro marker used in this code).
  • Markers: The a-marker element represents a physical object or pattern that your device’s camera will recognize. In this case, we’re using the hiro marker, which you can print or display on your screen.

Step 4: Testing Your AR Scene

  1. Open the index.html file in a web browser (like Chrome or Firefox).
  2. Print or display the Hiro marker on a different device or paper: Hiro Marker Download.
  3. Hold the marker in front of your webcam or mobile camera.
  4. You should see a yellow box appear on top of the marker in AR when viewed through your camera.

Step 5: Adding More Interactive AR Elements

Now that you’ve created a basic AR scene, let’s add more interactive elements to make the environment explorer more engaging.

1. Displaying 3D Objects

You can add more 3D objects, like spheres, boxes, or even custom models. For example, let’s add a tree model that appears when you scan the Hiro marker.

  1. Find a 3D model of a tree online, or use a simple A-Frame primitive (like a cone to represent a tree).
  2. Replace the yellow box in your code with a tree-shaped object:
HTML
<a-marker preset="hiro">
    <a-cone position="0 1 0" radius-bottom="0.5" height="1.5" material="color: green;"></a-cone>
</a-marker>

This code creates a cone that appears on top of the Hiro marker, representing a virtual tree.

2. Adding Information Panels

We can add text next to the 3D objects that display information when a user interacts with the AR environment.

  1. Add the following text below the tree model to create an information panel:
HTML
<a-text value="This is a virtual tree. Trees help produce oxygen!" position="0 1.5 0"></a-text>

Now, when the user scans the Hiro marker, they’ll see a virtual tree along with a fun fact about trees!

3. Interactivity with Touch or Clicks

You can also make the AR objects interactive by adding event listeners for clicks or touches.

  1. Modify the a-cone (tree) object to listen for clicks and change color when clicked:
HTML
<a-cone position="0 1 0" radius-bottom="0.5" height="1.5" material="color: green;" 
        event-set__click="material.color: red;"></a-cone>

When the user clicks on the virtual tree, it will change from green to red!

Step 6: Adding More Markers and Objects

You don’t have to stop at one marker. You can add multiple markers to the AR Explorer, each triggering a different 3D object or educational content.

Adding a Second Marker

  1. Add another marker preset (like the kanji marker) to display a different object, like a rock:
HTML
<a-marker preset="kanji">
    <a-sphere position="0 0.5 0" radius="0.5" material="color: gray;"></a-sphere>
    <a-text value="This is a virtual rock!" position="0 1.5 0"></a-text>
</a-marker>

Now, when users scan the kanji marker, they’ll see a virtual rock with an educational message.

Step 7: Adding a Background Scene

You can even enhance the AR experience by adding a background scene. For example, add a sky element or surrounding environment to give your AR scene more depth:

HTML
<a-sky color="#a0d8ef"></a-sky>

Step 8: Testing and Exploring the AR World

  1. Save your changes and refresh your browser to test the AR environment.
  2. Use your camera to scan the Hiro marker and the Kanji marker. You’ll see a virtual tree and rock appear with corresponding text.
  3. Click on the virtual objects to interact with them and watch the changes.

Using a Mobile Device

If you’re using a mobile device, simply open the index.html file in your browser and point your camera at the printed or displayed markers.

Customizing Your AR Explorer

Here are some ways you can make your AR Environment Explorer even more interactive and fun:

**1. Add More 3D Models**

  • Find and add more complex 3D models like animals, buildings, or planets. You can use free model sites like Sketchfab or use A-Frame’s built-in models.

2. Create a Virtual Safari

  • Turn your AR Explorer into a virtual safari where users can explore different animals. Each marker can represent a different animal, and when scanned, the user can learn about that animal’s habitat, diet, and more.

3. Add Animations

  • Use the animation component in A-Frame to make your objects move or rotate when viewed in AR. For example, you can animate the virtual tree swaying in the wind.

What’s Next?

Congratulations! You’ve built an Augmented Reality Environment Explorer that allows users to interact with virtual objects and learn about their surroundings in a fun and educational way. You can keep adding more objects, markers, and interactive elements to create a more immersive experience.

In the next project, we’ll explore AI-powered virtual assistants that can respond to voice commands and help with daily tasks. Stay tuned for more cool STEM projects released every week!

Resources and Additional Help

Categorized in:

STEMUncategorized