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.
Link to the A-Frame presentation made at Devfest Lille 2017
For A-Frame.
The component fetch slides from a folder (local or online). For the moment only videos and images are allowed. Slides are displayed in your 3D environment and the component allow you to navigate from one slide to the other.
Actual features are:
- Add video or image slides (need to list video indexes in 'vidSlidesIndex' array)
- Pin access to direct slide example
- Navigate through slides with left/right arrows or Oculus Touch triggers
- Add animation between transition (need to list animated slides indexes in 'animSlidesIndex' array and set curve height in 'transitionHeight')
| 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' |
| vidSlidesIndex | Array of indexes of video slides | [] |
| animSlidesIndex | Array of indexes of slides with animated transition | [] |
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>
<div id="loaderDiv">Loading slides...</div>
<a-scene>
<!-- A-FRAME SCENE CAMERAS -->
<a-entity id="camParent" position="0 0 0">
<a-entity id="acamera" camera="user-height:1.6" look-controls></a-entity>
</a-entity>
<a-entity aframe-slideshow="nbslides:5;folder:public/assets/slides/;namingConv:Slide_%num%;vidSlidesIndex:3;animSlidesIndex:5"></a-entity>
</a-scene>
</body>Install via npm:
npm install aframe-slideshow-componentThen require and use.
require('aframe');
require('aframe-slideshow-component');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!