aframe-slideshow-component
v1.0.0
Published
A component to present slide shows inside an A-Frame scene
Downloads
3
Maintainers
Readme
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-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!