Gist 04474e6a8dc5c817fb14edad29c15332

Gist b077b41a118451bbcc13bbc94caea681

This example shows a WebVR scene where the user’s viewpoint is repositioned by attaching the active camera-tool entity to an avatar rig. The code selects the last camera-tool element in the A-Frame scene, grabs the avatar rig, and uses Three.js’s `Object3D.attach()` to transfer the camera’s world transform to the rig, effectively making the rig follow the camera’s position and orientation. It demonstrates a simple way to control an avatar’s pose in a virtual environment using A-Frame’s entity-component querying and Three.js’s transform hierarchy.

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.

Gist 909ed8ec8e459e5e96701e0a3d3247f4

The example demonstrates a networked virtual-reality scene where laser-like media elements continuously rotate and randomly rescale. Using A-Frame and the Networked-Aframe (NAF) API, the code queries all entities loaded via the `media-loader` component whose source URL matches the hash "lase", then applies incremental rotations to each object’s `object3D` transform. Ownership is taken for non-owned networked entities before modifying their rotation and scale. The visualization relies on the browser’s WebXR capabilities through A-Frame, showing real-time collaborative manipulation of shared 3D objects.

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.

Gist fdfa7a2d6967a2178a3bd0f284dc3c12

A web page uses a Thingy:52 sensor’s gyroscope data to control a three-dimensional avatar in real time. The animation reads gyro values over Web Bluetooth via the Espruino Puck.js library, and when the rotation exceeds a set threshold, the avatar moves forward in the direction the camera faces. Three.js handles the avatar rig and camera rotation, while a 100-millisecond polling interval updates the position. The code runs only in Chromium because it relies on the Web Bluetooth API.

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 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.

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.