Skip to main content
100%

Pinning all PDFs present in a Mozilla Hubs scene

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

This example demonstrates a script that pins every PDF present in a Mozilla Hubs scene. It shows how to programmatically iterate over all scene elements tagged with the `media-pdf` attribute and set them as pinned, making them static in the 3D environment. The code uses the A-Frame API to query the scene (`AFRAME.scenes[0].querySelectorAll`) and the Networked-Aframe (NAF) library to access and manage ownership of each entity via `NAF.utils.getNetworkedEntity`, `NAF.utils.isMine`, and `NAF.utils.takeOwnership`. Finally, it applies the `pinnable` component’s `pinned` attribute to lock each PDF in place.

AI-generated description

Similar vizzes

Loading thumbnail…

Utils functions for Mozilla Hubs scripting

This example demonstrates a collection of utility functions for scripting Mozilla Hubs scenes, showing how to manipulate entities, load media assets, and query the scene graph. The code uses the A-Frame and Networked-AFRAME APIs to interact with the Three.js object hierarchy. It includes functions to get user media elements via DOM selectors, load assets from URLs by creating `a-entity` elements with `media-loader` and `networked` components, and find avatars by display name. It also traverses the Three.js scene graph to match objects by partial names, and queries media elements by URL patterns using `querySelectorAll` and regex matching.

UUtopiah
64% match
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
63% match
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
62% 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
61% 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
61% match
Loading thumbnail…

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

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.

UUtopiah
61% match
Loading thumbnail…

Gist 273ca366149f0a36c75674dd230980ea

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.

UUtopiah
60% 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
58% match