{"id":13733350,"url":"https://github.com/rvdleun/aframe-presentation-component","last_synced_at":"2025-10-14T10:40:03.532Z","repository":{"id":37882565,"uuid":"210172798","full_name":"rvdleun/aframe-presentation-component","owner":"rvdleun","description":"An AFrame component that lets you create a 3D slidedeck","archived":false,"fork":false,"pushed_at":"2023-01-05T22:52:57.000Z","size":2216,"stargazers_count":20,"open_issues_count":17,"forks_count":7,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2025-10-09T22:41:32.719Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://aframe-presentation.rvdleun.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rvdleun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-22T15:46:42.000Z","updated_at":"2023-10-28T07:03:52.000Z","dependencies_parsed_at":"2023-02-04T22:02:15.168Z","dependency_job_id":null,"html_url":"https://github.com/rvdleun/aframe-presentation-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rvdleun/aframe-presentation-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rvdleun%2Faframe-presentation-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rvdleun%2Faframe-presentation-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rvdleun%2Faframe-presentation-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rvdleun%2Faframe-presentation-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rvdleun","download_url":"https://codeload.github.com/rvdleun/aframe-presentation-component/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rvdleun%2Faframe-presentation-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018784,"owners_count":26086452,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T03:00:41.687Z","updated_at":"2025-10-14T10:40:03.509Z","avatar_url":"https://github.com/rvdleun.png","language":"JavaScript","readme":"# AFrame Presentation Component\nThis 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.\n\nNote: 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 `\u003ca-entity\u003e` elements instead, please read the [DEVELOPMENT.md](development.md) file.\n\n## Example\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eExample project\u003c/title\u003e\n    \u003cmeta name=\"description\" content=\"Example project\"\u003e\n\n    \u003cscript src=\"https://aframe.io/releases/0.9.2/aframe.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/aframe-presentation-component/dist/aframe-presentation-component.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ca-scene vr-mode-ui=\"enabled: false\"\u003e\n      \u003ca-box color=\"red\" position=\"0 3 -3\"\u003e\n        \u003ca-text position=\"0 -1 0\" align=\"center\" value=\"Box\"\u003e\u003c/a-text\u003e\n      \u003c/a-box\u003e\n\n      \u003ca-sphere color=\"blue\" position=\"6 3 -3\" scale=\".75 .75 .75\"\u003e\n        \u003ca-text position=\"0 -1.333 0\" scale=\"1.333 1.333 1.333\" align=\"center\" value=\"Sphere\"\u003e\u003c/a-text\u003e\n      \u003c/a-sphere\u003e\n\n      \u003ca-triangle color=\"green\" position=\"12 3 -3\"\u003e\n        \u003ca-text position=\"0 -1 0\" align=\"center\" value=\"Triangle\"\u003e\u003c/a-text\u003e\n      \u003c/a-triangle\u003e\n\n      \u003ca-cylinder color=\"gray\" position=\"6 3 3\"\u003e\n        \u003ca-text position=\"0 -1 0\" rotation=\"0 -180 0\" align=\"center\" value=\"Cylinder\"\u003e\u003c/a-text\u003e\n      \u003c/a-cylinder\u003e\n\n      \u003ca-entity position=\"0 3 0\" camera\u003e\n        \u003ca-text position=\"0 1.5 -3\" align=\"center\" value=\"Press \u003c- and -\u003e to move back and forth\"\u003e\u003c/a-text\u003e\n      \u003c/a-entity\u003e\n\n      \u003ca-presentation aspect-ratio=\"16:9\"\u003e\n        \u003ca-slide\u003e\n          \u003ca-slide-camera position=\"0 3 0\"\u003e\u003c/a-slide-camera\u003e\n        \u003c/a-slide\u003e\n        \u003ca-slide\u003e\n          \u003ca-slide-camera position=\"6 3 0\"\u003e\u003c/a-slide-camera\u003e\n        \u003c/a-slide\u003e\n        \u003ca-slide\u003e\n          \u003ca-slide-camera position=\"12 3 0\"\u003e\u003c/a-slide-camera\u003e\n        \u003c/a-slide\u003e\n        \u003ca-slide\u003e\n          \u003ca-slide-camera position=\"6 3 0\" rotation=\"0 -180 0\" duration=\"2500\"\u003e\u003c/a-slide-camera\u003e\n        \u003c/a-slide\u003e\n      \u003c/a-presentation\u003e\n    \u003c/a-scene\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Setup\nAfter setting up your AFrame scene, first setup an entity with only a camera element.\n\n```html\n\u003ca-entity camera\u003e\u003c/a-entity\u003e\n```\n\nThen add a `\u003ca-presentation\u003e` element.\n\n```html\n\u003ca-entity camera\u003e\u003c/a-entity\u003e\n\n\u003ca-presentation\u003e\n\u003c/a-presentation\u003e\n```\n\nNext, add an `\u003ca-slide\u003e` element for every slide you need.\n\n```html\n\u003ca-entity camera\u003e\u003c/a-entity\u003e\n\n\u003ca-presentation\u003e\n  \u003ca-slide\u003e\n  \u003c/a-slide\u003e\n  \u003ca-slide\u003e\n  \u003c/a-slide\u003e\n  \u003ca-slide\u003e\n  \u003c/a-slide\u003e\n\u003c/a-presentation\u003e\n```\n\nFinally, 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.\n\n```html\n\u003ca-entity camera\u003e\u003c/a-entity\u003e\n\n\u003ca-presentation\u003e\n  \u003ca-slide\u003e\n    \u003ca-slide-camera position=\"0 3 0\"\u003e\u003c/a-slide-camera\u003e\n  \u003c/a-slide\u003e\n    \u003ca-slide-camera position=\"2 3 0\"\u003e\u003c/a-slide-camera\u003e\n    \u003ca-slide-visibility selector=\"#background\" visibility=\"false\"\u003e\u003c/a-slide-visibility\u003e\n  \u003ca-slide\u003e\n    \u003ca-slide-visibility selector=\"#hello\" visibility=\"true\"\u003e\u003c/a-slide-visibility\u003e\n  \u003c/a-slide\u003e\n  \u003ca-slide\u003e\n    \u003ca-slide-camera position=\"10 20 10\" rotation=\"0 -180 0\" duration=\"3000\"\u003e\u003c/a-slide-camera\u003e\n    \u003ca-slide-animation selector=\"#model\" animations=\"appear,position,rotation\"\u003e\u003c/a-slide-animation\u003e\n  \u003c/a-slide\u003e\n\u003c/a-presentation\u003e\n```\n\nTo get a full idea of every element, read on...\n\n## Primitives\n\n### a-presentation\n\n```html\n\u003ca-presentation progress-bar=\"true\" shortcuts=\"false\" use-hash=\"true\"\u003e\u003c/a-presentation\u003e\n```\n\n#### Description\nThe `a-presentation` primitive contains all elements makes up the slide deck.\n\n#### Parameters\n\n| Parameter | Default | Description |\n| --------- | ------- | ----------- |\n| **aspect-ratio** | null | Sets an aspect ratio for the canvas. The format is `width:height`. For example: `16:9`.\n| **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`.\n| **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).\n| **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.\n\n#### Events\n\nWhenever 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...\n\n| Key | Description |\n| --- | ----------- |\n| **currentSlide** | The `a-slide` that is getting activated. |\n| **direction** | In which direction the user moved. -1 if the user went to a previous slide, 1 if to the next. |\n| **instant** | If the slide-action should move to the end. | \n| **previousSlide** | The previous slide that was active |\n\n##### a-presentation.slide-change\nThe `a-presentation.slide-change` is fired on the `a-presentation` element whenever a slide changes.\n\n##### a-presentation.slide-inactive\nIs fired on the previous active `a-slide`.\n\n##### a-presentation.slide-active\nIs fired on the current active `a-slide`.\n\n### a-slide\n```html\n\u003ca-slide\u003e\u003c/a-slide\u003e\n```\n\n#### Description\nThe `a-slide` is a container for all slide actions. It will pass all events to its children.\n\n## Slide actions\n\n### a-slide-animation\n```html\n\u003ca-gltf-model \n    id=\"phone\"\n    src=\"#phone-gltf\"\n    animation__position=\"property: position; from: 0 0 0; to: 0 0 3; autoplay: false\"\n    animation__rotation=\"property: position; from: 360 720 0; to: 0 0 3; autoplay: false\"\n    animation__scale=\"property: scale; from: 0.25 0.25 0.25; to: 3 3 3; autoplay: false\"\n\u003e\u003c/a-gltf-model\u003e\n\n...\n\n\u003ca-slide-animation selector=\"#phone\" animations=\"position,rotation,scale\"\u003e\u003c/a-slide\u003e\n```\n\n#### Description\nThe `a-slide-animation` will automatically trigger AFrame [animations](https://aframe.io/docs/0.9.0/components/animation.html) to play. \n\nNote: 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.\n\n#### Parameters\n| Parameter | Default | Description |\n| --------- | ------- | ----------- |\n| animations | [] | Which animation namespaces need to be trigger. |\n| 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. |\n\n### a-slide-camera\n```html\n\u003ca-slide-camera position=\"1 2 0\" rotation=\"90 180 0\"\u003e\u003c/a-slide-camera\u003e\n```\nThe `a-slide-camera` will move the camera to a new position.\n\n#### Parameters\n| Parameter | Default | Description |\n| --------- | ------- | ----------- |\n| duration | 1000 | How long the animation will last in miliseconds |\n| 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) |\n| position | 0 0 0 | The new position |\n| rotation | 0 0 0 | The new rotation |\n\n### a-slide-visibility\n```html\n\u003ca-box id=\"red-box\"\u003e\u003c/a-box\u003e\n\n...\n\n\u003ca-slide-visibility selector=\"red-box\" visibility=\"true\"\u003e\u003c/a-slide-visibility\u003e\n```\n\n#### Description\nThe `a-slide-visibility` will change an entity's visibility by changing its `visible` attribute.\n\nNote: When moving back one slide, the entities' visibility will be set to the opposite value.\n\n#### Parameters\n| Parameter | Default | Description |\n| --------- | ------- | ----------- |\n| 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. |\n| visibility | false | Whether the entity should become visibile or not |\n\n\n## Creating your own slide action\nBy 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.\n\nAs 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.\n\n```javascript\nAFRAME.registerComponent('slide-environment', {\n    schema: {\n        settings: { type: 'string', default: 'preset: default' },\n    },\n\n    init: function() {\n        this.el.addEventListener('a-presentation.slide-active', () =\u003e {\n            const { settings } = this.data;\n\n            if (this.el.sceneEl.getAttribute('environment') === settings) {\n                return;\n            }\n\n            const elements = [].slice.call(document.querySelectorAll('.environment'));\n            elements.forEach((element) =\u003e {\n                element.parentNode.removeChild(element);\n            });\n\n            this.el.sceneEl.removeAttribute('environment');\n            this.el.sceneEl.setAttribute('environment', settings);\n        });\n    }\n});\n\nAFRAME.registerPrimitive('a-slide-environment', {\n    defaultComponents: {\n        'slide-environment': {},\n    },\n\n    mappings: {\n        'settings': 'slide-environment.settings',\n    }\n});\n```\n\nWhich can then be followed as follows...\n\n```html\n\u003ca-slide\u003e\n  \u003ca-slide-environment settings=\"preset: tron\"\u003e\u003c/a-slide-environment\u003e\n\u003c/a-slide\u003e\n```\n\nIf 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).\n","funding_links":[],"categories":["Web-Based Frameworks"],"sub_categories":["Motion Controllers inside Unity!"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frvdleun%2Faframe-presentation-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frvdleun%2Faframe-presentation-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frvdleun%2Faframe-presentation-component/lists"}