Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rvdleun/aframe-presentation-component

An AFrame component that lets you create a 3D slidedeck
https://github.com/rvdleun/aframe-presentation-component

Last synced: 2 months ago
JSON representation

An AFrame component that lets you create a 3D slidedeck

Awesome Lists containing this project

README 

        
# AFrame Presentation Component

This presentation component will let you setup an AFrame scene to work like a slidedeck. By using the presentation and slide components, you can move the camera and trigger animations when moving back and forth through the slides.



Note: This documentation will only cover the primitives that are needed to setup the presentation. If you're interested in learning more about the components running them and an alternate way to setup a presentation via `` elements instead, please read the [DEVELOPMENT.md](development.md) file.



## Example

```html



  

    

    Example project

    



    

    

  

  

    

      

        

      



      

        

      



      

        

      



      

        

      



      

        

      



      

        

          

        

        

          

        

        

          

        

        

          

        

      

    

  



```



## Setup

After setting up your AFrame scene, first setup an entity with only a camera element.



```html



```



Then add a `` element.



```html



```



Next, add an `` element for every slide you need.



```html



  

  

  

  

  

  



```



Finally, you can add actions to every `a-slide` to indicate what actions should be triggered once you get to that slide. This could mean moving the camera, triggering animations or making entities appear or disappear.



```html



  

    

  

    

    

  

    

  

  

    

    

  



```



To get a full idea of every element, read on...



## Primitives



### a-presentation



```html



```



#### Description

The `a-presentation` primitive contains all elements makes up the slide deck.



#### Parameters



| Parameter | Default | Description |

| --------- | ------- | ----------- |

| **aspect-ratio** | null | Sets an aspect ratio for the canvas. The format is `width:height`. For example: `16:9`.

| **progress-bar** | true | Adds a progress bar to the bottom of the document that will update every time you change slides. If you want to style it, the `div` element gets an id named `aframe-presentation-progress-bar`.

| **shortcuts** | true | Whether the user can move back and forth through the slides by using the arrow keys on the keyboard or by swiping the screen (for touch device).

| **use-hash** | true | Will use the URL's hash to store the current slide and move to that slide when the user enters the page.



#### Events



Whenever the user changes slides, events are fired off on the presentation primitive, the new slide and the previous slide. Each event gets the following details...



| Key | Description |

| --- | ----------- |

| **currentSlide** | The `a-slide` that is getting activated. |

| **direction** | In which direction the user moved. -1 if the user went to a previous slide, 1 if to the next. |

| **instant** | If the slide-action should move to the end. | 

| **previousSlide** | The previous slide that was active |



##### a-presentation.slide-change

The `a-presentation.slide-change` is fired on the `a-presentation` element whenever a slide changes.



##### a-presentation.slide-inactive

Is fired on the previous active `a-slide`.



##### a-presentation.slide-active

Is fired on the current active `a-slide`.



### a-slide

```html



```



#### Description

The `a-slide` is a container for all slide actions. It will pass all events to its children.



## Slide actions



### a-slide-animation

```html



...



```



#### Description

The `a-slide-animation` will automatically trigger AFrame [animations](https://aframe.io/docs/0.9.0/components/animation.html) to play. 



Note: Each animation should have its own [namespace](https://aframe.io/docs/0.9.0/components/animation.html#multiple-animations), and `autoplay` should be set to `false`. There is also no proper support yet for looping animations.



#### Parameters

| Parameter | Default | Description |

| --------- | ------- | ----------- |

| animations | [] | Which animation namespaces need to be trigger. |

| selector |  | What [selector](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) is used to find all elements with animations to trigger. |



### a-slide-camera

```html



```

The `a-slide-camera` will move the camera to a new position.



#### Parameters

| Parameter | Default | Description |

| --------- | ------- | ----------- |

| duration | 1000 | How long the animation will last in miliseconds |

| easing | linear | Easings define the accelerations and speed throughout the cycle of the animation. [See a list of possible values here.](https://aframe.io/docs/1.0.0/components/animation.html#easings) |

| position | 0 0 0 | The new position |

| rotation | 0 0 0 | The new rotation |



### a-slide-visibility

```html



...



```



#### Description

The `a-slide-visibility` will change an entity's visibility by changing its `visible` attribute.



Note: When moving back one slide, the entities' visibility will be set to the opposite value.



#### Parameters

| Parameter | Default | Description |

| --------- | ------- | ----------- |

| selector |  | What [selector](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) is used to find all elements whose visibility needs to be changed. |

| visibility | false | Whether the entity should become visibile or not |



## Creating your own slide action

By making use of the `a-presentation.slide-inactive` and `a-presentation.slide-active` events, it is possible to create your own custom actions that can be easily reused per slide.



As seen in the `examples/overview.html`, here is an action that will change an [aframe-environment](https://github.com/supermedium/aframe-environment-component) whenever a slide becomes active.



```javascript

AFRAME.registerComponent('slide-environment', {

    schema: {

        settings: { type: 'string', default: 'preset: default' },

    },



    init: function() {

        this.el.addEventListener('a-presentation.slide-active', () => {

            const { settings } = this.data;



            if (this.el.sceneEl.getAttribute('environment') === settings) {

                return;

            }



            const elements = [].slice.call(document.querySelectorAll('.environment'));

            elements.forEach((element) => {

                element.parentNode.removeChild(element);

            });



            this.el.sceneEl.removeAttribute('environment');

            this.el.sceneEl.setAttribute('environment', settings);

        });

    }

});



AFRAME.registerPrimitive('a-slide-environment', {

    defaultComponents: {

        'slide-environment': {},

    },



    mappings: {

        'settings': 'slide-environment.settings',

    }

});

```



Which can then be followed as follows...



```html



  



```



If you've created a slide-action that you think could be easily reusable, then feel free to [create a pull request](https://github.com/rvdleun/aframe-presentation-component/pulls).