aframe-slideshow-component

A component to present slide shows inside an A-Frame scene

The point is to allow you to embed your slides inside a WebVR demo done with A-Frame, to simplify presentations and directly showcase features to your users.

This was used during the DevFestLille June 2017 by Thomas Balouet (@thomasbalou) and Fabien Benetou (@utopiah). We demonstrated use of 3D Web (by the existence of the Slideshow in 3D itself), as well as the Gamepad API, and the A-Painter project allowing us to draw over the slides in VR. The component's work is to fetch images and videos in a repository, display them in the 3D space as planes and enable the user to navigate through them.

Thomas drawing over the slides

Link to the A-Frame presentation made at Devfest Lille 2017

Live demo of the component

For A-Frame.

API

Property	Description	Default Value
transitionHeight	Height of the animated curve between two slides	'2'
stepTransition	Speed of the animated transition	'0.01'
folder	Folder of the slides assets (relative path or absolute for ext. hosting)	'public/assets/slides/'
namingConv	Naming convention of the slides where %num% represent slide number	'Slide_%num%'
imageExtension	File extension for image assets	'jpg'
videoExtension	File extension for video assets	'mp4'
nbslides	Total number of slides	'0'
startpos	Default position for the first slides	undefined
distBetweenSlides	Distance between two slides	'5'
nbColumns	Number of columns for display arrangement	'5'
slideYPos	Y position of the slides	'1.6'

Installation

Browser

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> 
  <script src="https://unpkg.com/aframe-slideshow-component/dist/aframe-slideshow-component.min.js"></script> 
</head>
 
<body>
  <a-scene>
    <a-entity aframe-slideshow="nbslides:5;folder:public/assets/slides/;namingConv:Slide_%num%;vidSlidesIndex:3;animSlidesIndex:5"></a-entity>
  </a-scene>
</body>

npm

Install via npm:

npm install aframe-slideshow-component

Then require and use.

require('aframe');
require('aframe-slideshow-component');

Next steps

If the component interest people, here are the main next steps to implement

Add more controller to browse the slides (Daydream/Gear VR controller, Vive ones)
Allow "public view" for the audience to access the Web app with special controls (probably mobile) and live browsing
Add audience interaction (clicking on a slide would make 3D models pop up for example)
Any other idea? Please add an issue!

aframe-slideshow-component