A-Frame Skills

With CodeHS

A-frame skills And a bit of Computer Science

In this unit you will learn to use A-Frame 1.1.0 to create a 3D environment that you can view in your web browser.

We will be using CodeHS to host our VR world. Your teacher will show you how to get to the correct class.

At the end of this unit your teacher will quiz you on the Computer Science you have learned.

Comp Sci Topic: Binary Numbers

Getting started

Learn:

How to set up an A-Frame scene, the A-Frame coordinate space, how to position objects and set colors

Do:

The Getting Started activities in CodeHS

Extend:

Create your own pattern of spheres

A-Frame skills - intro

Shapes and Properties

Learn:

How to set up an A-Frame scene, the A-Frame coordinate space, how to position objects and set colors

Do:

The Shapes and Properties activities in CodeHS

Extend:

Create your own pattern of spheres

A-Frame skills - shapes and attributes

The Inspector

Learn:

How to use the Inspector tool to manipulate your scene.

Do:

The 6.3.* activities in CodeHS

Extend:

Do the Snowman activity

A-Frame skills - The Inspector tool

Skydome - 360 images

Learn:

How to find and use equirectangular images to create a sky dome.

Do:

The 6.3.* activities in CodeHS

Extend:

Do the Snowman activity

A-Frame skills - 360 images

Animation - basics

Learn:

How to animate basic properties in A-Frame

Do:

The 3.1.1 Animation Tag activities in CodeHS

Extend:

Create your own animated scene

A-Frame skills - animation basics

Animation - extras

Learn:

How to animate multiple properties and use easing

Do:

The activities in CodeHS

Extend:

Improve your own animated scene

A-Frame skills - animation extras

Comp Sci Topic: Encoding letters

Build a voxel bear

Bring it into a-frame

Comp Sci Topic: Error detection

Make a voxel landscape

Comp Sci Topic: Error Correction