A playground for learning about A-frame
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.4.0, and some demos are already migrated to 1.5.0.
I have organized a part of the material in a seminar consisting of three sessions:
And there is also a series of demos which show different aspects of A-Frame:
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]
Some pictures around. Simple scene showing how to set up several pictures around you, that can be used to decorate a real room, when using augmented reality. [Source code]
Adding complex 3D objects. 3D objects in various formates can be easily included in the scene. Let’s see how to add OBJ and GLTF objects in a simple scene. [Source code]
Adding 3D objects with animations 3D objects in GLTF format may encode animations. It is easy to have those objects animated in our 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]
Selecting objects. We can also interact with the scene causing some events to fire, and changing properties of the different objects in the scene when they are fired. [Source code]
Adding some physics. Let’s have some fun adding gravity, collisions, impulse… [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.
[Source code]
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]
Working with JavaScript Let’s inject some objects in the scene using JavaScript, just by adding elements to the scene in the DOM, or via an A-Frame component. We will also start to explore how to use events.
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]
Visualizing data We can use A-Frame for visualizing data. Let’s go! [Source code]
Visualizing data with components We can do the same visualization, but now using components. [Source code]
Visualizing data (fully componentized) Still a bit further in the “componentization” path. [Source code]
Visualizing data (JSON documents) A final touch: visualizing data in JSON documents. [Source code]
Creating an elevation map from Copernicus data. All the process from elevation datasets to 3D elevation maps. [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.
If you spot any error, please open an issue. If you want to contribute with changes, please submit a pull request.
Check out some examples and demos!!