sketch_03

100%

✓ Published0🌍 Public

Last edited May 16, 2018

Created on May 14, 2018

This example visualizes a three-dimensional architectural massing model of a building lot, showing the relationship between a primary structure and its surrounding context. The code uses Three.js with WebGL rendering to display a bright yellow mass and semi-transparent white context volumes against a gray background. A perspective camera provides a dynamic view of the spatial arrangement, while directional and ambient lighting enhance the geometric forms. The visualization includes interactive controls via dat.GUI to toggle between intermediate and corner lot configurations, and text sprites label the overall design as "RSA-5" with dimension annotations.

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

75% 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…

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

65% match

Loading thumbnail…

draw_plan_01

This example shows a scaled architectural floor plan of a house’s second story, dividing the space into four colored rooms plus a red stairwell, with a title below. Built with D3 v4, it renders SVG rectangles for each room, an outer wall outline, and a labeled caption. The code sets fixed pixel dimensions for the plan, positions elements via x/y attributes, and uses simple style fills and strokes to distinguish areas. No data source is used; the layout is hardcoded, and interactivity is absent.

BBillyBHWong

64% match

Loading thumbnail…

In-Output

This example presents a static layout of a residential property interface with a right-side control panel, showing building details like gross square footage, floor count, and room numbers. The visualization uses D3.js v4 to append an SVG canvas and text element, while Semantic UI provides styled input fields, checkboxes, a slider for adjusting rear yard size, and a button for requesting sample drawings. The layout combines a blue sidebar for user controls with an empty main drawing area, though the code currently displays only placeholder text rather than an actual floor plan or data-driven graphic.

BBillyBHWong

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

63% match

Loading thumbnail…

Rubix Cube

This example renders a classic 3x3x3 Rubik’s Cube in Three.js using WebGL, with all standard color faces (white, yellow, red, orange, green, blue) applied to the outermost cubies. It uses three directional lights and ambient light to illuminate the scene, plus edge outlines to accentuate each cubelet. The user can rotate and zoom via OrbitControls, while an animation loop applies slow continuous rotation to the entire group. The code constructs the cube by positioning 26 small box meshes and assigns per-face materials based on their spatial position.

CCurran Kelleher

63% match

Loading thumbnail…

proj_2

A 3D grid of spheres forms a cube, with each sphere’s color derived from its position along the x, y, and z axes using an HSL mapping. The entire cube rotates slowly over time. Built with Three.js, the visualization uses PerspectiveCamera, OrbitControls for user interaction, SphereGeometry, MeshPhongMaterial, and DirectionalLight. The animation loop updates rotation increments and re-renders the scene, while damping controls allow smooth camera zoom and orbit.

PPremkumar

63% match