Embedded Files
Free Virtual Reality Course
Sign-up Class Code - F2B24
Year 12 Students Need to complete most, but "4. Interaction" is optional for Merit & Excellence
Intro to Virtual Reality Units:
Intro to Virtual Reality Units:
Getting Started
Advanced Shapes
Animation
Interaction
360 Images
Next Steps
Final Project
Frame Academy
Frame Academy
Project 1:
Project 1:
In this project you will learn:
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 titles' hyperlinks below for a step by step course with videos / text / example code from FrameAcademy. Project 1 has 5 steps. There are 5 Projects you can do. My presentations on the right gives a summary to refer back to.
Challenge
Sign-up to Glitch.com and Make a New Project, and call it 'whs-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. E.g. make a snowman from multiple spheres, try making Xmas trees from cones
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'.
Challenge
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>
Code to add your Sheep:
Code to add your Sheep:
<a-gltf-model id="sheep" position="0 0 -3" rotation="0 100 0" src="https://cdn.glitch.com/0fc2d138-1979-4b80-8bae-51eb67b7ccb9%2Fsheep.glb?1544159918188"></a-gltf-model>
Challenge
Add a photosphere, flat image, and some text to your 3D site. If you downloaded a model remember to reference it.
REMIX this: Add a default Environment
<!-- copy this component into your <head> section -->
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.2.0/dist/aframe-environment-component.min.js"></script>
Try changing the preset to one of default, contact: egypt, checkerboard, forest, goaland, yavapai, goldmine, threetowers, poison, arches, tron, japan, dream, volcano, starry, osiris
Challenge
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.
You will learn:
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
Animation Component code to copy:
<head> </head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"> </script>
<!-- add the animation scripts Project 2 - this brings to life an animated model -->
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v5.0.0/dist/aframe-extras.min.js"></script>
Challenge
Find a Sketchfab model with an animation and bring it into your project. For example Free Downloadable Animated Cat.
When you have unzipped the files combine them with GLB Packer: https://glb-packer.glitch.me/
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. "animation-mixer"
Finally, check out your site and make sure the animation is playing on the 3D model!
Add:
<!-- add the animation scripts Project 2.2 - this allows you to move and animate shapes-->
<script src="https://unpkg.com/aframe-animation-component@^5.1.2/dist/aframe-animation-component.min.js"></script>
Animate Position
Animate Position
Add component properties, e.g.
<a-box position="0 1.3 -4.5" rotation="0 45 0" color="#4CC3D9" depth=".2" width="2" shadow animation="property: position; dur: 5000; loop: true; dir: alternate; to: 0 1.5 -4.5;"></a-box>
Going Beyond Position
Going Beyond Position
Try adding multiple affects:
<a-box position="-2.1 1.3 -4.5" rotation="0 45 0" color="#4CC3D9" depth=".2" width="2" shadow
animation__hover="property: position; dur: 2000; loop: true; dir: alternate; to: -2.1 1.5 -4.5;"
animation__spin="property: rotation; dur: 12000; loop: true; to: 0 1490 0;"
animation__color="property: color; type: color; dur:1000; loop: true; dir: alternate; to: #faaf52"
></a-box>
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.
03 Basics - Textures and Animations.webmHealth & 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
Project 3: Inheritance and asset management
Project 3: Inheritance and asset management
You will learn:
How relatives work
How inheritance works
Asset managment & Preloading assets
Hello World Example
Hello World Example
Page updated
Report abuse