aframe-playground

KO | EN

gitlite — search

#javascript #react #golang #go #rust #linux #macos #awesome #cli #vue #awesome-list #pytorch #ios #open-source

aframe-playground

(★ 80)

A playground for learning about A-frame

File Explorer

Download Latest Version (.zip)

- ar-moving.html
- ar.html
- pattern-hiro-1up.pdf
- pattern-hiro-2up.pdf
- pattern-hiro-4up.pdf
- pattern-hiro.pdf
- pattern-hiro.png
- README.md
- ar.html
- bitergia-owl-big.png
- halftone-pixel.png
- marker-2up.pdf
- marker-4up.pdf
- marker.pdf
- marker.png
- pattern-marker.patt
- py-quart.py
- README.md
- - urjc.obj
- - Roboto-msdf.json
  - Roboto-msdf.png
- - bands.jpg
  - molinos-bw.jpg
  - plaza-360.jpg
  - soil.jpg
  - window.jpg
- - aframe-extras.min.js
  - aframe.min.js
- README.md
- aframe-cameras-1.gif
- aframe-cameras-2.gif
- aframe-cameras-3.gif
- cameras-1.html
- cameras-2.html
- cameras-3.html
- camrender.js
- README.md
- aframe-cameras-4.gif
- aframe-cameras-5.gif
- aframe-cameras-6.gif
- cameras-4.html
- cameras-5.html
- cameras-6.html
- camrender.js
- README.md
- cameras-6.html
- README.md
- - aframe-playground-components.js
  - aframe-playground-components.min.js
- camrender.js
- canvas-updater.js
- index.js
- LICENSE
- package.json
- README.md
- - data.html
  - data.js
- - bundle.js
  - bundle.js.map
  - index.html
- package.json
- README.md
- webpack.config.js
- - data.html
  - data.js
- - bundle.js
  - bundle.js.map
  - index.html
- package.json
- README.md
- webpack.config.js
- - data.html
  - data.js
- - bundle.js
  - bundle.js.map
  - index.html
- package.json
- README.md
- webpack.config.js
- - data.html
  - data.js
  - data.json
- - bundle.js
  - bundle.js.map
  - data.json
  - index.html
- package.json
- README.md
- webpack.config.js
- - bundle.js
  - bundle.js.map
  - data.json
  - index.html
- - data.html
  - data.js
  - data.json
- package.json
- README.md
- webpack.config.js
- fifth.html
- first.html
- fourth-ar.html
- fourth-mouse.html
- fourth-vr.html
- fourth.html
- README.md
- second.html
- sixth.html
- third.html
- figures.html
- figures.js
- README.md
- grab-2.html
- grab-ar-2.html
- grab-ar-3.html
- grab-ar.html
- grab-physics.html
- grab.html
- medieval_fantasy_book.glb
- README.md
- sculpture.glb
- aframe-moving.gif
- basic-camera.html
- basic.html
- moving-camera-2.html
- moving-camera-3.html
- moving-camera.html
- README.md
- aframe-selection-mouse.gif
- drag.html
- README.md
- selection-2.html
- selection-3.html
- selection-mouse.html
- selection.html
- globes.html
- globes.js
- README.md
- scene1-mc.html
- scene1.html
- scene1.js
- scene2.html
- scene2.js
- scene3-mc.html
- scene3.html
- scene3.js
- color-relief.txt
- elevation.html
- map.bin
- map.png
- README.md
- terrain.html
- terrain.png
- terrain.py
- terrain.xml
- wireframe.html
- kinema.js
- maze.html
- README.md
- view.js
- figures.html
- README.md
- aframe-environment-component-7528e44.min.js
- aframe-extras-5.0.0.min.js
- aframe-master-cf15c15.min.js
- aframe-newyear-2.gif
- aframe-newyear.gif
- aframe-particle-system-component-1.1.3.min.js
- aframe-text-geometry-component-0.5.1.min.js
- fireworks.mp3
- newyear-2.html
- newyear.html
- README.md
- aframe.min.js
- first.html
- moneda-urjc.obj
- aframe-falling.gif
- aframe-impulse.gif
- aframe-velocity.gif
- fall.html
- impulse.html
- README.md
- velocity.html
- aframe-camera.gif
- camera-2.html
- camera.html
- kinema.js
- README.md
- - picture01.jpg
  - picture02.jpg
  - picture03.jpg
  - picture04.jpg
  - picture05.jpg
  - picture06.jpg
  - picture07.jpg
  - picture08.jpg
