Skip to main content
100%

Gist c5f5efe89446d629dad8dba8cfe57dde

✓ Published0🌍 Public
UUtopiah
Last edited Dec 19, 2020
Created on Dec 19, 2020

This visualization maps the positions of networked avatars in a 3D scene onto a 2D radar-style display using emoji. Every 500 milliseconds, a script queries all elements with the `networked-avatar` attribute, reads their Three.js `object3D.position`, and places corresponding emoji spans on the page using fixed positioning. The local user appears as a grinning emoji, while others use a default smiley. Zombie emoji are removed when their source avatar disappears. The code relies on DOM query selectors and the Three.js scene graph, with no external charting library.

AI-generated description

Similar vizzes

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
78% 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
75% 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
75% 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
74% 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
73% 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
72% 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
71% match
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
70% match