Skip to main content
100%

Gist b076c63afe4fb84322089c4f42d4c4ce

✓ Published0🌍 Public
UUtopiah
Last edited Feb 20, 2022
Created on Feb 20, 2022

This example demonstrates how to fetch and display a web page’s Open Graph description as a text label inside a Mozilla Hubs virtual room, using A-Frame entities and the Fetch API with DOMParser. The code requests `/cloud`, parses the returned HTML for the `og:description` meta tag, and appends a networked A-Frame text element at a fixed position. Because the text is not integrated with Hubs’ NAF schemas, the label is visible only to the local user, not shared across participants.

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
76% 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 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
69% 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
68% 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
67% 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
66% match
Loading thumbnail…

Gist 1c55837a8248d790382976cbb62f37c1

This example displays a volumetric video of a person, loaded and played inside a WebGL scene using the Depthkit.js library. The code creates a script element to load the latest Depthkit.js version, then instantiates a `Depthkit` object to fetch a metadata text file and an MP4 video from a proxy URL. Once loaded, the resulting character is added to the A-Frame scene’s root object, and playback is initiated. The setup targets A-Frame’s boilerplate “hello world” page but fails on Mozilla Hubs due to its custom world-update logic.

UUtopiah
66% match
Loading thumbnail…

Gist db569066a21ec6afce10f185d9c1f60b

This example demonstrates a text-based bot connecting to a Mozilla Hubs room, logging presence updates and chat messages, and sending a greeting after a delay. It uses the ReticulumClient and HubState classes from the Hubs Discord Bot libraries to establish a Phoenix channel connection, while HubStats and PresenceRollups track room occupancy over time. The bot reads configuration from dotenv files and logs timestamped events to the console, showing real-time hub activity without any visual rendering.

UUtopiah
66% match