Skip to main content
100%

Gist 27b0eae72764e9e50963cdf7592e7849

✓ Published0🌍 Public
UUtopiah
Last edited Jul 5, 2020
Created on Jul 5, 2020

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 9e8c4fa996831859a1c099a9906f84e9

This example visualizes the presence of users in a Mozilla Hubs room over time by periodically sampling the room’s member list. It reads the DOM to extract each participant’s nickname and presence status, hashing names for privacy, and stores measurements in `localStorage`. The animation, driven by `setInterval`, appends timestamped snapshots every minute, enabling a temporal view of attendance and activity. The code relies on vanilla JavaScript DOM queries and the `hashCode` function, with no external charting library.

UUtopiah
83% match
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
78% match
Loading thumbnail…

Gist a0f917a785ce1a3d2b4ca98ec44c78c3

This example demonstrates a webcam video texture attached to a user’s avatar in a Mozilla Hubs room, with the video element repositioned and scaled to follow the avatar’s movements. The animation runs continuously via a `setInterval` that updates the video’s position and rotation relative to the avatar rig. It uses A-Frame’s `AFRAME.scenes`, the Networked-Aframe (NAF) API for taking ownership of the media element, and JavaScript DOM queries to locate the webcam element by its source hash. The rendering relies on React integration for the Hubs Cloud custom client.

UUtopiah
77% 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
77% match
Loading thumbnail…

Gist 21469685654d555985edf84357cb2c8e

This example visualizes the spatial distribution of networked avatars in a Three.js scene by extracting their world positions. It shows the relative layout of avatars in 3D space, with a focus on the user’s own avatar as a reference point. The code queries all elements with the `[networked-avatar]` attribute and logs their `object3D.position`, while separately obtaining the user’s position via `getWorldPosition()` on the `.AvatarRoot` element. It uses plain DOM queries and Three.js’s object3D transformation methods, with the data source being live avatar coordinates from the networked environment.

UUtopiah
76% 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
76% 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
75% match
Loading thumbnail…

Gist a0b28a0f9e9463498f93690d50c763eb

This example shows a cross-platform remote camera control system, where Twitch chat messages physically move the camera rig in a Mozilla Hubs virtual room. A MutationObserver on the Twitch chat log captures new messages and timestamps, storing them via a placeholder JSON store, while a polling loop in Hubs fetches that history and triggers panning animations toward a Google Poly burger model or resets the camera to its origin. The camera movement uses the A-Frame animation timeline and Three.js’s `object3D.position`, with the camera identity toggled by modifying the Hubs user profile display name.

UUtopiah
75% match