Skip to main content
100%

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

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

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.

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

Pinning all PDFs present in a Mozilla Hubs scene

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.

UUtopiah
61% match
Loading thumbnail…

Gist e560cf08abbec5dcd0b2e45475cee171

This example uses A-Frame’s scene graph to locate and highlight a specific 3D element whose `media-loader` component’s source URL matches a given hash string. It queries all entities with `[media-loader]`, filters those whose `attrValue.src` contains the hash, and then scales the first match to a scalar value of 1. The code relies on A-Frame’s component API and the `object3D` property, with a comment referencing NAF’s `getNetworkedEntity()` for networked scenes. The data source is the element’s media URL, and the visualization emphasizes a single hub by adjusting its scale.

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

Gist ea1d4a48f0f962e00002eb8afc95ef20

This example shows how A-Frame entities are dynamically created and networked in a multi-user VR scene using the Networked-Aframe (NAF) schema system. The code defines schemas for static and interactable media templates, then instantiates two `<a-entity>` elements loaded from Google Poly URLs via the `media-loader` component, attaching networked components with template references. One entity uses the `#static-media` template, the other `#test-template`, which is registered through `NAF.schemas.add` to sync only the `position` component. The scene appends these entities to `AFRAME.scenes[0]`, demonstrating how remote clients would synchronize media placement and basic transforms.

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

three object3D finder from partial name

This example demonstrates how to locate and report three-dimensional objects within an A-Frame scene by matching partial names in their hierarchy. The `objects3DFromPartialName` function traverses the scene graph using `AFRAME.scenes[0].object3D.traverse`, filtering for `Object3D` instances whose `name` property matches a regular expression. It then retrieves each matched object’s world position with `THREE.Vector3` and `getWorldPosition`, logging the names and coordinates to the console. The code relies on Three.js and A-Frame’s WebGL rendering to inspect the live scene structure.

UUtopiah
53% match