aframe-slideshow-component v1.0.0
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:
<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-componentThen 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!
7 years ago