In the last lesson, we learned about how to add 3D entities (objects) with primitives and transform them in 3D space with color, position, rotation, and scale. But a virtual environment needs a lot more than that for the user to feel like they are in a real world.

A-Frame allows developers to create and share reusable components for others to easily use. The environment component procedurally generates a variety of entire environments for us with a single line of HTML. The environment component is a great and easy way to visually fill out our VR app, providing over a dozen environments with numerous parameters. If you’re interested in taking a closer look at the component, take a look at the GitHub repo.

But how can we create an environment from scratch?

In this lesson, we will learn some tools that will help us build an immersive and realistic environment.

Let’s get started!



Before we start building out our own environment, let’s take a look at some of the well-developed ones.

On line 9, change the word forest to one of the following:

  • contact
  • egypt
  • yavapai
  • arches
  • dream

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?