Skip to main content
100%

Gist 8232daa7d3b24a25b9f7566ff1da4522

✓ Published0🌍 Public
Aabonello
Last edited Dec 14, 2017
Created on Oct 3, 2018

This WebGL visualization uses p5.js to render a dynamic 3D scene composed of primitive shapes, including planes, boxes, spheres, cylinders, cones, ellipsoids, and toruses. The code applies normalMaterial to map normal vectors to RGB colors, with ambient and directional lighting enhancing the depth of each geometry. Through camera positioning and rotation transformations, the shapes appear to float and spin in space. The example demonstrates p5.js’s WEBGL renderer capabilities for creating three-dimensional compositions from basic geometric primitives, highlighting the library’s built-in shape functions and material systems.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist d773d6efc9640e3600ce

This WebGL-based visualization uses Three.js's CSS3DRenderer to position and animate 3D objects in a browser scene, with device orientation controls enabling rotation based on a mobile device's physical movement. The renderer maps 3D transforms onto CSS3D objects, preserving depth and perspective. The scene is rendered using a combination of CSS3D and WebGL techniques, with animated transitions driven by device orientation input.

Aabernier
77% 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
75% match
Loading thumbnail…

3D Cube of Spheres

This visualization displays a 4x4x4 cube composed of 64 colored spheres, with a hue gradient varying across each axis and a gentle rotation animation over a dark, starry background. The scene is rendered in WebGL using Three.js, featuring perspective projection, directional and ambient lighting, and interactive orbit controls for rotating, zooming, and panning. The code organizes configuration parameters in a separate module and uses `THREE.SphereGeometry`, `MeshPhongMaterial`, and `OrbitControls` to construct and manipulate the 3D environment.

CCurran Kelleher
74% match
Loading thumbnail…

Gist 09ff22dbd93c718f9a1c

A monochrome checkerboard plane fills the view, rendered as a three-dimensional ground surface using Three.js with a WebGL renderer. The page sets up a perspective camera positioned above the plane, with its view matrix applied to the HTML root element via CSS perspective and `matrix3d`. A single hemisphere light illuminates the scene, while the plane material uses a repeating checker texture with flat shading. The code includes commented-out references to stereo effects, device orientation controls, and orbit controls, but only the static scene is active in this version.

Aabernier
74% match
Loading thumbnail…

Gist d5d76528348514dffd9547a2cd438944

This visualization renders a 3D raymarched scene using a single shader written in HLSL. It displays a collection of geometric primitives—planes, spheres, boxes, ellipsoids, tori, cylinders, cones, prisms, capsules, and pyramids—each defined by signed distance functions (SDFs) and composited in a shader. The code includes multiple SDF implementations with both distance-bound and correct-distance variants, demonstrating how shape intersections and subtractions are computed. The scene is rendered through a fragment shader that applies raymarching techniques, with an anti-aliasing toggle controlled by the `AA` constant.

Aandybak
73% match
Loading thumbnail…

Gist 2dcaad3a5d177257ef30955eada2624a

This visualization uses Three.js to render a three-dimensional scene that presents an academic consent form and instructions for using ChatGPT in a high school digital culture class. The WebGL canvas displays the document text as a textured surface, with the form details, registration steps, and activity guidelines mapped onto the 3D geometry. The material appears to be a rendered paper-like plane with text projected across its surface, creating a physical representation of the digital document. The setup likely uses Three.js scene construction with text applied as textures to show the written information as part of the 3D space.

IIoTeacher
72% match
Loading thumbnail…

Gist 3a15019e7485e512117d4a041eb217dd

An interactive WebGL visualization displays a partially transparent human brain surface model, rendered in white with a randomized pattern of fully transparent faces that create a mesh-like see-through effect. The scene uses Three.js with the VTKLoader to load a FreeSurfer curvature dataset, applying dual materials—one opaque and one fully transparent—to individual faces. TrackballControls enable rotation, zoom, and panning, while a directional light and stats monitor support the animated 3D exploration.

Aakeshavan
72% 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
72% match