Introduction to A-Frame

This lesson would be targeted as a challenge to students that have completed HTML lessons and the ability to work independently. This is just an introductory lesson. A-frame gives students the ability to use HTML in a different way.

Author: Skye Mader
Grade Levels: 6-8, 9-12
Materials: Website, Visual Studio Code and nodejs.org

National Standards Alignment

csta 2-AP-10 2-AP-11 2-AP-12 2-AP-17 2-DA-07 2-NI-06 3A-AP-13 3A-AP-14 3A-AP-15 3A-AP-21 3A-DA-09
iste ISTE-1d ISTE-4a ISTE-4c ISTE-5a ISTE-5b ISTE-6b

OVERVIEW

Activity Overview:

This lesson would be targeted as a challenge to students that have completed HTML lessons and the ability to work independently. This is just an introductory lesson. A-frame gives students the ability to use HTML in a different way.

Meta description

  • Subject Area: Computer Science, Technology
  • Grade Level : 6-8, 9-12
  • Computer Science Domains:
    • Algorithms and Programming
  • Computer Science Principles:
    • Creating Computational Artifacts
  • Materials:
    • Website, Visual Studio Code and nodejs.org
  • Considerations:
    • This could be challenging if a student did not have HTML experience.

Lesson Plan

Overview

This lesson would be targeted as a challenge to students that have completed HTML lessons and the ability to work independently. This is just an introductory lesson. A-frame gives students the ability to use HTML in a different way.

ASSESSMENT PRE/POST-TEST

I do not have pre/post questions for this activity.

OBJECTIVES

Students will be able to create a 3-Dimensional image that they will be able to manipulate.

CATCH/HOOK

Show the https://aframe.io/ website where students can see example of work. It would be really cool to bring in some VR goggles to have students interact with the programming.

ACTIVITY INSTRUCTIONS

The students should have some prior knowldege of HTML. Students should have access to visual studio code and the extention nodejs. Students can watch the attached video’s from Connor Kasarda to understand how A-Frame works within HTML. Different models and code are available on the website.

Supplements

Any items in this section are the property & under the license of their respective owners.

REVIEW

Students should be able to create and share their work, it would be really cool to work with a VR headset.

STANDARDS

TypeListing
CS DomainsAlgorithms and Programming
CS PrinciplesCreating Computational Artifacts