Skip to main content
100%

Gist c3927fd16c93fc919a74036325faacd4

✓ Published0🌍 Public
UUtopiah
Last edited Jun 8, 2020
Created on Jun 8, 2020

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 909ed8ec8e459e5e96701e0a3d3247f4

The example demonstrates a networked virtual-reality scene where laser-like media elements continuously rotate and randomly rescale. Using A-Frame and the Networked-Aframe (NAF) API, the code queries all entities loaded via the `media-loader` component whose source URL matches the hash "lase", then applies incremental rotations to each object’s `object3D` transform. Ownership is taken for non-owned networked entities before modifying their rotation and scale. The visualization relies on the browser’s WebXR capabilities through A-Frame, showing real-time collaborative manipulation of shared 3D objects.

UUtopiah
74% match
Loading thumbnail…

Gist 2da2793cd17e3359327a13d36ea438c6

A networked virtual scene shows media objects continuously following an avatar through space. The code attaches a video element to the avatar “Utopiah” every 100 milliseconds, repositioning the object’s Three.js coordinates to match the avatar’s position while offsetting it upward and rotating it. It uses A-Frame’s `media-loader` and `networked-avatar` components, along with Networked-Aframe (NAF) utilities to take ownership and sync the object’s transform. The animation loops indefinitely, keeping the video attached to the moving avatar in real time.

UUtopiah
74% match
Loading thumbnail…

Gist a60d72fb8c781bf8832dc4ea9a673382

This interactive WebVR example demonstrates how to inspect and animate 3D objects in an A-Frame scene by linking them to a media asset list. It shows how hovering over an asset in the UI selects a corresponding object, which can then be scaled up or down using the X and Z keys. The code uses A-Frame’s component system, specifically the `media-loader` attribute, to match hashes from the asset list to scene elements, and applies animation via the `AFRAME.ANIME` timeline API.

UUtopiah
73% match
Loading thumbnail…

Gist f2b11a8026030b726ecc8c8c9430a9b4

This animation demonstrates an object-snapping interaction in a WebVR scene built with A-Frame and the Networked-Aframe (NAF) API. It shows a media-loaded image (from NPR) being aligned to a wall-mounted texture (from The Dyslexia Shop) when the image comes within a distance threshold. The code uses `setInterval` to repeatedly check proximity via `object3D.position.distanceTo`, then snaps the object by copying the wall’s rotation and position, with a slight random offset. The rendering is animated, using A-Frame’s scene graph and `media-loader` components to identify elements by URL hash.

UUtopiah
69% match
Loading thumbnail…

Gist e560cf08abbec5dcd0b2e45475cee171

This example uses A-Frame’s scene graph to locate and highlight a specific 3D element whose `media-loader` component’s source URL matches a given hash string. It queries all entities with `[media-loader]`, filters those whose `attrValue.src` contains the hash, and then scales the first match to a scalar value of 1. The code relies on A-Frame’s component API and the `object3D` property, with a comment referencing NAF’s `getNetworkedEntity()` for networked scenes. The data source is the element’s media URL, and the visualization emphasizes a single hub by adjusting its scale.

UUtopiah
69% match
Loading thumbnail…

Gist 273ca366149f0a36c75674dd230980ea

This example demonstrates how to copy and clone pinned 3D objects between rooms in a WebVR scene. It shows the process of serializing object metadata—source, position, rotation, and scale—from the current room, then reconstructing those objects in a target scene. The code uses A-Frame’s `media-loader`, `networked`, and `pinnable` components, along with the browser’s `document.querySelectorAll` and `console.log`. It also directly modifies the `networked-counter` component to raise the default 20-item limit before loading clones, enabling batch duplication of interactive media within the same scene.

UUtopiah
69% match
Loading thumbnail…

Gist b4bdcd5422cc8c12b97fac3776955cb2

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.

UUtopiah
68% match
Loading thumbnail…

Gist ea1d4a48f0f962e00002eb8afc95ef20

This example shows how A-Frame entities are dynamically created and networked in a multi-user VR scene using the Networked-Aframe (NAF) schema system. The code defines schemas for static and interactable media templates, then instantiates two `<a-entity>` elements loaded from Google Poly URLs via the `media-loader` component, attaching networked components with template references. One entity uses the `#static-media` template, the other `#test-template`, which is registered through `NAF.schemas.add` to sync only the `position` component. The scene appends these entities to `AFRAME.scenes[0]`, demonstrating how remote clients would synchronize media placement and basic transforms.

UUtopiah
68% match