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 now all should be updated to using 0.9.2.

Now, the notes:

• figures-01: First steps in creating an A-frame scene
• pictures-01: Some pictures around
• figures-04: Adding complex 3D objects
• moving-01: Adding 3D objects with animations
• data-01: Visualizing data
• data-02: Visualizing data with components
• data-03: Visualizing data (fully componentized)
• data-04: Visualizing data (JSON documents)
• interaction-01: Learning to move
• interaction-02: Selecting objects
• physics-01: Adding some physics
• physics-02: A camara respecting (some) physics
• camrender-01: Cameras and screens
• camrender-02: More and more screens!
• camrender-03: Making it components
• ar-01: Augmented reality
• newyear-01: Scene for greeting the new year

Some of the code used in the examples is available as A-Frame reusable components, which you can just include in your code.

While I was learning about A-Frame, I was also learning about Webpack, and I took some notes:

• webpack/figures-02: Simple configuration for webpack
• webpack/figures-03: Improving webpack configuration
• webpack/figures-04: Adding a complex object

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:

• Some 3D plots
• Playing towards my 3D scatterplots
• Adding axis and tooltips

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.

Some examples of A-Frame scenes:

• Scene by Álvaro López

• Scene by Alvaro Villalba Cabañas