A flight of stairs and a truss, written as functions. You set the risers, the bay height and the paint, and the mesh is built in the browser. Colour, grating and bolts are geometry, so the page never loads a GLB or a texture map.
I use AI to draft the kernel, the bevels and the fastener loops. The part that has to stay true, that a flight of stairs sits on the ground and climbs along one axis, comes from 25+ years of JavaScript, game development, modding and level design. I have been laying out stairs and service structures in game levels for a long time, and the numbers here are the ones I would still walk.
Three levels, one rebuild
Each model has three levels of detail. High keeps the bolts and the grating. Medium drops the fasteners. Low is the silhouette, which is what you want once a bolt is smaller than a pixel. Wear is a vertex attribute on the bevel strips, and a TSL uniform turns it up across the whole model.
The panel on the right writes the createModel call as you move a slider. Change the going and the flight is rebuilt from scratch. The materials stay. Drag right and the model turns with your hand.
The title block should say WebGPU. A slider is the rebuild. Drag right and the model turns with your hand.
WebGPU only, on Three.js 0.186.1, with no WebGL fallback. If the browser has no WebGPU, the page stops. Open it through a server, because file:// will not load the modules. php -S localhost:8000 or npx serve in the folder is enough.
- Open it on its own
models.html, the project-
SKILL.md
If a slider does nothing, that key is missing from the model's parameter list, and the console warning is the signal. If the feet float, the model has left y = 0.