1) A-Frame - Skills
A- Frame Course
A-Frame is a web framework for building virtual reality (VR) experiences. A-Frame is based on top of HTML, making it simple to get started. But A-Frame is not just a 3D scene graph or a markup language; the core is a powerful entity-component framework that provides a declarative, extensible, and composable structure to three.js.
A-Frame supports most VR headsets such as Vive, Rift, Windows Mixed Reality, Daydream, GearVR, Cardboard, Oculus Go, and can even be used for augmented reality. Although A-Frame supports the whole spectrum, A-Frame aims to define fully immersive interactive VR experiences that go beyond basic 360° content, making full use of positional tracking and controllers.
https://aframe.io/docs/1.2.0/introduction/
A-Frame Documentation
A-Frame Lessons
Start by joining the class Codehs. Each task is to be done in a separate project.
Task 1 - Build a basic scene in A-Frame
Learning goal - In this project, you will learn how to set up a scene using A-Frame and add in entities.
By the end of the project, you will -
Add 3d Objects
Transform to transform entities in 3D space with position, rotation, scale
Use the inspector (Ctrl-Alt-i) to tweak the scene
Adding a sky
Adding texture to your objects
Complete this task in codehs project number 1. Submit it when you are finished.
Task 2 - Bring in 3D models
Learning goal - In this project, you will learn how to export models you have made in Blender and bring them into the A-Frame scene.
By the end of the project, you will -
Pre-load models and position them
Add in models with animation
Know how to get free to re-use 3D models
Complete this task in codehs project number 2. Submit it when you are finished.
Task 3 - Animations
Learning goal - In this project, you will learn how to animate shapes in A-Frame.
By the end of the project, you will -
Add animations to shapes
Animate multiple properties
Add multiple-step animations
Use different easings in your animations
Animate a group of objects
Complete this task in codehs project number 3. Submit it when you are finished.
Task 4 - Lighting and shading
Learning goal - In this project, you will learn how to add in lighting and shading to your scene and used GitHub to save versions of the trials of the different lights.
By the end of the project, you will -
Add in different light sources
Add in shading
Complete this task in codehs project number 4. Submit it when you are finished.
Task 5 - Camera controls and movement
Learning goal - In this project, you will learn how to manipulate the camera and add movement controls
By the end of the project, you will -
Adjust camera properties
Animate the camera
Make an object stick to the camera view
Complete this task in CodeHS project number 5.
Task 6 - Navmesh
Learning goal - In this project, you will learn how to create a navmesh to constrain the user to an area of the scene and not allow them to walk through walls/ obstacles.
By the end of the project, you will -
Used the Navmesh creator in the inspector to generate a .gltf file
Added in the navmesh model
Constrained the controls to the navmesh area
Hiden the navmesh
Complete this task in codehs project number 5. Submit it when you are finished.
The Navmesh creator needs a simple scene. Some things that will break it are:
Aframe version greater than 1.1.0
<a-sky>
Task 7a - Checkpoint: Create a gallery
Learning goal - In this project, you will learn practice the skills you have learned so far.
By the end of the project, you will -
Create a gallery
Have examples of the skills you have learned
Follow the slides to know what is expected.
Complete this task in codehs project Gallery Checkpoint. Submit it when you are finished.
Task 7b - Recapping HTML/ CSS and creating a landing page for your webVR scene.
Learning goal - In this project, you will learn how to create a landing page/ Splash screen for your WebVR experience.
By the end of the project you will -
Create a basic web page layout using the web skills you learnt in level 1, this is like a refresh for your memory.
Follow the slides to know what is expected.
Task 7c - Add this to the gallery project you made in the checkpoint task
By the end of the project, you will -
Created a landing page to welcome the user to the experience.
Use HTML, CSS to code the page.
Have a modal pop-up with instructions,
Have a button to take the user to the scene.
Save all assets in their own folder.
Complete this task in codehs project number 6. Submit it when you are finished.
Extension tasks
have a look at the links below at things you might want to add to your project. For example, interactivity and sound.
Extension - Basic interactions
Learning goal - In this project, you will learn to trigger animations in your a-frame scene.
By the end of the task, you will have -
Set up the mouse cursor
Set up the fuse cursor
Have examples of triggering animations
Follow the slides to know what is expected.
