Building the Scene
Lesson 1 of 1
  1. 1
    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…
  2. 2
    We need to build an environment piece by piece, using different images, still and moving, sounds, and 3D models. We call those assets. A-frame has an [asset management system](https://aframe.io…
  3. 3
    Okay, now we learned how to use the asset management system, let’s create the environment little by little. We can add a background with the primitive that surrounds the scene. The sky primiti…
  4. 4
    To add a ground, we can use the primitive. By default, planes are oriented parallel to the x-y axis. To make it parallel to the ground, we need to orient it along the x-z axis. We can do so by …
  5. 5
    To communicate something to the viewer inside the environment, we can use the primitive. Texts can be game-like instruction, tell a story, or label objects in the world. In 2D web development, d…
  6. 6
    Sometimes we will have 3D assets that we want to add to our scene. For example, a 3D model of a television set, a frog, or a rainbow. A-Frame provides ways for loading [glTF](https://aframe.io/doc…
  7. 7
    We can add animations to our entities using A-Frame’s built-in animation component. Animations are essentially programmed changes in an entity’s values. The changes can be based on time intervals…
  8. 8
    We can change how the scene is lit by using the primitive. By default, if we don’t specify any lights, A-Frame adds a light source. If A-Frame didn’t add lights for us, the default scene would be…
  9. 9
    Audio is important for providing immersion and presence in VR. Even adding simple white noise in the background goes a long way. We recommend having some audio for every scene. One way would be t…
  10. 10
    Want to edit your scene without guessing desired values and reloading your code each time? The inspector helps us do just that. Similar to the regular [web inspector](https://www.codecademy.com/…
  11. 11
    You made it to the end of the lesson! High five. 🙌 Here is a review of the lesson: - The asset management system is where we can store textures, audio, and 3D model files inside . - for adding…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo