Gist 20e943b854f7d56bb5c7bf168325aacc

100%

Gist 20e943b854f7d56bb5c7bf168325aacc

✓ Published0🌍 Public

Last edited May 1, 2020

Created on May 1, 2020

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist ec675b31a307918b12388d698a79845d

Three avatar-shaped objects in a Hubs room orbit three staff member avatars, their positions and scales updating every 100 milliseconds to follow the users. The animation repeatedly copies each staff avatar’s Three.js position, increments its y-coordinate, and applies a random scale via the A-Frame and Networked-Aframe APIs. Objects are selected by matching a media-loader source hash to a GLB file, and ownership is taken with `NAF.utils.takeOwnership` before transforming the networked element.

UUtopiah

86% 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

82% match

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

81% match

Loading thumbnail…

Gist 35407c28fd6ba2c2097d1b589630c53f

This example demonstrates how to attach 3D objects to specific avatars within a Mozilla Hubs scene, using networked entities and avatar position tracking. The code identifies avatars by their display names and finds media objects by matching URL hashes in their `media-loader` components, then repositions those objects to follow the avatars in real time. It relies on Hubs’ scripting utilities, the A-Frame `AFRAME.scenes` API, and NAF (Networked-Aframe) for ownership and position updates, with object rotations adjusted slightly on each attachment. The script is designed for collaborative VR environments where staff members need virtual items tethered to their avatars.

UUtopiah

81% match

Loading thumbnail…

Gist 5aa2bd144b85b3c87117635ea3c3aedd

In this animated network visualization, three named avatars—Utopiah, DJOKOVIC, and Roman—are tracked as colored rings follow their movements in a shared 3D space. The code uses Three.js through A-Frame and the Networked-Aframe (NAF) API to locate avatars and media objects by hash, then continuously repositions each ring above its corresponding avatar every 100 milliseconds. Ownership of each ring is transferred via NAF’s `takeOwnership` to allow remote synchronization. The animation loop relies on `setInterval` and directly copies avatar position data to the ring objects, updating their rotation incrementally.

UUtopiah

80% 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

78% match

Loading thumbnail…

Gist 7b6be1814abc25f027a85878859ed28a

This example demonstrates a collaborative physics-based game inside a Mozilla Hubs virtual room, where two teams score points by throwing a ball onto targets. It shows real-time networked gameplay with avatars, score tracking, and animated feedback. The code uses A-Frame entities, the networked-aframe (NAF) API for ownership and multiplayer sync, and the Anime.js timeline for star jump-and-scale animations. Assets are loaded from Google Poly via the media-loader component, while target positions are derived from 3D object names in the scene.

UUtopiah

78% 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

75% match