Gist 2761dd6bd26cbb45163b317490fa58ff

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.

73% match

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.

69% match

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.

68% match

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.

Gist a60d72fb8c781bf8832dc4ea9a673382

This interactive WebVR example demonstrates how to inspect and animate 3D objects in an A-Frame scene by linking them to a media asset list. It shows how hovering over an asset in the UI selects a corresponding object, which can then be scaled up or down using the X and Z keys. The code uses A-Frame’s component system, specifically the `media-loader` attribute, to match hashes from the asset list to scene elements, and applies animation via the `AFRAME.ANIME` timeline API.

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.

Gist 04474e6a8dc5c817fb14edad29c15332

This example integrates Bose Frame audio hardware with a WebXR environment by injecting a custom script into the page. It rotates the avatar’s point-of-view node and appends a `bose-ar-device` element to the body, using the Bose-Frames-Web-SDK and a remote Hubs script. The visualization shows how augmented-reality sessions can receive spatial audio input from connected glasses, with the code relying on `document.createElement` and `object3D.rotateY` to adjust the camera perspective.

Gist c3927fd16c93fc919a74036325faacd4

In a virtual-reality environment built with A-Frame, a video playlist automatically plays two accessibility-themed VR conference talks inside a networked 3D scene. The code defines an array of MP4 URLs hosted on an S3 bucket, creates an `a-entity` with the `media-loader` and `networked` components, and scales it to ten units while positioning it 35 units away. It disables looping and listens for the video’s `ended` event to switch to the next clip, cycling back to the first after the last. A CORS proxy URL prefixes each source, and the playback jumps near the end for testing.