Code Your Own World with VR

Home
Curriculum Guide

Code Your Own World with VR

Age Group: 
Grades: 
Learning Hours:25 hours
Domain:Emerging technology, game development
Key Skills:Web 2.0, creativity, user experience
Assessment:MCQ assessment and project assessment
Hardware/System Requirements:  
Progression:  

Similar courses

See more

Course Overview

From forests to Mars, students will bring their imaginations to life by coding their own virtual reality world.

Developed with HTML, JavaScript, and A-Frame, they will code and add their own customized textures, elements and interactions to complete their realistic simulated 3D environments.

Students will also be able to easily share their work with friends and families, as well as immerse themselves into their creations.

Explore how developers assemble and approach the design of virtual reality worlds and explore how professionals consider elements like, placement, backgrounds, settings and genres.

Learn the fundamentals of A-Frame along with HTML, CSS and JavaScript to customize textures, elements and virtual interactions. A-Frame is a professional framework for designing and coding virtual experiences.

Create VR scenes with custom themes, animations, gaze controls, and textures. Students will work through a progression of 13 projects, with each one teaching a specific feature of the A-Frame framework. As a final capstone project, students will then apply what they have learned in the guided projects to create a custom scene of their own in the sandbox.

Project Description Duration
Set up A-Frame
Students will be introduced to the syntax for A-Frame and learn how to import the A-Frame framework into a project. Students will then create a simple 3D scene and populate it with geometric shapes.
2 hours
A-Frame Modeling
Students will learn to create complex shapes by combining and manipulating simpler shapes to create the double-helix structure of a DNA molecule.
1 hour
A-Frame Image Textures
Students will learn how to apply images as textures to make 3D objects look more realistic.
1 hour
A-Frame Lighting and Fog
Students will learn how to add different types of lighting to a scene to create ambiance.
2 hours
Import Third-Party Models into A-Frame
Students will learn about the asset management system in A-Frame to import a third-party 3D model from Sketchfab.
2 hours
A-Frame Animations
Students will learn and apply the concept of animation keyframes to animate a car driving around a city street.
2 hours
A-Frame Path Animations
Students will learn how to animate objects that follow a predetermined path using curves and control points to animate a roller coaster art moving along a track.
2 hours
A-Frame Physics
Students will learn how to simulate physics in a scene by creating an animated scene of various sports balls rolling and bouncing off a flight of stairs.
1 hour
A-Frame Collision Detection
Students will learn how to program collision detection objects by creating an animated scene of a car that can collect coins.
2 hours
A-Frame Custom Components
Students will learn how to make the code base of an A-Frame scene more readable and efficient by separating A-Frame code into HTML and JavaScript to create the animated blades of a windmill fan.
2 hours
A-Frame Gaze Interactions
Students will learn about VR gaze controls and interactions by creating a 3D button that is clickable by looking at it.
1 hour
A-Frame VR Tour
Students will learn how to instantly change the position of the viewer by creating a scene with multiple waypoints to which the viewer can teleport to by looking at it.
1 hour
A-Frame Sound Effects
Students will learn how to add audio to an A-Frame scene to play a series of sound effects.
2 hours
Final Project: Diorama
Students will apply what they have learned in the 13 projects to create a VR scene of their own as the final project of this course. For this project, students will not use a guided project. Instead, they will be creating their diorama from a sandbox on BSD Online. OPTIONAL: Students can present their VR diorama at the end of the course.
4 hours