Skip to main content
100%

Gist 72cb037134b2f91c4df4be644091c0c9

✓ Published0🌍 Public
UUtopiah
Last edited Apr 1, 2020
Created on Apr 1, 2020

In a WebXR scene built with A-Frame, this animation repeatedly repositions two lamp models relative to the first networked avatar. Every 500 milliseconds, the `setInterval` loop copies the avatar’s position to both lamps, offsets them vertically and horizontally, and randomly scales each lamp using `Math.random()`. The code selects the lamps via `querySelector` for a networked entity and `querySelectorAll("[gltf-model-plus]")` for GLTF models, relying on the `object3D` API from Three.js for transform updates.

AI-generated description

Similar vizzes

Loading thumbnail…

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.

UUtopiah
77% match
Loading thumbnail…

Gist 2da2793cd17e3359327a13d36ea438c6

A networked virtual scene shows media objects continuously following an avatar through space. The code attaches a video element to the avatar “Utopiah” every 100 milliseconds, repositioning the object’s Three.js coordinates to match the avatar’s position while offsetting it upward and rotating it. It uses A-Frame’s `media-loader` and `networked-avatar` components, along with Networked-Aframe (NAF) utilities to take ownership and sync the object’s transform. The animation loops indefinitely, keeping the video attached to the moving avatar in real time.

UUtopiah
73% match
Loading thumbnail…

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.

UUtopiah
73% match
Loading thumbnail…

Gist 20e943b854f7d56bb5c7bf168325aacc

Three users in a networked Hubs room share a virtual space where red laser objects and ring-shaped hubs orbit around avatars. The code uses A-Frame and the Networked-Aframe (NAF) API to synchronize positions and ownership of entities, with `setInterval` driving an animation loop that calls `attachObjAvatars` to reposition objects every 100 milliseconds. It also demonstrates `NAF.utils.takeOwnership` for controlling shared objects and `getElementsFromHash` to select media-loaded assets by their source URL. The scene shows mixed crowns and lasers attached above named staff avatars, with continuous rotation updates on the objects.

UUtopiah
73% match
Loading thumbnail…

Gist 324400fd51b08d5e22d9e2f3b164d087

An interactive WebXR scene displays a star model that animates through a sequence of scale and position changes. The star scales up and down while simultaneously jumping vertically, creating a looping visual effect. The code uses A-Frame and the anime.js library, specifically `AFRAME.ANIME.default.timeline`, to build two synchronized timelines: one targeting the star’s `object3D.scale` and another targeting its `object3D.position`. The star originates from a Google Poly asset loaded via `getFirstElementFromHash`. The animation restarts both timelines and seeks to a specific time offset to align the motion.

UUtopiah
72% match
Loading thumbnail…

Gist 022700cf05d336b0804c94278e541b0f

In this animated Three.js scene, colored rings follow avatars through a networked virtual environment, with each ring positioned roughly 1.8 meters above its assigned avatar. The code uses AFRAME’s scene graph and networked-avatar selectors to track entities, while NAF.utils’ `getNetworkedEntity` and `takeOwnership` manage object control. A 50-millisecond interval repeatedly copies avatar world positions onto the ring objects, approximating y-values for vertical alignment. The visualization demonstrates real-time multi-user object tracking, pulling avatar data from the scene’s media-loader elements matched against a hash ring identifier.

UUtopiah
72% match
Loading thumbnail…

Gist 1ab2c1e1ee8b58c4abbd1ee0dde88d77

This example demonstrates a shared virtual room where a light switch and bulb react to the physical state of a Web of Things device, reflecting both local and remote interactions. It shows how a user or another networked avatar can flip the switch, toggling the bulb’s visibility and position while syncing the status to the gateway via HTTP requests. The animation uses A-Frame for scene rendering, the networked-aframe component for multi-user presence, and the Web of Things API to read and update the device’s `on` property. Polling intervals every second check proximity and update the light state accordingly.

UUtopiah
71% match
Loading thumbnail…

Gist e993403d27f2ac83367cff9794c2ece0

The animation shows a 3D scene that updates live as a new 3D model is exported from Blender. It polls a timestamp file over HTTP via `fetch`; when the timestamp changes, it removes previously uploaded assets and loads the new `model.glb` file into an A-Frame scene. The code uses `AFRAME.scenes[0]`, the `media-loader` component, and the `networked` component to place and share the model, with `setAttribute` positioning it at `0 1 0`.

UUtopiah
71% match