Gist e23654b5d95e55cf3eabdf289fc087a3

100%

Gist e23654b5d95e55cf3eabdf289fc087a3

✓ Published0🌍 Public

Last edited May 5, 2020

Created on May 5, 2020

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist e30aac4bd8656b6d68668de3e25042f7

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.

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

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

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

60% 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 fcaa6cc1968b4cd0eac0f15d1f0ff3f4

This visualization maps geographic data onto a three-dimensional globe using D3.js and Three.js. It renders landmasses as extruded polygons via `d3.geoPath` and converts them to Three.js geometry, while a `d3.forceSimulation` drives the rotation of the globe. The example also applies a canvas-based texture through `getImageData` to overlay graticule lines and subtle shading, and it animates the camera with `transition.attrTween` to smoothly orbit the planet. The data comes from a GeoJSON source embedded in the gist file.

YYannael

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

59% match

Loading thumbnail…

Fork of 3D Cube of Spheres

A rotating cube constructed from 64 colored spheres demonstrates Three.js's 3D rendering capabilities. Each sphere's hue is derived from its grid position using HSL color mapping, creating a gradient across the cube's volume. The scene uses `THREE.Scene`, `THREE.DirectionalLight`, and `THREE.AmbientLight` for illumination, while `OrbitControls` enables user interaction. The animation continuously rotates the sphere group, and the WebGL renderer displays the result in a black background.

PPremkumar

59% match