These are my notes, taken while learning about A-frame. Maybe they could be useful to others, but your mileage may vary…
In any case, feel free to pull request if you find errors, or if you have cool ideas to improve some of the steps. But keep in mind that it is just a simple guide, to start with A-frame from scratch.
I started with version 0.6.1, which was current when I started my learning process, but (if there is no mistake) everything is updated to using 1.2.0.
First steps in creating an A-frame scene. Let’s build some simple scenes, based on the first scene introduced by the A-Frame documentation. Geometric bodies, simple textures, some lights, some minimal interaction with the scene… [Source code]
Learning to move. Moving around in the scene involves having a camera. But when we include it, we lose the “default” one that A-Frame injected for us. Let’s learn how to have a camera and explicit movement controls that work in different devices. [Source code]
A camara respecting (some) physics. The camera in the scene now collides with objects, pushes some of them (if they are dynamic) and shows collision (by showing a wireframe) with others (if they are static). Works well both in the computer and in VR devices. [Source code]
Cameras and screens
Let’s write a simple A-Frame component (
camrender) while we learn
how we can have more cameras in the scene,
and how we can project what those cameras “see”
in different surfaces of the scene itself.
More and more screens! We can explore cameras further, just because cameras are funny. Let’s add screens and cameras that move with our main camera (like head-mounted displays), multiple screens showing the same camera, and much more. [Source code]
Making camera-related components Now, time to recap, and learn more about components, by making components for the functionalty we learned in the previous exercises: componets for the camera-related behaviours we tried. [Source code]
Some of the code used in the examples is available as A-Frame reusable components, which you can just include in your code.
Some tricks that could be useful, for A-Frame, for Oculus devices…
While I was learning about A-Frame, I was also learning about Webpack, and I took some notes:
I have also produced a templates directory, which I’m using as I learn about A-frame and webpack and npm and all the stuff.
Some old stuff, that very likely won’t even work:
All the code is in the A-Frame Playground GitHub repo.
For the examples, you can use your own GitHub or GitLab repos, configuring them to be exported as web sites. But if you want a simple yet powerful system to test your code, you can also use Glitch.com. For example, the first example in Glitch: project, live app.
Check out some examples and demos!!