aframe-presentation-kit

Official starter slides for giving talks and presentations about A-Frame.

VIEW SLIDES

Installation

1. Download the repository (.ZIP)
2. Start the local server (npm run start)
3. Open http://localhost:8080 in your browser

Table of Contents

• Introduction
• Virtual Reality
  • Hardware
  • Friction of VR Ecosystems
• WebVR
  • Advantages
  • API
  • Browser Support
  • The Web is Ready for VR
  • Metaverse
  • Barrier to Entry
• A-Frame
  • Introduction
  • Hello World
  • Primitives
• Entity-Component-System
  • Concept
  • Composing an Entity
  • Writing a Component
• Integration
  • JavaScript
  • Libraries & Frameworks
  • 3D Tools
• Ecosystem
  • Community
  • Components
  • Scenes
• Conclusion

Modifying Design

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.

Modifying Content

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.
• Is your audience interested in underlying code (i.e., JavaScript, A-Frame components, three.js)? - If not, then trim the Entity-Component-System 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 scene.

Deployment

In your GitHub repository settings page under GitHub Pages and Source, select master branch. Then simply push to your GitHub repo, and then your slides will be live at https://yourusername.github.io/aframe-presentation-kit or whatever you named the repository. Read more about GitHub Pages.

Presenting

Serve the slides locally from your computer for better network performance.

Press the 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 <esc> or o key 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 these public speaking guide and good luck!