Gist 8bf9375ef73d46b6c471c3ec2abae405

100%

Gist 8bf9375ef73d46b6c471c3ec2abae405

✓ Published0🌍 Public

Last edited Jul 3, 2020

Created on Jun 24, 2020

This visualization demonstrates how to automatically select the best available Hubs room from a public list, prioritizing rooms with space for new participants. It fetches room data from a Hubs API endpoint (`/api/v1/media/search`) and evaluates each room based on member count, lobby count, and room capacity, choosing one that is not full. The code uses the Fetch API to retrieve JSON data and iterates through the entries to find a suitable room URL, with a buffer of five slots to avoid overcrowding. The example highlights a practical approach to room balancing in shared virtual spaces.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist e788d79614e145d046a33bd7b28a7c55

This example connects a Mozilla Hubs virtual room to a Phoenix channel via the Reticulum client, logging real-time chat messages and presence rollups as they arrive. The code subscribes to channel events with `reticulumCh.channel.on` and tracks room occupancy through `PresenceRollups`, sending a test message with `sendMessage` after five seconds. It uses `HubStats` to record arrival timestamps and `dotenv` for configuration, demonstrating how to build a bot that monitors live activity in a Hubs room.

UUtopiah

68% 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

67% 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

65% 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

64% 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

63% 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

62% match

Loading thumbnail…

Gist b076c63afe4fb84322089c4f42d4c4ce

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.

UUtopiah

62% 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

61% match