Building the Scene
Lesson 1 of 1
  1. 1
    Introduction
    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…
    Start
  2. 2
    Asset Management System
    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…
    Start
  3. 3
    Sky and 360° Image
    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…
    Start
  4. 4
    Ground
    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 …
    Start
  5. 5
    Text
    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…
    Start
  6. 6
    3D Models
    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…
    Start
  7. 7
    Animation
    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…
    Start
  8. 8
    Lighting
    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…
    Start
  9. 9
    Sound and Positional Audio
    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…
    Start
  10. 10
    Inspector
    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/…
    Start
  11. 11
    Review
    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…
    Start

What you'll create

Portfolio projects that showcase your new skills

How you'll master it

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