Skip to main content
100%

Gist 3d8c15e486359954c2b5fdaf9e3cb265

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

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.

AI-generated description

Similar vizzes

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

Gist 51d73414b163626dccd6ae63005f03dc

This example demonstrates a web server that forwards a PDF from a URL directly to a reMarkable tablet. It shows how an HTTP request containing a `pdf` query parameter triggers a download and upload cycle, ultimately returning the uploaded document’s ID as JSON. The code uses Express with CORS for the server, Node’s `https` module for fetching the remote PDF, and the `remarkable-typescript` library to authenticate via a device token and upload the file. The visualization’s behavior is purely functional, with no graphical rendering involved.

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…

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

Gist 6ec7169c37cdd07ba6003e3004741d6d

This example demonstrates a workflow for sending academic PDFs to a reMarkable tablet directly from a DOI reference on a webpage. It shows how a DOI retrieved from a hovered reference is used to fetch and download the corresponding PDF, then transfer it to the device via SSH. The code uses Express with CORS to handle HTTP requests, `execSync` for shell commands like `curl` and `wget`, and `scp` for file transfer. The visualization aspect is minimal, focusing on the automated pipeline rather than graphical output.

UUtopiah
66% 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
65% 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
63% 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
63% match