tjs

three.js workbenches — interactive 3D simulators with the physics taken seriously underneath the render. Quickstart →

• MarblesBuild a marble run and watch it go — a touch-first re-implementation of Codetaur's Marbleworks builder (@vibe-coded.com, source, MIT), whose concept and photogrammetry-fitted part dimensions this uses with full credit. The parts are procedural and sit on the toy's own connector grid: a 47 mm rise, a 15 mm insertion, a 140.07 mm port span — a male post in a female socket puts the piece above exactly one rise up, and a marble leaves a trough 13 mm below where it entered before dropping 34 mm down the bore into whatever is underneath. Ramps, snakes, zigzags, mazes, U-turns, paddle wheels, splits and a spiral funnel, swept from a real U-channel section. The marbles are solved rather than animated — one arclength coordinate each, rolling at a = (5/7)·g·sin θ like the rigid sphere they are, free-falling between pieces, at a fixed 240 Hz step. The point of this one is that it runs on a phone: the original needs React, WebGPU and a Box3D wasm solve, this is one static page — tap a glowing socket to aim, tap again to place, pinch to zoom, long-press to pull a piece out. Every run is a permalink.
• BrutProcedural concrete — type a seed and get a whole brutalist building: a béton-brut cathedral, a city hall in the inverted-ziggurat manner, a deep-plan office, a housing slab hung with balcony decks, a research block, a car park. The massing, every floor plan and the facade rhythm all fall out of the same seeded draw, so the model is not a box with windows drawn on it — the rooms are real rooms off a real corridor, and the elevation is a repeating cell of piers, ribbons, brise-soleil and shadow slots you can edit letter by letter. Orbit it in board-marked concrete, switch to x-ray to see the plans standing up inside the envelope, or section it on the drawing's own A–A line. The stairs are solved, not drawn: every riser in a flight exactly equal, the going from Blondel's rule (2R + G = 630 mm, the length of a human pace, published in 1675), and twenty types across the three ways a stair can spend the horizontal length it has to find — run (straight, cantilevered, crossed flights, amphitheatre seating, a cordonata — Michelangelo's stepped ramp at the Campidoglio, ridden as much as walked, so 2R + G lands near 1050 mm and Blondel is simply the wrong rule to ask of it — and an alternating tread ladder whose half-width paddles stagger left and right so each foot gets twice the going the plan shows), fold (dog-leg, open well, quarter turn, a winder whose kite treads replace the landing so the stair keeps climbing round the corner, three-flight, a scissor: two interlocking stairs in one shaft that never meet, giving two escape routes for one core, the imperial, and its mirror the bifurcated — an imperial takes you up together and disperses you left and right, a bifurcated stair gathers two flights onto one landing and carries everybody on as one) and turn (spiral, helical, a double helix — Chambord's two people who can climb without meeting — a triple, and a flying stair with no newel and no inner string, each tread bedded into the wall and resting a corner on the one below). The core is sized by the stair rather than the other way round, and a stairs view ghosts the building so you can read the fold and the turn from outside. And the lifts are a queueing problem, not a drawing. Nothing about a lift is decided by drawing one: how many there are and how big they are fall out of the round-trip time, and that is a function of how many people are upstairs, how many floors they are spread over, and how many fit in a car. Two thresholds, and they are different rules — access bites at ONE storey above the entrance, because a storey nobody in a wheelchair can reach is a storey they are excluded from; traffic bites at four. Then the expected number of stops and the expected highest floor the car reverses at, which are probabilities rather than worst cases, give the round trip; the round trip gives the wait and the capacity; and past forty-odd storeys neither can be met at any car size, which is why tall buildings are cut into zones — an arithmetic fact rather than a style. A housing block gets two small lifts, a sixty-storey office gets forty-eight in six zones, and if the floorplate will not hold the shafts the population needs, the shortfall is reported rather than absorbed. And none of it is arbitrary, because every building takes a position first: a parti — a piano nobile, a penthouse, a great hall, an atrium, an undercroft on pilotis, a cloister round a court, Le Corbusier's skip-stop section with a rue intérieure every third floor, a promenade architecturale — is drawn before the massing, and the section, the plan and the ceremony are all consequences of it. A penthouse is not a taller top floor: it is fewer and bigger rooms, a terrace, and a private helix rising out of the floor below that nobody else uses. An atrium is not a hole: it is what makes a crossed pair of flights legible, and what the terrace at the top of them looks down into. The panel states the parti, and so does every level's name. Then put it through an earthquake: the frame is real enough to solve, so the bench runs a modal analysis, an ASCE 7-16 seismic and hurricane check, and a Newmark time-history — pick an M7 or a category 5 and watch the storeys shear, with the peak drift and the governing failure read out as it moves. The loads view ghosts the envelope and colours every column by how hard it is working. And the roll is coupled to the solver. About two thirds of bare rolls produce a building the engineer rejects, which made half of every session a slot machine — so with must stand up on, the roll becomes a search. It rolls, solves, reads the governing check (the solver never returned a boolean; it returns every check with a utilisation and names the one that binds, which is a direction), and walks a ladder of repairs that check names: core wall shear asks for a different lateral system, a floor span asks for a shorter bay, an overturning failure asks for a wider base. What comes back verifies — and it is still a permalink, because a repaired building is still exactly its parameters. It never marks its own homework and it never lies: a search that finds nothing hands back the closest thing it found, marked failing. And because workability is a property of the building and the place, the roll says what hazard it was judged against — change the earthquake and the same building can go red again, which is the point rather than a bug. Every building, and every earthquake, is a permalink.
• ManifoldA concrete cobordism. Topologically this family is a genus-0 surface taking n boundary circles to m — n legs on the ground, a collector ring, m mouths in the air — and the three-legged one with a ring about its middle is just the n=3, m=1 member of it. Every piece is a hyperboloid of one sheet, which is doubly ruled: a curved surface made entirely of straight lines. So the thing reads as a Gaudí curve while every single rib in it is dead straight, which is the trick Shukhov built his towers with in 1896. The lattice is not fitted to the surface — it falls out of it exactly, because the two rulings cross at computable heights and every crossing is a joint. Dress it in trencadís, a board-marked shell, a perforated skin, glass, or leave it bare. And it is inhabited: the p-levels — where the two rulings cross — are the storeys, so a floor needs no extra structure at its edge, and their spacing widens away from the waist, giving every leg a double-height ground, apartments through the pinch and a lofty crown. Floor area per storey has a minimum at the waist, which is the building type rather than a style. Each leg gets a core and T-beam spokes; each level throws a balcony past the shell so you can count the storeys from outside; and the collector ring — the only place every leg touches — carries a street in the air. The schedule is read off the geometry: area and use per level, homes, people, plot ratio, homes per hectare. Then solve it: the bench carries two structural models on purpose. The pinned one asks whether it would stand as a bolted kit of parts, and usually the answer is no — the very straightness that makes it buildable gives the lattice a zero-energy floppy mode, so it stands only because its joints are cast monolithic. The real solve is a space frame: buckling load factor, member checks, foot uplift, and funicularity — what fraction of the ribs are in compression under gravity alone. A hanging chain inverted is 100% and needs no steel anywhere; the shortfall is quoted in tonnes of reinforcement. Watch it fold or buckle in its own softest mode, in force colours where warm is compression and cool is tension. Every manifold, and every wind, is a permalink.
• Brut · the drawing officeThe same seed, drawn instead of rendered — a full blueprint set: general arrangement plans for every storey (north up, cores in poché, the column grid, room refs and areas), four handed elevations, section A–A, a schedule of accommodation and a title block. Nothing is traced off the render: the plan is the generator's rooms and the elevation is its facade bays, which is why the drawings and the model agree bay for bay. It carries the engineer's set too — a verification schedule with a margin on every check, the design spectrum with the building's own periods marked on it, storey shear and drift diagrams against the code limit, the mode shapes the periods came from, and a framing plan with each column coloured by utilisation. Change the earthquake or the hurricane and the whole set re-solves. Print it, or take the whole set away as one SVG.
• GEB shadowboxThe Gödel, Escher, Bach trip-let, made to type into — one solid, three orthogonal shadows. Type a line per axis and the block is carved as the intersection of three text-extrusion prisms, so its shadow down each axis spells your line. Orbit it, snap to each face to read, or reveal the three prisms it's cut from.
• Dragonfly combatTwo male dragonflies duel in a neon arena — a browser replica of the aerial-combat guidance law (Fabian, Yarger, Chen & Lin, J. R. Soc. Interface 2026), integrated by a Rust→WebAssembly two-body solver. Each male runs the same simple rule — hold the rival dead-ahead and slightly high, easing off the throttle when close — and the loops, spirals and chaser⇄evader role-swaps all fall out of it. Ride three dragonfly POVs: a rectilinear head-cam, a conformal fisheye, and the segmented compound eye (ommatidial hex-mosaic), each with real depth-of-field that fixates the rival. A vaporwave C60 orb of platonic solids is hue-mapped by azimuth so you can read your own spin; trails are fading Tron light-rails. There's also a Tag match mode: two flyers with different brains (speed/agility/evasiveness) play tag — IT chases, the other evades, roles swap on contact, and over two fair rounds the brain that spends less time as IT wins. Paper-style kinematic graphs; JS fallback so it runs with or without the wasm.
• Kite CFDA Revolution kite in a wind — a vortex-lattice aerodynamics solver written in Rust, compiled to WebAssembly. Set the wind speed and angle; the bowed sail is a lattice of horseshoe vortices solved for the real circulation and per-cell forces. Tap a cell to cut it out and watch the load redistribute over the survivors — lift and line-pull drop, the centre of pressure shifts, asymmetric cuts throw a side force. JS fallback so it runs with or without the wasm.
• CubeSmart cellular bricks — a browser port of cube3D: every cube runs the exact trained network from the real ESP32 cube firmware, gossips class beliefs with its 6 face-neighbours, and the assembled shape classifies itself (7 ShapeNet classes, the repo's real 487-shape voxel dataset). Smash pieces off; the survivors re-decide what they are.
• BeelixA helix of bees — a hive emits, a death plane recycles, a light pipe pulses hive→death. The double helix isn't keyframed: it falls out of three servo forces (hold radius, hold twist, hold descent), and each light pulse ripples a glow+speed wave down the strands.
• SwarmA 3D swarm of bees — instanced micro-meshes over a live agent sim: orbit a flower, Reynolds boids, divergence-free curl-noise, and a true stigmergy scent field bees deposit into and follow. Lead the swarm; raise the pheromone; watch lanes self-organise.
• InfillA 50 mm sphere packed with 3D-printer infill — gyroid · Schwarz-P · diamond · Neovius · shared-wall honeycomb · grid · triangular · closed-cell Kelvin foam. Scroll to peel the layers and feel the internal geometry.
• OrbSpherical symmetry — slice a sphere into n lunes or a polyhedral kaleidoscope (tetra · octa · icosa)
• DeckCompose a motion cell — place HBots + linear axes, mount them into a kinematic tree, export YAML
• Motion suiteDrive any deck device — HBots + linear axes · jerk-limited motion · per-motor torque with mounted payload