Official starter slides for giving talks and presentations about A-Frame.
- Download the repository (.ZIP) (>200MB)
- Start the local server (
npm run start)
http://localhost:8080in your browser
Table of Contents
- Virtual Reality
- Friction of VR Ecosystems
- Browser Support
- The Web is Ready for VR
- Barrier to Entry
- Hello World
- Multiuser Demo
- Composing an Entity
- Structure of a Component
The kit uses reveal.js, an HTML presentation framework. If you wish to customize, read their documentation to see how to configure and style the slide deck.
For styling, the kit theme is based on the white theme found in the reveal.js
repository. This has been copied to
src/main.css which you can replace or
Modify the content.md file to edit content. Slides are written in Markdown
and separated by six hyphens
------. You can also add vertical slides by
separating with three hyphens
---. The slides are grouped, using vertical
slides to drill down or build on general points. You can add speaker notes
by putting content under
<!-- NOTES --> on each slide.
Tailor the content to your audience. Filter out slides depending on the answers to these questions (as well as the allotted length of your talk). For example:
- Is your audience familiar with virtual reality? - If so, you might want to skip or trim the Virtual Reality section.
Adding A-Frame Scenes
A-Frame scenes are embedded right within the slides so you can demo without
having to navigate away. The kit will recognize
<div data-aframe-scene="scenes/yourscene.html"></div> and load in the A-Frame
In your GitHub repository settings page under GitHub Pages and Source,
master branch. Then simply push to your GitHub repo, and then your
slides will be live at
or whatever you named the repository. Read more about GitHub
Serve the slides locally from your computer for better network performance.
f key on your keyboard to go full screen. Press the
s key on your
keyboard to open up the Speakers Notes window. Press the
on your keyboard to see a zoomed out overview of the slides.
There are slides with embedded A-Frame scenes. Play with these scenes live from right within the slide. Click and drag to look around. You may enter full screen, or if you have a headset connected, enter VR.
Open up a scene in the A-Frame Inspector by pressing
<ctrl> + <alt> + i on
your keyboard. This will open up an embedded A-Frame scene in a visual tool.
Check out this public speaking guide and good luck!