Gist fdfa7a2d6967a2178a3bd0f284dc3c12

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.

69% match

Gist b077b41a118451bbcc13bbc94caea681

This example shows a WebVR scene where the user’s viewpoint is repositioned by attaching the active camera-tool entity to an avatar rig. The code selects the last camera-tool element in the A-Frame scene, grabs the avatar rig, and uses Three.js’s `Object3D.attach()` to transfer the camera’s world transform to the rig, effectively making the rig follow the camera’s position and orientation. It demonstrates a simple way to control an avatar’s pose in a virtual environment using A-Frame’s entity-component querying and Three.js’s transform hierarchy.

68% match

Gist c5f5efe89446d629dad8dba8cfe57dde

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.

68% match

Gist d4a7aba620fdb64af2e06895c4b14491

A PinePhone’s accelerometer data, read from Linux sysfs paths, streams over HTTP via an Express server to a client that polls the endpoint every 100 ms. The client computes movement by comparing squared y/z values and differences against previous readings, triggering `window.scrollBy(0, 1)` when a step is detected. This animation visualizes walking as automatic page scrolling, using raw sensor values for x, y, and z axes without any charting library.

Gist 04474e6a8dc5c817fb14edad29c15332

This example integrates Bose Frame audio hardware with a WebXR environment by injecting a custom script into the page. It rotates the avatar’s point-of-view node and appends a `bose-ar-device` element to the body, using the Bose-Frames-Web-SDK and a remote Hubs script. The visualization shows how augmented-reality sessions can receive spatial audio input from connected glasses, with the code relying on `document.createElement` and `object3D.rotateY` to adjust the camera perspective.

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.

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.

Gist 26bae9fecc7a921f8bfd38cf5fc91612

In a WebVR environment, a player physically walks to an execute button to run a Turtle Graphics program that is assembled from image tiles placed on a board. The animation shows a turtle moving through a 3D space, executing commands like "move forward" and "turn left" to solve a maze. The code reads the tiles’ positions using `object3D.position` within a bounding box, sorts them by Y-axis, and runs the instructions with timed `setTimeout` calls, communicating via `hubChannel.sendMessage`. It relies on Three.js and Hubs utilities like `hubs_utils.setPinEntities` for interaction.