Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tbalouet/aframe-slideshow
A component to place 3D frames in the scene and navigate through them
https://github.com/tbalouet/aframe-slideshow
Last synced: 4 months ago
JSON representation
A component to place 3D frames in the scene and navigate through them
- Host: GitHub
- URL: https://github.com/tbalouet/aframe-slideshow
- Owner: tbalouet
- License: mit
- Created: 2017-06-07T15:57:24.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-25T10:31:37.000Z (almost 7 years ago)
- Last Synced: 2024-08-09T02:55:44.295Z (4 months ago)
- Language: JavaScript
- Homepage: https://tbalouet.github.io/aframe-slideshow/examples/basic/
- Size: 124 MB
- Stars: 13
- Watchers: 5
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## aframe-slideshow-component
[](https://npmjs.org/package/aframe-slideshow-component)
[](https://npmjs.org/package/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.
[Link to the A-Frame presentation made at Devfest Lille 2017](https://aframe-slides.firebaseapp.com)
[Live demo of the component](https://tbalouet.github.io/aframe-slideshow/examples/basic)
For [A-Frame](https://aframe.io).
### Features
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](https://tbalouet.github.io/aframe-slideshow/examples/basic/#p3)
- 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')
### 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' |
|vidSlidesIndex |Array of indexes of video slides |[] |
|animSlidesIndex |Array of indexes of slides with animated transition |[] |
### Installation
#### Browser
Install and use by directly including the [browser files](dist):
```html
My A-Frame Scene
Loading slides...
```
#### npm
Install via npm:
```bash
npm install aframe-slideshow-component
```
Then require and use.
```js
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](https://github.com/tbalouet/aframe-slideshow/issues)!