High School Project

Welcome to the “Future Innovators: Cool STEM Projects to Change the World” series! In this tutorial, you’ll create a Climate Data Visualizer using Virtual Reality (VR). This project allows users to immerse themselves in a virtual world and visualize the impacts of climate change—such as rising sea levels, shrinking ice caps, or increasing temperatures—using interactive 3D environments. The goal is to make the data more accessible and tangible by showing real-world environmental changes in an engaging way.

By the end of this project, you’ll have built a VR application where users can walk through different climate change scenarios and see the effects in real time. Using a combination of A-Frame (a web-based VR framework) and real-world climate data, you’ll create a visually stunning experience that educates users about the state of our planet.

What You Will Learn

  • How to use Virtual Reality (VR) to create immersive 3D experiences.
  • How to visualize real-world climate change data through interactive simulations.
  • How to build 3D environments and objects using A-Frame, an easy-to-use VR framework for web browsers.
  • How to animate and simulate environmental changes such as rising temperatures, melting ice, and rising sea levels.

STEM Learning Process

1. Science: Understand the scientific principles behind climate change and how data can be represented visually.
2. Technology: Learn how to use VR technology to create immersive educational experiences using web tools.
3. Engineering: Design and build a virtual world that shows the real-time impact of climate change on different ecosystems.
4. Math: Use real-world climate data, measurements, and proportions to create accurate simulations.

What You Need

Software Requirements:

  • A computer with a modern web browser (Chrome or Firefox recommended).
  • A-Frame: A web framework for building virtual reality experiences.
  • Optional: VR headset for an immersive experience, but this project works perfectly in a regular browser without one.

Data Sources:

  • Climate change data: You can use data from sources like NASA, NOAA, or other open climate datasets to make your VR visualizations more accurate.
  • Real-world climate data sources:
  • NASA Climate Change Data: NASA Climate
  • NOAA Climate Data: NOAA

How the VR Climate Data Visualizer Works

The VR Climate Data Visualizer will allow users to explore different environments that showcase the impact of climate change, such as:

  • Rising sea levels and how they affect coastal cities.
  • Increasing global temperatures, with visual indicators like melting ice caps and shrinking glaciers.
  • Interactive displays of real-time data like CO₂ levels and temperature increases.

Using A-Frame, we’ll build interactive 3D environments that users can explore. Each environment will represent a different climate scenario, with real-time data visualization embedded in the experience.

Step-by-Step Guide to Building the Climate Data Visualizer

Step 1: Set Up A-Frame

A-Frame is a powerful framework that makes building VR experiences for the web simple and easy. Let’s start by setting up your A-Frame environment.

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

Step 2: Create the HTML Structure

  1. In your project folder, create a file called index.html and open it in your text editor.
  2. Add the following HTML structure to set up a basic A-Frame scene:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Climate Data Visualizer</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <style>
        body { margin: 0; overflow: hidden; }
    </style>
</head>
<body>
    <a-scene>
        <a-sky color="#87CEEB"></a-sky> <!-- Sky background -->
        <a-entity camera look-controls></a-entity> <!-- Camera for VR controls -->
    </a-scene>
</body>
</html>

This code sets up a simple A-Frame scene with a sky background and a VR camera that users can control using their mouse or VR headset.

Step 3: Add Your First Environment: Rising Sea Levels

Let’s create a scenario where users can see the impact of rising sea levels on coastal cities. We’ll start by adding a city model and simulate the water levels rising over time.

  1. Add a city model using A-Frame primitives like boxes to represent buildings:
HTML
<a-box position="-1 0.5 -3" width="1" height="1" depth="1" color="gray"></a-box>
<a-box position="1 0.5 -4" width="1.5" height="1.5" depth="1.5" color="darkgray"></a-box>
<a-box position="3 0.5 -5" width="2" height="2" depth="2" color="lightgray"></a-box>
  1. Next, add water that will rise over time to simulate sea level rise:
HTML
<a-box position="0 -0.5 -4" width="10" height="1" depth="10" color="blue" id="sea"></a-box>
  1. Use JavaScript to gradually raise the water level over time:
