Skip to main content
100%

Gist 26bae9fecc7a921f8bfd38cf5fc91612

✓ Published0🌍 Public
UUtopiah
Last edited May 23, 2020
Created on May 23, 2020

In a WebVR environment, a player physically walks to an execute button to run a Turtle Graphics program that is assembled from image tiles placed on a board. The animation shows a turtle moving through a 3D space, executing commands like "move forward" and "turn left" to solve a maze. The code reads the tiles’ positions using `object3D.position` within a bounding box, sorts them by Y-axis, and runs the instructions with timed `setTimeout` calls, communicating via `hubChannel.sendMessage`. It relies on Three.js and Hubs utilities like `hubs_utils.setPinEntities` for interaction.

AI-generated description

Similar vizzes

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
70% match
Loading thumbnail…

Gist a0b28a0f9e9463498f93690d50c763eb

This example shows a cross-platform remote camera control system, where Twitch chat messages physically move the camera rig in a Mozilla Hubs virtual room. A MutationObserver on the Twitch chat log captures new messages and timestamps, storing them via a placeholder JSON store, while a polling loop in Hubs fetches that history and triggers panning animations toward a Google Poly burger model or resets the camera to its origin. The camera movement uses the A-Frame animation timeline and Three.js’s `object3D.position`, with the camera identity toggled by modifying the Hubs user profile display name.

UUtopiah
69% 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
67% 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
67% match
Loading thumbnail…

Gist d543cafeb51f2689b1648f6c4e38f700

This interactive multiplayer game, rendered with WebGL animation, turns a Mozilla Hubs room into a competitive ball-throwing arena. Players join red or blue teams by standing near colored signs, then score points by throwing a shared ball into three rainbow disc targets of varying difficulty and point values. The code uses the A-Frame and Networked-Aframe APIs to manage avatars, networked entity ownership, and real-time position tracking, while a `setInterval` gameloop continuously checks ball-to-target distances and updates a score arrow. Team rosters and score announcements are broadcast through the hub channel, and the ball resets when a designated player stands near the fetch sign.

UUtopiah
66% match
Loading thumbnail…

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.

UUtopiah
66% match
Loading thumbnail…

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.

UUtopiah
66% match
Loading thumbnail…

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.

UUtopiah
65% match