Skip to main content
100%

Gist 909ed8ec8e459e5e96701e0a3d3247f4

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

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.

AI-generated description

Similar vizzes

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
81% 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
79% 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
79% 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
77% 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
77% 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
75% 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
74% match
Loading thumbnail…

Gist 022700cf05d336b0804c94278e541b0f

In this animated Three.js scene, colored rings follow avatars through a networked virtual environment, with each ring positioned roughly 1.8 meters above its assigned avatar. The code uses AFRAME’s scene graph and networked-avatar selectors to track entities, while NAF.utils’ `getNetworkedEntity` and `takeOwnership` manage object control. A 50-millisecond interval repeatedly copies avatar world positions onto the ring objects, approximating y-values for vertical alignment. The visualization demonstrates real-time multi-user object tracking, pulling avatar data from the scene’s media-loader elements matched against a hash ring identifier.

UUtopiah
74% match