Skip to main content
100%

Gist df3588593711a8addd2cff52579ba3dd

✓ Published0🌍 Public
UUtopiah
Last edited May 27, 2020
Created on May 27, 2020

This WebGL visualization uses A-Frame and Three.js to detect and highlight intersections between 3D objects in a scene. It calculates bounding boxes for two objects retrieved from the DOM—a burger and an aquarium—using `THREE.Box3().setFromObject()` on their `object3D` components. Yellow and green `Box3Helper` outlines visualize each bounding volume, then the code calls `bbox_burger.intersectsBox(bbox_aq)` to test for overlap, returning a boolean that indicates whether the objects collide.

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

Three.js Geometry Browser

This interactive Three.js example demonstrates a real-time 3D geometry explorer, allowing users to cycle through and modify a variety of parametric shapes, including boxes, cylinders, and custom polyhedra like the gem form. It shows how wireframe overlays and solid meshes update together as parameters change. The code relies on the Three.js library, using `PolyhedronGeometry`, `WireframeGeometry`, and `OrbitControls` for camera interaction, while `dat.gui` provides the control panel for adjusting geometry dimensions and segmentation. Rendering is handled through WebGL with continuous animation, and a separate HTML link opens the scene in a new window.

BBillyBHWong
62% match
Loading thumbnail…

3D Force-Directed Graph (ThreeJS)

This example shows an interactive 3D force-directed graph rendered with Three.js WebGL, using ngraph.forcelayout3d for physics simulation and trackball controls for rotation, zoom, and panning. It cycles through three topological data sets—Les Misérables character co-occurrences, a blocks.json citation network, and D3 source-code dependencies—with node size, color, and name mapped per dataset using Three.js spheres, line geometry, and raycaster-based tooltips.

TThanaporn-sk
61% match
Loading thumbnail…

Collision Detection

Interactive collision detection shows 200 colored circles moving inside a rectangular SVG viewport. Moving the mouse repels the circles, pushing them apart and causing them to collide and bounce off one another. The visualization uses D3 v3’s force layout and quadtree-based collision handling via `d3.layout.force` and `d3.geom.quadtree`, with mouse movement updating a fixed root node to drive repulsion. Rendering is done with SVG circle elements, and the force simulation updates their positions on each tick.

Mmbostock
61% match
Loading thumbnail…

Basic Three.js App

A single three-dimensional cube rotates continuously in a WebGL-rendered scene. The code builds the scene with Three.js, using a `THREE.PerspectiveCamera` positioned along the z-axis and a `THREE.WebGLRenderer` that fills the window. The cube itself is created from `THREE.BoxGeometry` and shaded with `THREE.MeshNormalMaterial`, which colors each face based on its normal direction. An animation loop, driven by `requestAnimationFrame`, increments the cube’s rotation around both the x and y axes, producing a smooth, perpetual spin.

Aaaizemberg
60% match
Loading thumbnail…

Gist a228815e7f945fd39d1dc914fcc32a43

This example uses A-Frame to demonstrate live observation of an HTML attribute change within a 3D scene. It shows how the `MutationObserver` API logs the `position` attribute of an `a-sphere` element as the code updates it from "0 2.75 -5" to "0 1.75 -5". The observer is configured with `{attributes:true}` to trigger on attribute modifications, printing the changed attribute name, new value, and target node to the console. The code directly interacts with the scene via `AFRAME.scenes[0]` and standard DOM querying.

UUtopiah
60% match