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.
Link to the A-Frame presentation made at Devfest Lille 2017
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:
My A-Frame Scene
npm
Install via npm:
npm install aframe-slideshow-component
Then require and use.
;;
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!