Skip to main content
100%

Gist 273ca366149f0a36c75674dd230980ea

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

This example demonstrates how to copy and clone pinned 3D objects between rooms in a WebVR scene. It shows the process of serializing object metadata—source, position, rotation, and scale—from the current room, then reconstructing those objects in a target scene. The code uses A-Frame’s `media-loader`, `networked`, and `pinnable` components, along with the browser’s `document.querySelectorAll` and `console.log`. It also directly modifies the `networked-counter` component to raise the default 20-item limit before loading clones, enabling batch duplication of interactive media within the same scene.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 8eb0d83e467d13994fd69c4631130561

This example shows a Mozilla Hubs scene being cloned into a local A-Frame environment by fetching the room’s `objects.gltf` file. The code parses each node’s `HUBS_components.media.src` to load remote media assets, then creates A-Frame entities with `media-loader`, `networked`, and `pinnable` components, preserving translation, scale, and rotation. It uses the browser’s `fetch` API to retrieve the GLTF JSON and manipulates `AFRAME.scenes[0]` directly. The scene data originates from the Hubs room’s hosted GLTF, demonstrating asset reuse across networked 3D spaces.

UUtopiah
75% match
Loading thumbnail…

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.

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

Gist f2b11a8026030b726ecc8c8c9430a9b4

This animation demonstrates an object-snapping interaction in a WebVR scene built with A-Frame and the Networked-Aframe (NAF) API. It shows a media-loaded image (from NPR) being aligned to a wall-mounted texture (from The Dyslexia Shop) when the image comes within a distance threshold. The code uses `setInterval` to repeatedly check proximity via `object3D.position.distanceTo`, then snaps the object by copying the wall’s rotation and position, with a slight random offset. The rendering is animated, using A-Frame’s scene graph and `media-loader` components to identify elements by URL hash.

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

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.

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

Gist e083a79675354e15292c0628307c723f

This example demonstrates a workflow for converting live Networked Drawings into pinned 3D objects within a Three.js-based scene. It shows how each drawing element, selected via `document.querySelectorAll("[networked-drawing]")`, is serialized through the component’s `serializeDrawing()` method and then removed from the view. The resulting GLB data is applied to the most recent networked entity by setting its `pinnable` attribute with `pinned:true`, effectively freezing the drawing as a persistent object. The code relies on the A-Frame component API and JavaScript promises to handle asynchronous serialization.

UUtopiah
68% match