Skip to main content
100%

Gist a0b28a0f9e9463498f93690d50c763eb

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

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.

AI-generated description

Similar vizzes

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 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
Loading thumbnail…

Gist 0249b783d54041950693e61274d62dcc

The example shows a 3D model loaded from Google Poly being controlled through a dat.GUI interface inside Mozilla Hubs, an A-Frame-based social VR environment. A text label displays “dat.gui x Mozilla Hubs” alongside sliders and toggles. The scale slider adjusts the model’s uniform size via `object3D.scale.setScalar`, and the visibility toggle hides or shows the object. The code uses A-Frame’s `media-loader` component to fetch the model, `networked` for multi-user sync, and dat.GUI’s `onChange` callbacks to update the Three.js scene graph.

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

Gist 2492d95a9b8f1ea7c4829b30d896982a

This example shows a live-updating 3D model in a Hubs virtual room, where the displayed GLB asset refreshes automatically whenever new data arrives. It uses an EventSource (Server-Sent Events) to listen for messages from a remote Glitch server, and on each message it updates the `media-loader` component’s `src` attribute by appending a timestamp to the GLB URL, forcing a reload. The code relies on the custom `hubs_utils` helper to find the first matching element, and it demonstrates a simple SSE-driven pipeline for dynamic scene updates without manual intervention.

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

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.

UUtopiah
69% match
Loading thumbnail…

Gist 8eb0d83e467d13994fd69c4631130561

This example shows a Mozilla Hubs scene being cloned into a local A-Frame environment by fetching the room’s `objects.gltf` file. The code parses each node’s `HUBS_components.media.src` to load remote media assets, then creates A-Frame entities with `media-loader`, `networked`, and `pinnable` components, preserving translation, scale, and rotation. It uses the browser’s `fetch` API to retrieve the GLTF JSON and manipulates `AFRAME.scenes[0]` directly. The scene data originates from the Hubs room’s hosted GLTF, demonstrating asset reuse across networked 3D spaces.

UUtopiah
69% match