Skip to main content
100%

Gist b4bdcd5422cc8c12b97fac3776955cb2

✓ Published0🌍 Public
UUtopiah
Last edited May 25, 2020
Created on May 22, 2020

This animated presentation showcases a slide deck within Mozilla Hubs, a virtual reality environment, using Three.js and AFRAME to load and position image-based slides in 3D space. The slides, sourced from Unsplash and Twitter, display content about the author’s work with the European Parliament, UNICEF, and Hubs scripting. A custom `slides` object controls navigation via `nextSlide()`, scaling the active slide, and can auto-advance or drop all content using `startAutoPresent()` and `dropAllContent()`. The `media-loader` and `networked` components handle asset loading and sharing in the scene.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 3ea15e735c876056ba750785a7ef8362

This example presents a slide deck titled "DH-talk," formatted as a Google Slides presentation. It uses the reveal.js framework to render HTML-based slides, with content drawing from a Gist repository. The presentation focuses on digital humanities topics, and its visualizations are constructed through the `d3.js` library, including `d3.forceSimulation` for network layouts and `d3.geoPath` for geographical mapping. The code demonstrates how to embed interactive charts directly within the slide framework, merging narrative with data-driven graphics for an educational talk.

CCliffordAnderson
72% match
Loading thumbnail…

Vizhub.com AI Presentation Slide

This interactive presentation showcases VizHub, a web platform for creating and sharing D3.js data visualizations. The code renders a nine-slide deck covering platform features, audience, technology stack, business model, and community aspects. Built with vanilla JavaScript, the presentation manages slide content through module scripts, with navigation buttons and arrow-key or spacebar controls for moving between slides. Each slide displays structured content from an array, with a progress indicator showing the current position within the deck.

CCurran Kelleher
72% match
Loading thumbnail…

Gist 0249b783d54041950693e61274d62dcc

The example shows a 3D model loaded from Google Poly being controlled through a dat.GUI interface inside Mozilla Hubs, an A-Frame-based social VR environment. A text label displays “dat.gui x Mozilla Hubs” alongside sliders and toggles. The scale slider adjusts the model’s uniform size via `object3D.scale.setScalar`, and the visibility toggle hides or shows the object. The code uses A-Frame’s `media-loader` component to fetch the model, `networked` for multi-user sync, and dat.GUI’s `onChange` callbacks to update the Three.js scene graph.

UUtopiah
71% match
Loading thumbnail…

Gist 8eb0d83e467d13994fd69c4631130561

This example shows a Mozilla Hubs scene being cloned into a local A-Frame environment by fetching the room’s `objects.gltf` file. The code parses each node’s `HUBS_components.media.src` to load remote media assets, then creates A-Frame entities with `media-loader`, `networked`, and `pinnable` components, preserving translation, scale, and rotation. It uses the browser’s `fetch` API to retrieve the GLTF JSON and manipulates `AFRAME.scenes[0]` directly. The scene data originates from the Hubs room’s hosted GLTF, demonstrating asset reuse across networked 3D spaces.

UUtopiah
70% match
Loading thumbnail…

Gist 27b0eae72764e9e50963cdf7592e7849

This animation tracks avatar positions in a Mozilla Hubs virtual room over time. A JavaScript interval samples connected users every second, storing their networked IDs and Three.js position vectors in localStorage. The visualization reconstructs movement trails from these recorded snapshots, showing how participants navigate the shared 3D space. It uses the browser’s `setInterval` and `localStorage` APIs, with the Hubs network avatar attributes providing positional data for each connected client.

UUtopiah
70% match
Loading thumbnail…

Gist 20e943b854f7d56bb5c7bf168325aacc

Three users in a networked Hubs room share a virtual space where red laser objects and ring-shaped hubs orbit around avatars. The code uses A-Frame and the Networked-Aframe (NAF) API to synchronize positions and ownership of entities, with `setInterval` driving an animation loop that calls `attachObjAvatars` to reposition objects every 100 milliseconds. It also demonstrates `NAF.utils.takeOwnership` for controlling shared objects and `getElementsFromHash` to select media-loaded assets by their source URL. The scene shows mixed crowns and lasers attached above named staff avatars, with continuous rotation updates on the objects.

UUtopiah
69% match
Loading thumbnail…

Gist 7d2dcc343f1204a9cc2385a893786dbe

This example demonstrates how to load and position a 3D model from Sketchfab into a Mozilla Hubs Cloud room using the Hubs Cloud scripting template. The code creates an `<a-entity>` in an A-Frame scene, attaches a `media-loader` component to fetch the model, and sets a `networked` component with the `#interactable-media` template so it appears for all clients. Execution is gated by author, login status, and email regex, and the model is placed at coordinates (1,1,1).

UUtopiah
69% match
Loading thumbnail…

Gist c3927fd16c93fc919a74036325faacd4

In a virtual-reality environment built with A-Frame, a video playlist automatically plays two accessibility-themed VR conference talks inside a networked 3D scene. The code defines an array of MP4 URLs hosted on an S3 bucket, creates an `a-entity` with the `media-loader` and `networked` components, and scales it to ten units while positioning it 35 units away. It disables looping and listens for the video’s `ended` event to switch to the next clip, cycling back to the first after the last. A CORS proxy URL prefixes each source, and the playback jumps near the end for testing.

UUtopiah
68% match