Gist 6fca8ef5ca087df8d88875360a27898e

Gist b4bdcd5422cc8c12b97fac3776955cb2

This animated presentation showcases a slide deck within Mozilla Hubs, a virtual reality environment, using Three.js and AFRAME to load and position image-based slides in 3D space. The slides, sourced from Unsplash and Twitter, display content about the author’s work with the European Parliament, UNICEF, and Hubs scripting. A custom `slides` object controls navigation via `nextSlide()`, scaling the active slide, and can auto-advance or drop all content using `startAutoPresent()` and `dropAllContent()`. The `media-loader` and `networked` components handle asset loading and sharing in the scene.

67% match

Gist 4e55f8e8b799944cb6b33e98fd168250

This visualization shows a networked 3D scene assembled from GLTF assets, with a grid of nodes representing interactive media frames, text labels, and environmental elements like water, sky, and lighting. The code defines a complete virtual space using Three.js-style scene-graph components, including spawn points, waypoints, audio zones, particle emitters, and colliders. A central box-collider acts as a ground plane, while the scene includes a nav-mesh for navigation and a hidden trigger volume. The setup demonstrates how MIXED REALITY components—such as networked objects, media frames, and physics properties—combine to create a shareable, interactive environment with URLs for external image, video, and audio assets.

Aandybak

66% match

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 ec675b31a307918b12388d698a79845d

Three avatar-shaped objects in a Hubs room orbit three staff member avatars, their positions and scales updating every 100 milliseconds to follow the users. The animation repeatedly copies each staff avatar’s Three.js position, increments its y-coordinate, and applies a random scale via the A-Frame and Networked-Aframe APIs. Objects are selected by matching a media-loader source hash to a GLB file, and ownership is taken with `NAF.utils.takeOwnership` before transforming the networked element.

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 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 3007043b5c5144394c6b7cd6cf794a33

The visualization generates a grid of 3D boxes arranged in a 10-by-10 layout, rendered with the Processing language’s `box` primitive. Each box is drawn repeatedly, with its position offset by `i * 2` and `j * 2`, and rotates over time based on the current time value. The fill and stroke colors are set to magenta with alpha and stroke thickness that fluctuate with the absolute sine of time, creating a pulsing effect. The rendering uses `scale`, `background`, `move`, `rotate`, and `strokeSize` commands to animate the entire pillar-like structure.

Aaman-tiwari

Gist 2bf4f8f77b581264da82c111addb1dd0

This example provides a web-based control panel for managing a 3D virtual reality drawing environment. It allows users to configure brush types, sizes, and colors, as well as set the spectator camera’s position, target, and movement modes like stationary, follow, circular, or wobble. The interface also toggles visibility of canvas layers, UI elements, and user tools, and triggers actions such as saving, exporting, or clearing the scene. The code uses plain HTML form controls and JavaScript event handlers, with template placeholders for brush and environment data, but does not rely on external visualization libraries.

Aandybak