An Introduction to
A-Frame
It's A Frame work
for easily working
with WebGL and VR
Use markup to createVR experiences that work across desktop , iOS , Android , and VR Headsets
Entity: an object
<a-entity>
Common entities
<a-box>
, <a-sphere>
, <a-plane>
, <a-obj-model>
and many more...
Component: a property
<a-entity width="2">
Common components:
width
, height
, depth
, radius
, material
, geometry
, src
, id
, position
, rotation
and many more...
Creating a red box
<a-scene >
<a-box
color ="red"
> </a-box >
</a-scene >
Sizing
You can either usewidth="2" height="2" depth="2"
or the geometry component:geometry="width: 2; height: 2; depth: 2"
Scaling
Specified in terms of x , y and z axisscale="1 1 1"
Can use negative numbers to mirror an axisscale="-1 -1 1"
Positioning
Starts from 0 0 0 in your scene Specified in terms of x , y and z axisposition="0 0 0"
Materials
The appearance of an entity Used to define color , opacity rendering effect and texture src material="color: red; opacity: .5"
Lighting
Cast light in your sceneTypes: ambient, directional, hemisphere, point, spot Can also specify the color, intensity, angle
Assets
Used for preloading textures , sounds , videos , and defining mixins
<a-assets >
<img id ="texture1" src ="texture.png" />
<audio id ="coin" src ="coin.mp3" > </audio >
<video id ="rick" src ="nggyu.mp4" > </video >
<a-mixin id ="massive" scale ="10 10 10" > </a-mixin >
</a-assets >
Animating
Specify the attribute to animate, the state to go from and to , the dur ation, of the animation, the fill mode, repeat count, direction and easing method.
<a-entity ... >
<a-animation
attribute ="rotation"
dur ="10000"
fill ="forwards"
to ="0 360 0"
easing ="linear"
repeat ="indefinite"
> </a-animation >
</a-entity >
Interaction Interact with entities through clicking or gazing
Basically... when you look at stuff you can make stuff happen
Read the A-Frame docs for cursor
Manipulating things with Javascript
Vanilla JavaScript
.querySelector('a-image' )
.getAttribute('opacity' )
.setAttribute('material' , 'color' , 'red' )
.addEventListener('collide' )
.createElement('a-entity' )
With libraries...
$('a-box' ).attr('width' , 5 );
d3.select('a-scene' )
.selectAll('a-box.bar' )
.data(data);
If you hate writing HTML-esque markup
Use a templating language!
a-scene(
fog='type: linear; far: 20; color: #1a1a1a'
)
a-entity(
position='2 2.5 0'
rotation='0 12 0'
)
each foo,index in locals.bar
a-entity(
position=(index * 1.4 ) + ' 0 ' + (index * -2 )
rotation='0 ' + (index * -15 ) + ' 0'
)
Previous slide Page 1 of 33 Next slide Toggle fullscreen Open presenter view