Gist d773d6efc9640e3600ce

100%

Gist d773d6efc9640e3600ce

✓ Published0🌍 Public

Last edited Nov 21, 2014

Created on Nov 21, 2014

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 8232daa7d3b24a25b9f7566ff1da4522

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.

Aabonello

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

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

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

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

70% match

Loading thumbnail…

CSS 3D cube

This example shows a wireframe-style cube rendered in 3D using CSS transforms and perspective. The cube is composed of six square faces, each positioned and rotated with the `rotateY` and `rotateX` functions applied to `translateZ` values, creating a three-dimensional structure. The code relies on CSS variables and the `-webkit-transform-style: preserve-3d` property to maintain depth. It uses only static HTML and CSS, with no JavaScript or external libraries, and the faces are given semi-transparent backgrounds and inset shadows for visual clarity.

Aabernier

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

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

69% match