tbalouet/aframe-slideshow

aframe-slideshow-component

A component to present slide shows inside an A-Frame scene

Using the Slideshow component to browse through slides, using keyboard and oculus controller

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.

Thomas drawing over the slides

Link to the A-Frame presentation made at Devfest Lille 2017

Live demo of the component

For A-Frame.

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
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:

<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>

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!