Three.js Geometry Browser

100%

Three.js Geometry Browser

✓ Published0🌍 Public

Last edited Oct 29, 2017

Created on Oct 29, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

sketch 02

A 3D block model rotates in a dark WebGL scene, its dimensions adjustable in real time through a dat.GUI control panel. The sketch uses Three.js with a perspective camera and OrbitControls, rendering both wireframe and flat-shaded materials to highlight the box’s edges and surfaces. Animate continuously rebuilds the geometry from parametric width, depth, and height inputs, while the directional and ambient lights define the form. The code does not load external data, relying instead on procedural geometry and interactive user sliders.

BBillyBHWong

76% match

Loading thumbnail…

sketch 01

A single, cube-like form floats in a black void, its dimensions adjustable in real time through a dat.GUI panel. Three.js renders the object with a flat-shaded Phong material and a thin wireframe overlay, while an ambient and a directional light define its volume. The viewer can orbit around the mesh using OrbitControls, though the object itself remains static, and no data or external source is visualized beyond the interactive geometry itself.

BBillyBHWong

69% match

Loading thumbnail…

nyc map

This example displays three rotating three-dimensional cubes on a gray background, each spinning continuously around its x- and y-axes. Built with Three.js and rendered to a Canvas via WebGL, the scene uses a perspective camera and directional lighting to give the geometric shapes depth. The cubes are created with `THREE.BoxGeometry` and `MeshPhongMaterial`, and the animation loop uses `requestAnimationFrame` to update rotations over time.

Ssabrinamochi

68% match

Loading thumbnail…

Geodesic Grid

A rotating geodesic polyhedron wireframe displays a shimmering, three-dimensional grid atop a fixed circular frame. The visualization uses d3.geodesic to generate a subdivided icosahedron’s edges, rendered as an animated SVG path via d3.geo.path with an orthographic projection. The d3.timer continuously updates the projection’s rotate parameters, creating smooth, continuous motion.

Mmbostock

68% match

Loading thumbnail…

three.js

Three colored cubes rotate continuously in a gray 3D scene, each spinning on its X and Y axes at staggered speeds. The visualization uses Three.js with a WebGL renderer to draw the cubes, a PerspectiveCamera, DirectionalLight, and MeshPhongMaterial for shading. The animation loop increments rotation based on time, driven by requestAnimationFrame, with cubes positioned at different X coordinates.

Ssabrinamochi

68% match

Loading thumbnail…

three.js

This example combines 2D map tiles with a 3D plane using Three.js and OpenLayers. It loads New York City basemap and label layers from a WMTS service, then wraps the rendered map canvas as a texture onto a PlaneGeometry. TrackballControls enable interactive camera rotation around the mapped plane. The scene renders via WebGL, with the map texture updating on each map postrender event.

Ssabrinamochi

68% match

Loading thumbnail…

Rotating Cube

A rotating steel-blue cube appears in a Three.js scene, with its vertical and horizontal rotation controlled by two range sliders. The example builds a basic scene with a `PerspectiveCamera`, `BoxGeometry`, and `MeshBasicMaterial`, then adds an `EdgesGeometry` wireframe to highlight the cube’s edges. It is based on the Three.js “Creating a scene” guide and uses the library’s `WebGLRenderer` for canvas-based rendering, with no external data source.

FFrissAnalytics

68% match

Loading thumbnail…

My first Three.js app

A green cube spins slowly, rendered against a black background. The example demonstrates a minimal Three.js scene. It uses a `PerspectiveCamera` and a `WebGLRenderer` to draw a box geometry with a `MeshBasicMaterial`. The cube’s rotation is updated in a `requestAnimationFrame` loop, with horizontal and vertical velocities that accumulate random jitter, producing a slightly wobbly, organic motion. A second version shows the cube as a white wireframe.

11wheel

67% match