A-Frame Skills
Frame Academy
(this course offers video, text & interactive code windows)
Project 1:
AIMS:
how to build a simple 3D web site with shapes & 3D models.
how to share and view your 3D web sites from virtual reality, desktop, and mobile.
How to use the grid view
Click on the hyperlinks below for a step by step course. OR use the presentations on the right which give a summary.
Challenge #1. 1
Sign-up to Glitch.com and Make a New Project, and call it Username-Task1 your teacher may also show you how to use GitHub for manage versions of your code.
Add a few different primitive shapes to your scene and vary their XYZ positions and colours.
Submit the URL link to your Glitch Project to your Google Classroom assignment.
Challenge
Adding on to the previous task (you may wish to use GitHub for version control)
Use the A-Frame Inspector (Ctrl+I) on your scene to change the position, rotation, and size of your shapes. Then change the code in your Glitch project to reflect the changes you want.
Try to position your shapes so that when people look all the way around the scene, they still have something to see.
To really challenge yourself, try to give your scene a floor, or walls!
If you want more help with the A-Frame Inspector (Ctrl+I) watch videos '05 Visual Inspector Part 1' and '05 Visual Inspector Part 2'.
Submit the URL link to your Glitch Project to your Google Classroom assignment.
Challenge #1.3
Find a simple 3D model (or a few!) on Sketchfab.com,
Convert it to a .glb, and bring it into your project.
Make sure the position, scale, and rotation are set so that you can see it in your scene!
Continue to adjust the shapes in your scene.
Submit the URL link to your Glitch Project to your Google Classroom assignment.
Tip: You can set the background attribute on the "scene" element to change the background color of your scene. For example, to make the background of your scene blue you could have <a-scene background="color: blue"></a-scene>
Challenge #1.4
Add a photosphere, flat image, and some text to your 3D site. If you downloaded a model remember to reference it.
Upload the URL Share link of the Glitch site to Google Classroom.
Challenge #5
Fix and Refine the project. Screenshot your use of the Debugging Tools.
Be logical and organised, use a Testing Table to systematically check for errors.
Project 2: (Extension): Adding Animation: Moving Through Space
AIMS:
how to import and add animations to your WebXR site.
how to write your own simple animations with HTML.
how to use A-Frame components to bring more sweet features to your VR site
Challenge #2.1
Find a Sketchfab model with an animation and bring it into your project. Need a refresher on how to bring Sketchfab models into your HTML? See that part of Project 1.
Once you have the 3D model showing up in your site, bring the script for Don's animation-mixer component into your head element.
Next, put the animation-mixer component on your a-gltf-model element.
Finally, check out your site and make sure the animation is playing on the 3D model!
Challenge #2.2
Now that you've seen some examples of animations in action, try setting up a few animations in your own project.
Feel free to tinker with the different properties you can set on the animation component by exploring the property list on the documentation page for the component.
See if you can set multiple animations on the same element.
Health & Safety Tip: if people are viewing your site in VR and you have a fast animation on the main camera, it might make them queasy and uncomfortable. Their visual perspective will be moving, even if they aren't moving their head or their bodies - that can be a strange feeling in VR like travel sickness.
Challenge#2.3
REFINE YOUR ANIMATIONS AND SHARE YOUR WORK
