Skip to main content
100%

Getting close to a target object, e.g. here latest added PDF, makes it grow for any avatar within a 5m radius

✓ Published0🌍 Public
UUtopiah
Last edited Mar 31, 2020
Created on Mar 31, 2020

In this Hubs scene, the most recently added PDF grows incrementally whenever any networked avatar comes within a 5-meter radius, making proximity visually tangible. The code uses Three.js object3D position and scale properties, querying all `[networked-avatar]` elements and the last `[media-pdf]` element from the AFRAME scene. A `setInterval` loop checks distances every 300 milliseconds, adding 0.1 to the PDF’s scale for each nearby avatar, while the animation is driven by the interval rather than a continuous render loop.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 3d8c15e486359954c2b5fdaf9e3cb265

An A-Frame scene places PDFs as spatial objects, and a pencil-shaped writing target detects when the user moves within a five-unit proximity. Upon approach, the code sends the PDF’s URL to a local server via `fetch`, triggering a transfer to a reMarkable tablet, while a `setInterval` checks proximity every second. The animation shows the interaction logic, using A-Frame’s `object3D` positioning and the `media-pdf` component to identify source documents, with a deduplication flag preventing repeated sends.

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

Locating PDFs with the radius of a predefined entity e.g. where to read/write docs

This example locates PDFs in a networked A-Frame scene by measuring their distance to a predefined writing target, logging the source of any PDF within a radius of five units. It shows how proximity to a specific entity can filter relevant documents for reading or writing workflows. The code uses A-Frame’s `object3D.position.distanceTo()` method, queries entities with `[media-pdf]` and `[gltf-model-plus]` selectors, and accesses the Networked-Aframe (NAF) API via `NAF.utils.getNetworkedEntity()`. The data source is the `attrValue.src` of each PDF component, and the rendering relies on A-Frame’s scene graph and Three.js’s vector math.

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

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.

UUtopiah
64% match