Skip to main content
100%

Gist 2492d95a9b8f1ea7c4829b30d896982a

✓ Published0🌍 Public
UUtopiah
Last edited Apr 9, 2022
Created on Apr 9, 2022

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.

AI-generated description

Similar vizzes

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

Gist 7d2dcc343f1204a9cc2385a893786dbe

This example demonstrates how to load and position a 3D model from Sketchfab into a Mozilla Hubs Cloud room using the Hubs Cloud scripting template. The code creates an `<a-entity>` in an A-Frame scene, attaches a `media-loader` component to fetch the model, and sets a `networked` component with the `#interactable-media` template so it appears for all clients. Execution is gated by author, login status, and email regex, and the model is placed at coordinates (1,1,1).

UUtopiah
72% match
Loading thumbnail…

Gist e993403d27f2ac83367cff9794c2ece0

The animation shows a 3D scene that updates live as a new 3D model is exported from Blender. It polls a timestamp file over HTTP via `fetch`; when the timestamp changes, it removes previously uploaded assets and loads the new `model.glb` file into an A-Frame scene. The code uses `AFRAME.scenes[0]`, the `media-loader` component, and the `networked` component to place and share the model, with `setAttribute` positioning it at `0 1 0`.

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

Gist 0a078c962f93acad6420f9af7c503afa

This example shows a multiplayer ball-tossing game inside a Hubs virtual room, where players score points by throwing a networked ball into one of three targets with different point values. The game loop checks the ball’s distance to each target and updates a score arrow’s position accordingly. It uses Three.js for 3D math and rendering, NAF (Networked-Aframe) for ownership and synchronization, and the Hubs utils WebExtension to fetch assets from Google Poly. The scene is animated via a `setInterval` gameloop, with ball retrieval triggered by proximity to a fetch sign.

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

Gist 2761dd6bd26cbb45163b317490fa58ff

A WebGL-based virtual reality scene built with Exokit and A-Frame loads a Hubs environment, rendering it through a WebGL 2.0 context. The visualization shows the console log output and error stack traces from the Hubs client, capturing runtime issues such as the MediaRecorder API incompatibility and schema warnings. The example demonstrates how WebXR applications can fail and log errors when running in non-standard environments, using Three.js and the Exokit browser runtime. It highlights error handling and API compatibility challenges in mixed-reality web development.

UUtopiah
66% match