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!