Gist 8eb0d83e467d13994fd69c4631130561

100%

Gist 8eb0d83e467d13994fd69c4631130561

✓ Published0🌍 Public

Last edited Mar 23, 2021

Created on May 27, 2020

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.

AI-generated description

Similar vizzes

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

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

76% match

Loading thumbnail…

Utils functions for Mozilla Hubs scripting

This example demonstrates a collection of utility functions for scripting Mozilla Hubs scenes, showing how to manipulate entities, load media assets, and query the scene graph. The code uses the A-Frame and Networked-AFRAME APIs to interact with the Three.js object hierarchy. It includes functions to get user media elements via DOM selectors, load assets from URLs by creating `a-entity` elements with `media-loader` and `networked` components, and find avatars by display name. It also traverses the Three.js scene graph to match objects by partial names, and queries media elements by URL patterns using `querySelectorAll` and regex matching.

UUtopiah

75% match

Loading thumbnail…

Gist 273ca366149f0a36c75674dd230980ea

This example demonstrates how to copy and clone pinned 3D objects between rooms in a WebVR scene. It shows the process of serializing object metadata—source, position, rotation, and scale—from the current room, then reconstructing those objects in a target scene. The code uses A-Frame’s `media-loader`, `networked`, and `pinnable` components, along with the browser’s `document.querySelectorAll` and `console.log`. It also directly modifies the `networked-counter` component to raise the default 20-item limit before loading clones, enabling batch duplication of interactive media within the same scene.

UUtopiah

75% match

Loading thumbnail…

Gist 35407c28fd6ba2c2097d1b589630c53f

This example demonstrates how to attach 3D objects to specific avatars within a Mozilla Hubs scene, using networked entities and avatar position tracking. The code identifies avatars by their display names and finds media objects by matching URL hashes in their `media-loader` components, then repositions those objects to follow the avatars in real time. It relies on Hubs’ scripting utilities, the A-Frame `AFRAME.scenes` API, and NAF (Networked-Aframe) for ownership and position updates, with object rotations adjusted slightly on each attachment. The script is designed for collaborative VR environments where staff members need virtual items tethered to their avatars.

UUtopiah

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

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

73% match

Loading thumbnail…

Gist e560cf08abbec5dcd0b2e45475cee171

This example uses A-Frame’s scene graph to locate and highlight a specific 3D element whose `media-loader` component’s source URL matches a given hash string. It queries all entities with `[media-loader]`, filters those whose `attrValue.src` contains the hash, and then scales the first match to a scalar value of 1. The code relies on A-Frame’s component API and the `object3D` property, with a comment referencing NAF’s `getNetworkedEntity()` for networked scenes. The data source is the element’s media URL, and the visualization emphasizes a single hub by adjusting its scale.

UUtopiah

73% match