Please enable JavaScript to use CodeHS


Introduction to Virtual Reality

Lessons

  1. Getting Started

    1. 1.1 What is VR?

    2. Description

      In this lesson, students will learn about virtual reality and how it is currently being used for entertainment as well as in various professions. Students will be introduced to HTML and how to use the A-Frame framework in an HTML page.

    3. Objective

      Students will be able to:

      • Explain what virtual reality is
      • Identify how virtual reality is being used for purposes other than entertainment
    4. 1.2 Your First VR World

    5. Description

      In this lesson, students will learn about the <a-sphere> tag and how to set its color, position, and radius. Students will learn how to make planes and use them to create a ground for the VR worlds.

    6. Objective

      Students will be able to :

      • Create a sphere in a VR world
      • Create a plane in a VR world
      • Change basic properties of spheres and planes
  2. Advanced Shapes

    1. 2.1 Advanced Shapes

    2. Description

      In this lesson, students will explore the attributes that shapes are given beyond color and position, such as rotation. Students will create boxes, cones, cylinders, and learn where to find more information about other shapes available to them. Students will learn how to texture shapes using digital images. Students will learn how to add a background color to their VR worlds.

    3. Objective

      Students will be able to:

      • Create A-Frame boxes, cones, and cylinders
      • Give VR worlds a background color
      • Give shapes a texture using an image uploaded to CodeHS
      • Position shapes relative to other shapes’ positions
  3. Animation

    1. 3.1 Animation

    2. Description

      In this lesson, students will learn how to add animations to the shapes in a VR world. Students will learn how to program shapes to move, change color, change size, and rotate.

    3. Objective

      Students will be able to:

      • Use animations to move shapes
      • Program animations to change shapes’ colors
      • Use animations to rotate shapes
      • Understand where to find resources to program advanced animations
  4. Interaction

    1. 4.1 Click-Based Interaction

    2. Description

      In this lesson, students will create VR worlds that allow the user to animate objects interacting with them using a mouse. They will learn how to interactively move, resize, and recolor shapes.

    3. Objective

      Students will be able to:

      • Create a cursor in a VR world
      • Create a camera entity
      • Interact with objects by clicking on them
    4. 4.2 Gaze-Based Interaction

    5. Description

      In this lesson, students will create VR worlds that allow the user to interact with the objects in the world. They will learn how to interactively move, resize, and recolor shapes by creating a camera instance that tracks where the user is looking.

    6. Objective

      Students will be able to:

      • Create a cursor in a VR world
      • Create a camera entity
      • Interact with objects by triggering click events through the use of aiming the cursor over an object
  5. 360˚ Images

    1. 5.1 360? Images

    2. Description

      In this lesson, students will learn to work with 360? images and videos in their VR worlds. Students will learn the steps to add an image from a 360? camera, as well as an image or video sourced online. Students will create their own worlds using 360? images, and will gain practice citing their sources when using images captured by others.

    3. Objective

      Students will be able to:

      • Upload a 360? image to CodeHS
      • Create a VR world using a custom image as the world’s sky
      • Create a VR world that projects a custom image onto a sphere
  6. Next Steps

    1. 6.1 Using a VR Device

    2. Description

      In this lesson, students learn how to take the VR worlds they have been creating and view them through a VR enabled device, such as a smartphone + cardboard viewer or an Oculus Rift.

      Students have been making some awesome VR worlds, but so far they only have been viewing them in 2 dimensions. A-Frame has made it easy to create simple VR worlds and things like Google Cardboard devices make it easy to view them.

    3. Objective

      Students will be able to:

      • View their VR worlds in a VR enabled device, such as a smartphone + cardboard viewer or an Oculus Rift
    4. 6.2 Using A-Frame Docs

    5. Description

      In this lesson, students will learn how to use the A-Frame Documentation to learn more about the various features of A-Frame. They will use the documentation to create brand new shapes we’ve never used before.

    6. Objective

      Students will be able to:

      • Locate the A-Frame Quick Documentation in the DOCS tab of the CodeHS Editor
      • Locate the full A-Frame Documentation online
      • Explain the purpose of documentation for a language
      • Utilize the A-Frame Documentation to create a VR world with a brand new shape they’ve never used before
    7. 6.3 A-Frame Inspector Tool

    8. Description

      In this lesson, students will learn about the A-Frame Inspector: A visual tool that helps us modify our VR scenes.

      So far, all of our modifications have been through trial and error. The A-Frame inspector will help students position items and then take t

    9. Objective

      Students will be able to:

      • Open the A-Frame Inspector
      • Utilize the A-Frame Inspector to modify their VR scene
    10. 6.4 Extra Components

    11. Description

      In this lesson, students will learn about using extra libraries that people in the A-Frame community have created! A-Frame provides a lot of really cool features, but people in the community are constantly adding even more! Students will gain practice using a physics library to add gravity and collisions to our VR worlds, making them much more realistic.

    12. Objective

      Students will be able to:

      • Find add on components to A-Frame
      • Utilize the physics library to add gravity to their VR worlds
      • Utilize the physics library to add collisions between objects in their VR worlds
    13. 6.5 Further Practice

    14. Description

      In this lesson, students learn about online resources that they can use to help make additional components and a more complex world.

    15. Objective

      Students will be able to:

      • Use online resources to supplement their knowledge they gained in this course.
  7. Final Project

    1. 7.1 Final Lesson

    2. Description

      In this unit, students will create a large, comprehensive project that uses all of the elements from this course.

    3. Objective

      Students will be able to:

      • Plan their final projects
      • Produce a concrete to-do list that will enable them to complete their project
      • Create a large project that showcases the knowledge they have gained by going through this course
  8. Animation - v0.5.0

    1. 8.1 Animation

    2. Description

      In this lesson, students will learn how to add animations to the shapes in a VR world. Students will learn how to program shapes to move, change color, change size, and rotate.

    3. Objective

      Students will be able to…

      • Use animations to move shapes
      • Program animations to change shapes’ colors
      • Use animations to rotate shapes
  9. Interaction v0.5.0

    1. 9.1 Click-Based Interaction

    2. Description

      In this lesson, students will create VR worlds that allow the user to animate objects interacting with them using a mouse. They will learn how to interactively move, resize, and recolor shapes.

    3. Objective

      Students will be able to:

      • Create a cursor in a VR world
      • Create a camera entity
      • Interact with objects by clicking on them
    4. 9.2 Gaze-Based Interaction

    5. Description

      In this lesson, students will create VR worlds that allow the user to interact with the objects in the world. They will learn how to interactively move, resize, and recolor shapes by creating a camera instance that tracks where the user is looking.

    6. Objective

      Students will be able to:

      • Create a cursor in a VR world
      • Create a camera entity
      • Interact with objects by triggering click events through the use of aiming the cursor over an object
  10. Next Steps v0.5.0

    1. 10.1 Using a VR Device

    2. Description

      In this lesson, students learn how to take the VR worlds they have been creating and view them through a VR enabled device, such as a smartphone + cardboard viewer or an Oculus Rift.

      Students have been making some awesome VR worlds, but so far they only have been viewing them in 2 dimensions. A-Frame has made it easy to create simple VR worlds and things like Google Cardboard devices make it easy to view them.

    3. Objective

      Students will be able to:

      • View their VR worlds in a VR enabled device, such as a smartphone + cardboard viewer or an Oculus Rift
    4. 10.2 Using A-Frame Docs

    5. Description

      In this lesson, students will learn how to use the A-Frame Documentation to learn more about the various features of A-Frame. They will use the documentation to create brand new shapes we’ve never used before.

    6. Objective

      Students will be able to:

      • Locate the A-Frame Quick Documentation in the DOCS tab of the CodeHS Editor
      • Locate the full A-Frame Documentation online
      • Explain the purpose of documentation for a language
      • Utilize the A-Frame Documentation to create a VR world with a brand new shape they’ve never used before
    7. 10.3 A-Frame Inspector Tool

    8. Description

      In this lesson, students will learn about the A-Frame Inspector: A visual tool that helps us modify our VR scenes.

      So far, all of our modifications have been through trial and error. The A-Frame inspector will help students position items and then take t

    9. Objective

      Students will be able to:

      • Open the A-Frame Inspector
      • Utilize the A-Frame Inspector to modify their VR scene
    10. 10.4 Extra Components

    11. Description

      In this lesson, students will learn about using extra libraries that people in the A-Frame community have created! A-Frame provides a lot of really cool features, but people in the community are constantly adding even more! Students will gain practice using a physics library to add gravity and collisions to our VR worlds, making them much more realistic.

    12. Objective

      Students will be able to:

      • Find add on components to A-Frame
      • Utilize the physics library to add gravity to their VR worlds
      • Utilize the physics library to add collisions between objects in their VR worlds
    13. 10.5 Further Practice

    14. Description

      In this lesson, students learn about online resources that they can use to help make additional components and a more complex world.

    15. Objective

      Students will be able to:

      • Use online resources to supplement their knowledge they gained in this course.