- pictures.html
- README.md
- - cities.json
  - index.html
  - main.js
  - Roboto-msdf.json
  - Roboto-msdf.png
- package.json
- README.md
- webpack.config.js
- - cities.json
  - index.html
  - main.js
  - Roboto-msdf.json
  - Roboto-msdf.png
- - bundle.js
  - bundle.js.map
  - index.html
- package.json
- README.md
- webpack.config.js
- - index.html
  - main.js
  - Roboto-msdf.json
  - Roboto-msdf.png
- - bundle.js
  - bundle.js.map
  - index.html
  - Roboto-msdf.json
  - Roboto-msdf.png
- package.json
- README.md
- webpack.config.js
- 01-first-1.png
- 01-first-2.png
- box-spheres-1.png
- box-spheres-2.png
- box-spheres-3.png
- data-01.png
- data-04.png
- scatterplot-axis-tooltip.png
- scatterplot.png
- babia_cert.pem
- babia_key.pem
- basic.html
- basic_move.html
- README.md
- basic_ar.html
- basic_ar2.html
- basic_events.html
- basic_events2.html
- basic_hands.html
- basic_hands2.html
- README.md
- basic_gltf.html
- basic_gltf2.html
- component2.js
- component3.js
- component4.js
- component5.js
- dino-orig.glb
- dino.glb
- drone.glb
- README.md
- scene_component.html
- scene_component2.html
- scene_component3.html
- scene_component4.html
- scene_component5.html
- README.md
- splat.html
- splat2.html
- splat3.html
- bands.jpg
- scene-1.html
- scene-2.html
- scene-3.html
- scene-4.html
- scene-5.html
- soil.jpg
- window.jpg
- - AUTHOR
  - LICENSE
  - scene.bin
  - scene.gltf
- bands.jpg
- README.md
- robot.ogg
- scene-6.html
- scene-7.html
- scene-8.gif
- scene-8.html
- soil.jpg
- window.jpg
- - index.html
  - main.js
  - Roboto-msdf.json
  - Roboto-msdf.png
- package.json
- README.md
- webpack.config.js
- test.html
- - aframe.min.js
  - bands.jpg
  - fifth.html
  - first.html
  - fourth.html
  - molinos-bw.jpg
  - plaza-360.jpg
  - README.md
  - Roboto-msdf.json
  - Roboto-msdf.png
  - second.html
  - soil.jpg
  - third.html
  - window.jpg
- - package.json
  - README.md
  - webpack.config.js
- - package.json
  - README.md
  - webpack.config.js
- - package.json
  - README.md
  - webpack.config.js
- - package.json
  - README.md
  - webpack.config.js
.gitignore
_config.yml
aframe-playground-qr.png
demos.md
environment.md
LICENSE
README.md
tricks.md
update_releases.py

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Some notes while 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:

* [Seminar Session 1](seminar-01)
* [Seminar Session 2](seminar-02)
* [Seminar Session 3](seminar-03)

And there is also a series of demos which show different aspects of A-Frame:

* [Setting up an environment for running demos](environment.md)

