Gist e30aac4bd8656b6d68668de3e25042f7

100%

Gist e30aac4bd8656b6d68668de3e25042f7

✓ Published0🌍 Public

Last edited Apr 30, 2020

Created on Apr 30, 2020

This visualization showcases 3D photogrammetry assets converted from FBX files to GLB format for web display. It uses the FBX2glTF command-line tool to convert models, then generates an HTML scene with A-Frame’s `<a-gltf-model>` component to load the resulting GLTF files. The shell script also converts PNG textures to JPG using ImageMagick, rewrites the GLTF references accordingly, and packs models into binary GLB files with the gltf-import-export library, creating a gallery of textured 3D objects.

AI-generated description

Similar vizzes

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

70% 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

68% match

Loading thumbnail…

from Blender to WebVR in 1 click

A single click in Blender exports the current 3D scene as a glTF model and publishes it to a remote server, producing a WebVR experience viewable in a browser. The script uses the Blender glTF exporter, the A-Frame library with the aframe-extras animation-mixer component, and Python’s requests module to upload the model, binary, and generated HTML files. The generated page includes an A-Frame scene with a lightblue sky and the model positioned in space, with animation-mixer removed if no actions exist. The backend is a simple PHP file that stores uploads and returns a shareable URL.

UUtopiah

68% match

Loading thumbnail…

Gist e23654b5d95e55cf3eabdf289fc087a3

This example shows a script that exports 3D objects from a Spoke group to Hubs by generating a list of Poly asset URLs. It iterates over child objects of the first object whose name contains “Export”, logging each child’s position, scale, and rotation to the console while constructing its corresponding Poly view link. The code uses Three.js object properties (`object3D.position`, `object3D.scale`, `object3D.rotation`) and the browser’s native `console` API, with `objects3DFromPartialName` as a custom helper for scene traversal. The data source is the Spoke scene’s object hierarchy, and the output is a JavaScript array of Poly URLs for import.

UUtopiah

66% match

Loading thumbnail…

Gist 0249b783d54041950693e61274d62dcc

The example shows a 3D model loaded from Google Poly being controlled through a dat.GUI interface inside Mozilla Hubs, an A-Frame-based social VR environment. A text label displays “dat.gui x Mozilla Hubs” alongside sliders and toggles. The scale slider adjusts the model’s uniform size via `object3D.scale.setScalar`, and the visibility toggle hides or shows the object. The code uses A-Frame’s `media-loader` component to fetch the model, `networked` for multi-user sync, and dat.GUI’s `onChange` callbacks to update the Three.js scene graph.

UUtopiah

65% 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

65% match

Loading thumbnail…

Gist 6fca8ef5ca087df8d88875360a27898e

This visualization arranges a set of ten idea images across three virtual panels (left, right, and back) in a 3D space using A-Frame entities with `media-loader` components. It captures and restores each image’s position, rotation, and scale via `getIdeasPoses()` and `setIdeasPoses()`, allowing users to switch between initial and new layouts through a dat.GUI control panel. The GUI also provides buttons to snap images back to their panels, pin or unpin them, and generate a fresh layout by sampling new random positions. Images are loaded from external PNG URLs, and the code demonstrates manual object3D manipulation rather than a physics or layout engine.

UUtopiah

63% match

Loading thumbnail…

Gist 2492d95a9b8f1ea7c4829b30d896982a

This example shows a live-updating 3D model in a Hubs virtual room, where the displayed GLB asset refreshes automatically whenever new data arrives. It uses an EventSource (Server-Sent Events) to listen for messages from a remote Glitch server, and on each message it updates the `media-loader` component’s `src` attribute by appending a timestamp to the GLB URL, forcing a reload. The code relies on the custom `hubs_utils` helper to find the first matching element, and it demonstrates a simple SSE-driven pipeline for dynamic scene updates without manual intervention.

UUtopiah

63% match