HTML
<script>
    var sea = document.querySelector('#sea');
    setInterval(function() {
        var currentHeight = parseFloat(sea.getAttribute('position').y);
        if (currentHeight < 3) { // Stop rising after reaching a height of 3
            sea.setAttribute('position', `0 ${currentHeight + 0.01} -4`);
        }
    }, 100); // Water rises slowly every 100ms
</script>

Now, the water level will gradually rise, demonstrating how rising sea levels can flood coastal cities.

Step 4: Add Global Temperature Indicators

Next, we’ll create a global temperature visualization that shows how the Earth’s temperature has increased over the years.

  1. Create a temperature bar using A-Frame primitives:
HTML
<a-box position="-4 0 -6" width="0.5" height="1" depth="0.5" color="green" id="temperature"></a-box>
<a-text value="Global Temperature" position="-4 2 -6" color="white"></a-text>
  1. Use JavaScript to change the color of the temperature bar from green (normal temperature) to red (high temperature) as global temperatures rise:
HTML
<script>
    var temperatureBar = document.querySelector('#temperature');
    var tempHeight = 1;
    var tempColors = ["green", "yellow", "orange", "red"];
    var tempIndex = 0;

    setInterval(function() {
        if (tempHeight < 5) { // Maximum temperature increase
            tempHeight += 0.2;
            tempIndex++;
            temperatureBar.setAttribute('height', tempHeight);
            temperatureBar.setAttribute('color', tempColors[tempIndex % tempColors.length]);
        }
    }, 1000); // Temperature increases every second
</script>

This will simulate the rising global temperature, making the bar taller and changing its color from green to red.

Step 5: Add Ice Cap Melting Visualization

Let’s simulate the melting of polar ice caps due to increasing global temperatures. We’ll create an ice cap using a 3D model and animate it shrinking as temperatures rise.

  1. Add an ice cap using a white A-Frame sphere:
HTML
<a-sphere position="0 1 -10" radius="2" color="white" id="iceCap"></a-sphere>
<a-text value="Melting Ice Caps" position="0 3 -10" color="white"></a-text>
  1. Use JavaScript to shrink the ice cap over time, simulating the melting process:
HTML
<script>
    var iceCap = document.querySelector('#iceCap');
    var iceRadius = 2;

    setInterval(function() {
        if (iceRadius > 0.5) { // Minimum radius before the ice is almost gone
            iceRadius -= 0.05;
            iceCap.setAttribute('radius', iceRadius);
        }
    }, 1000); // Ice shrinks every second
</script>

This code makes the ice cap shrink gradually, showing the effect of warming temperatures on polar regions.

Step 6: Adding Data Visualizations

You can add real-time climate data visualizations to make the experience even more educational.

  1. Add text elements that display CO₂ levels, temperature changes, or other climate data:
HTML
<a-text value="CO₂ Levels: 416 ppm" position="4 2 -6" color="white"></a

-text>
<a-text value="Global Warming: +1.2°C" position="4 1.5 -6" color="white"></a-text>
  1. Use real-world data from sources like NASA or NOAA to display accurate numbers that update over time.

Step 7: Testing Your VR Climate Data Visualizer

Run Your Project:

  1. Open the index.html file in your browser (preferably Chrome or Firefox).
  2. Use your mouse or VR headset to look around the virtual world.
  3. Watch as the sea levels rise, the temperature bar changes color, and the ice caps shrink—all representing the effects of climate change.

Using a VR Headset:

If you have a VR headset (like an Oculus or Google Cardboard), you can experience the project in full VR. Simply open the project on your device and switch to VR mode.

Customizing Your VR Climate Data Visualizer

Here are some ways to make your Climate Data Visualizer even more powerful:

1. Add More Climate Scenarios

  • Create other environments, such as forest fires, droughts, or extreme storms, to show the wide range of impacts from climate change.

2. Add User Interaction

  • Allow users to click or touch objects to learn more about each climate scenario, or add sound effects to create a more immersive experience.

3. Use More Complex 3D Models

  • You can import 3D models of cities, animals, or landscapes from sites like Sketchfab to make your visualizations more detailed and engaging.

What’s Next?

Congratulations! You’ve built a Climate Data Visualizer in VR that educates users about the impact of climate change. This project can be expanded to include more data, richer environments, and greater interactivity. You’ve learned how to use A-Frame to create VR experiences and how to bring real-world climate data into an immersive virtual world.

Resources and Additional Help

Categorized in:

STEM