* [First steps in creating an A-frame scene](figures-01/README.md).
  Let's build some simple scenes, based on the [first scene introduced
  by the A-Frame documentation](https://aframe.io/docs/1.4.0/introduction/#getting-started).
  Geometric bodies, simple textures, some lights, some minimal interaction
  with the scene...
  [[Source code](https://github.com/jgbarah/aframe-playground/tree/master/figures-01)]

* [Some pictures around](pictures-01/README.md).
  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](https://github.com/jgbarah/aframe-playground/tree/master/pictures-01)]

* [Adding complex 3D objects](figures-04/README.md).
  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](https://github.com/jgbarah/aframe-playground/tree/master/figures-04)]

* [Adding 3D objects with animations](moving-01/README.md)
  3D objects in GLTF format may encode animations. It is easy to have those
  objects animated in our scene.
  [[Source code](https://github.com/jgbarah/aframe-playground/tree/master/moving-01)]

* [Learning to move](interaction-01/README.md).
  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](https://github.com/jgbarah/aframe-playground/tree/master/interaction-01)]

* [Selecting objects](interaction-02/README.md).
  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](https://github.com/jgbarah/aframe-playground/tree/master/interaction-02)]

* [Playing with hands](hands-01/README.md).
  [[Source code](https://github.com/jgbarah/aframe-playground/tree/master/hands-01)]

* [Adding some physics](physics-01/README.md).
  Let's have some fun adding gravity, collisions, impulse...
  [[Source code](https://github.com/jgbarah/aframe-playground/tree/master/physics-01)]

* [A camara respecting (some) physics](physics-02/README.md).
  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](https://github.com/jgbarah/aframe-playground/tree/master/physics-02)]

* [Cameras and screens](camrender-01/README.md)
  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](https://github.com/jgbarah/aframe-playground/tree/master/camrender-01)]

* [More and more screens!](camrender-02/README.md)
  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](https://github.com/jgbarah/aframe-playground/tree/master/camrender-02)]

* [Working with JavaScript](js-01/README.md)
  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](camrender-03/README.md)
  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](https://github.com/jgbarah/aframe-playground/tree/master/camrender-03)]

* [Gaussian splats](splats/README.md)
  Visualizing Gaussian splats with A-Frame.

* [Visualizing data](data-01/README.md)
  We can use A-Frame for visualizing data. Let's go!
  [[Source code](https://github.com/jgbarah/aframe-playground/tree/master/data-01)]

* [Visualizing data with components](data-02/README.md)
  We can do the same visualization, but now using components.
  [[Source code](https://github.com/jgbarah/aframe-playground/tree/master/data-02)]

* [Visualizing data (fully componentized)](data-03/README.md)
  Still a bit further in the "componentization" path.
  [[Source code](https://github.com/jgbarah/aframe-playground/tree/master/data-03)]

* [Visualizing data (JSON documents)](data-04/README.md)
  A final touch: visualizing data in JSON documents.
  [[Source code](https://github.com/jgbarah/aframe-playground/tree/master/data-04)]

* [Creating an elevation map from Copernicus data](maps/README.md). All the process from elevation datasets to 3D elevation maps. [[Source code](https://github.com/jgbarah/aframe-playground/tree/master/maps)]

* ar-01: [Augmented reality](ar-01/README.md)
* newyear-01: [Scene for greeting the new year](newyear-01/README.md)

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

[Some tricks that could be useful](tricks.md), for A-Frame, for Oculus devices...

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-02/README.md)
* webpack/figures-03: [Improving webpack configuration](webpack/figures-03/README.md)
* webpack/figures-04: [Adding a complex object](webpack/figures-04/README.md)

I have also produced a
[templates directory](templates/README.md),
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](plots-01/README.md)
* [Playing towards my 3D scatterplots](plots-02/README.md)
* [Adding axis and tooltips](plots-03/README.md)

To find more community-maintained A-Frame components:

* [C-Frame](https://github.com/c-frame): A collection of common components for A-Frame
* [Component Directory](https://aframe.wiki/en/#!pages/component-directory.md):
  List of community-maintained A-Frame components

All the code is in the
[A-Frame Playground GitHub repo](https://github.com/jgbarah/aframe-playground).

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](https://glitch.com).
For example, the first example in Glitch: [project](https://glitch.com/~jumbled-whistle),
[live app](https://jumbled-whistle.glitch.me).

If you spot any error, please
[open an issue](https://github.com/jgbarah/aframe-playground/issues/new).
If you want to contribute with changes, please
[submit a pull request](https://github.com/jgbarah/aframe-playground/pulls).

Check out some [examples and demos](demos.md)!!

aframe-playground

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

aframe-playground

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README