First steps
Introduction
This getting started tutorial will teach you the very basics on how to get going with A-Frame from making a simple cube to animations and then bringing it all together with a game.
Click next...
This getting started tutorial will teach you the very basics on how to get going with A-Frame from making a simple cube to animations and then bringing it all together with a game.
Click next...
You can type in the box below.
When you make a change you can press the execute button and see the result on the right.
Let's get something on the screen, copy and paste this code into the box.
Don't forget to hit the execute button!
<a-box position="0 0 -3" rotation="45 45 0" color="purple"></a-box>
When you've made something interesting you can see it in the right hand side box and you can click and drag on it to pan around.
While this is useful for debugging, it isn't really VR. That's why we've created a way to view it on a phone or other webVR compatable device.
See those characters in the bottom right? Open your device and go to http:///preview and type in those characters.
Now you should see your code on the device.
Let's begin with a simple 3D box. Can you work out how to change the colour of the box? Try changing it to orange.
Great! You've just changed your first VR element. For a slightly harder challenge, see if you can work out how to move the box on the screen.
Hint: Change one number at a time to try to work out what each one does.
Also make sure you pick small numbers to change them by such as 1.
We'll do something a little more complicated now. Try to rotate the box to see it from different angles. What do each of the three numbers do?
Hint: They are measured in degrees.
Try to work out what each number in scale="1 1 1" means then try to make two boxes one big box and another really small.
Hint: Only change one number at a time.
To add an animation you need to place it inside the box. Try copying and pasting the animation tag below and seeing what it does.
<a-animation attribute="rotation" dur="20000" from="0 0 0" to="360 360 0" repeat="indefinite" easing="linear"></a-animation>
Right now it's quite slow, how would you make it faster? Can you also change the direction?
You've managed to change the one I made for you, see if you can make your own! Can you add a new animation to make the box go from orange to purple?
Let's add something a bit more fun. The box will go purple when you look at it and orange when you look away. See if you can finish this effect off using another animation and mouseleave. Notice how the animation uses begin to specify when to start the effect.
Nice! We'll make one more that uses scale to make the box tiny when click begins. Just like position, scale needs three numbers.
This website has been made by volenteers at Coderdojo London and it is entirely open source. You can even see the code at https://github.com/CoderDojoLondon/vr.
We'd love your help on how to make improvements and we warmly accept any suggestions with what we can do to improve.
Also we would really like you to say if you experienced any problems by opening an issue.
While you wait for more awesome tutorials on this website why don't you checkout the offical A-Frame website.
You might notice that we have hidden some extra code you need to get started but don't worry! You can download some boilerplate code to get yourself started.