Nimoy Prospers Mystically

    aframe-slideshow-component

    1.0.0 • Public • Published

    aframe-slideshow-component

    Version License

    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.

    Thomas drawing over the slides

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

    Live demo of the component

    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!

    Install

    npm i aframe-slideshow-component

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • tbalouet