Embedded Files
A-frame skills And a bit of Computer Science
A-frame skills And a bit of Computer Science
In this unit you will learn to use A-Frame 1.1.0 to create a 3D environment that you can place your MagicalVoxel models in.
We will be using GitHub Codespaces to host our VR world. Your teacher will show you how to get set up with this. The code for the activities is in this GitHub repository.
At the end of this unit your teacher will quiz you on the Computer Science topics you have learned.
Comp Sci Topic: Binary Numbers
Introduction
Introduction
Shapes and Properties
Shapes and Properties
Comp Sci Topic: Encoding letters
The Inspector
The Inspector
Learn:
How to use the Inspector tool to manipulate your scene.
Do:
The inspector activities in Codespaces
Extend:
Do the Snowman activity
Comp Sci Topic: Error detection
Animation - basics
Animation - basics
Learn:
How to animate basic properties in A-Frame
Do:
The Animation activities in Codespaces
Extend:
Create your own animated scene
Animation - extras
Animation - extras
Learn:
How to animate multiple properties and use easing
Do:
The animationExtras activity in Codespaces
Extend:
Improve your own animated scene
Comp Sci Topic: Error Correction
Skydome - 360 images
Skydome - 360 images
Learn:
How to find and use equirectangular images to create a sky dome.
Do:
The sky activities in Codespaces
Extend:
Do the Snowman activity
Moving the camera
Moving the camera
using:
using:
<a-entity></a-entity>
camera wasd-controls look-controls position="0 3 20"
animation="property:position; to: 0 3 0; dur: 10000"
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 - like having travel sickness.
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 - like having travel sickness.
Comp Sci Test: Your teacher will give you a quiz.
load your magicavoxel assets into a-frame
load your magicavoxel assets into a-frame
Learn:
How to import 3D models from MagicaVoxel
Do:
The 3Dmodel activities in Codespaces
Extend:
Assemble your 3d scene
Assemble your 3d scene
You have used Magica Voxel to create the characters (and props) for your scene.
It can create the set too!
Create a set that has a room with some outside space. Then follow the slides to put your dog in the scene.
Bigger models
Bigger models
EXTENSIONS
EXTENSIONS
Add lighting
Add lighting
using:
using:
<a-light id="amb" type="ambient"></a-light>
<a-light id="dir" type="directional"></a-light>
<a-light id="pnt" type="point"></a-light>
<a-light id="spt" type="spot"></a-light>
Do not add a lot of lights to your scene as they add a lot of calculation time to rendering the scene.
Do not add a lot of lights to your scene as they add a lot of calculation time to rendering the scene.
Ambient lights globally affect all objects in the scene. The color and intensity properties define ambient lights.
Directional lights are like a light source that is infinitely far away, but shining from a specific direction, like the sun.
Point lights, unlike directional lights, shine in all directions like a light bulb. They affect objects depending on their position and distance; the closer the light bulb gets to an object, the greater the object is lit.
Spotlights, are like real spot lights.
Shadows
Shadows
Create at least one light with light="castShadow: true"
Three light types support shadows (point, spot, and directional).
Combining an ambient light (without shadows) and a directional light (with shadows) is a good place to start.
<a-light id="amb" type="ambient" intensity="0.5" ></a-light>
<a-light id="dir" type="directional" position="0.5 2 0.5" color="white" light="castShadow: true"></a-light>
2. Add the shadow component to objects in the scene that should either cast a shadow or receive shadows.
IE: you would expect a sphere to cast shadows on to the ground, so the ground is said to receive shadows.
<a-plane id="ground" position="0 0 0" rotation="-90 0 0" color="cyan" scale = "30 30 30" shadow="receive: true"></a-plane>
<a-sphere color="lightgrey" position="0 1 -4" shadow="cast: true"></a-sphere>
Page updated
Report abuse