Terse Notes — A-Frame for WebVR
Short Notes from Learning the Basics of A-Frame
Notes were taken from the following Codecademy course:
A-Frame is open source; it is a web framework for building virtual reality experiences in a web browser. Use with three.js.
External script file: (in the head element)
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
To set up a 3d scene:
Use <a-scene> within the <body> element
Basic Primitives / Meshes:
<a-box>
<a-sphere>
<a-cylinder>
<a-plane>
<a-sky>
<a-entity>
Components:
-color
-position
-rotation
-scale
-radius
Position component
-all entities have position
-uses right-handed coordinate system, meaning positive x-axis goes right, positive y-axis goes up, positive z-axis goes out of the screen toward you
-distance measured in meters (m)
Rotation
-rotational unit is degrees
-but three.js uses radians so we need to change it to that when using it
-positive rotation is based on the right-hand rule. Thumb in the direction of the axis and direction of your other fingers is the positive rotation.
Scale
-does shrinking, stretching or skewing transformation of an entity.
Environment Components
-generate pre-built environments
How to use:
<a-entity environment="preset: dream"></a-entity>
Assets and Asset Management Systems
-we use the asset management system by including the asset tag around every HTML element we want to include in the asset management system:
<a-assets> tag
We store things like image, sound, video and 3D model files in the assets tag. Once we create an asset in the <a-assets> tag, we can then reference the asset in the scene. Just make sure to use a # to link to the src.
For example:
<a-scene>
<a-assets>
<img
id="stones"
src="https://i.imgur.com/mYmmbrp.jpg">
</a-assets>
<a-box
src="#stones"
position="0 2 -5"
rotation="0 45 45"></a-box>
</a-scene>
SKY
A primitive called a-sky is one that surrounds the scene like a sky would. You can use a color or an image to fill the 360 degree space.
For example:
<a-sky color="khaki"></a-sky>
<a-sky src="#city"></a-sky>
GROUND
A primitive called a-plane is a plane oriented parallel to the x-y axis, i.e. going up an down. So we can rotate it -90 degrees to make it parallel to the x-z axis or right to left.
For example:
<a-plane rotation="-90 0 0"></a-plane>
The plane can take an attribute called REPEAT. It takes two numbers corresponding to the x and y axis. So it means how many times to repeat in the x and y direction.
TEXT
In 3D it is very complicated. One simple way that A-Frame does it is with signed distance field (SDF) text.
For example:
<a-text
value="Hello A-Frame!"
color="#BBB"
align="left"
position="-0.9 0.2 -3"
scale="1.5 1.5 1.5"></a-text>
3D MODELS
We can load 3D assets in many different ways. One solid file is a glft. It should be added with an element called <a-asset-item>. After putting it in the assets, we can create a new element: <a-gltf-model>.
Places to download 3D models as glTF files include Google Poly, Sketchfab, and Clara.io. Programs to create models include Blender, Autodesk Maya, and Supercraft.
ANIMATION
A-Frame does have a built-in animation component. An animation has 5 properties:
- Property tells it what to animate, for example the x axis or y axis, property:
- The next position to go from the original axis position, to:
- Direction, dir:
- Duration, dur:
- Loop, loop:
LIGHTING
We use the <a-light> primitive. Types of lighting include ambient, point, etc.
For example:
<a-light
type="point"
intensity="2"
position="2 4 4"></a-light>
SOUND AND POSITIONAL AUDIO
First you add an audio element to the assets. Then you can make a primitive called <a-sound>
THE INSPECTOR
Left hand panel is all the entities.
Right hand panel is info about selected entity.
Open inspector: CONTROL + OPTION + i (Mac)
CTRL + ALT + i (Windows)