1 of 17

Where to sit?

If you want to work along with Roger and build the VR program together, please sit in the first three rows�
If you want to work at your own pace, please sit in the fourth row or farther back.

Bring 3D and VR Programming to your Computer Science Classroom

2 of 17

Bring 3D and Virtual Reality Programming to your Computer Science Classroom

Roger Jaffe

Patrick Henry High School

San Diego CA

mrjaffe@mrjaffesclass.com

http://www.mrjaffesclass.com

CSTA National Conference, Phoenix

July 7-10, 2019

3 of 17

Wifi

SSID: CSTA2019

Password: ItsADryHeat

It's nice to see that someone has a sense of humor

4 of 17

Today's Agenda...

A-Frame (15 mins)

VR programming framework
Working environments
A-Frame tutorial you can use in class

Demo project tour (10 mins)

Game environment (camera, ground, sky)
Assets (Box, Texture)
Animations (Spinning)
Reticles and mouse clicks

Coding the VR game and Fun Fact Breaks (2½ hrs)

5 of 17

About A-Frame

<html>

<head>

</head>

<body>

<a-scene>

<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>

<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>

<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5"

color="#FFC65D"></a-cylinder>

<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4"

color="#7BC8A4"></a-plane>

<a-sky color="#ECECEC"></a-sky>

</a-scene>

</body>

</html>

6 of 17

About A-Frame

7 of 17

Working Environment A: Glitch.com

Pros: Minimal computer setup No administrative access required Suitable for Windows, Mac, Linux, and Chromebooks too! Students can collaborate in real time Code changes are immediately reflected in the browser with automatic hot reloading Code can be imported from and exported to a Github repository Files are auto-saved as they are changed A-Frame School is a ready-made online tutorial that your students can use to learn A-Frame at their own pace. We will be using a custom tutorial that is based on A-Frame School

8 of 17

Working Environment A: Glitch.com

Pros: Minimal computer setup No administrative access required Suitable for Windows, Mac, Linux, and Chromebooks too! Students can collaborate in real time Code changes are immediately reflected in the browser with automatic hot reloading Code can be imported from and exported to a Github repository Files are auto-saved as they are changed A-Frame School is a ready-made online tutorial that your students can use to learn A-Frame at their own pace. We will be using a custom tutorial that is based on A-Frame School	Cons: Must have internet access The Glitch system saves files temporarily so student work must be saved on Github or downloaded to a USB drive or other storage device at the end of each day Files are auto-saved as they are changed Github integration requires some difficult concepts that will confuse students, namely commits, branches, pull, push, and merge. Projects will be saved as long as students are logged in Glitch has file size and access restrictions which usually do not present problems with the scope of student work

9 of 17

Working Environment B:

Local Development Environment

Pros: Internet access is not required Students have complete control over their working environment Students also learn about local development web servers, localhost and server ports since this is how the local development environment serves the A-Frame pages Page changes are displayed automatically using hot reloading�

10 of 17

Working Environment B:

Local Development Environment

Pros: Internet access is not required Students have complete control over their working environment Students also learn about local development web servers, localhost and server ports since this is how the local development environment serves the A-Frame pages Page changes are displayed automatically using hot reloading�	Cons: Students must be taught about the local web server, how to start and stop it, and a basic introduction to using NodeJS and NPM Works best with a Mac or Linux platform, though Windows will work too

11 of 17

We will be using

Working Environment A: Glitch.com

12 of 17

A-Frame School Online Tutorial

Ready for student use
URL: https://aframe.io/aframe-school
Topics covered:

Working environments (Glitch and Standalone) Primitives Assets (textures, materials, etc) A-Frame inspector Entities	Registry (predefined components) Real-time property modification with Javascript Cursor interaction Adding 3D models Adding hand controls (for supported headsets)