Teaching a printed dragon to fly

I wanted to experiment with Three.js after seeing flo-bit’s six tiny worlds, vibe-coded’s marble maze with Box3D physics, and countless other things people have been making in the browser.

I know almost nothing about 3D modelling, so I thought a model designed for 3D printing might be a simple place to start. An articulated print seemed especially promising: someone had already figured out the shape and how the pieces fit together.

I chose an articulated dragon by jars_2003 on MakerWorld. Its STL file describes the surface as triangles. We split it into seven movable sections, keeping all the original detail, then adjusted the scale, orientation, and shading for Three.js.

The articulation needed another step. The printed connections don’t arrive as a digital rig: we connected the sections with six joints in Box3D and set how far each could bend and twist. Three.js draws the dragon; Box3D handles its physical movement.

Working with GPT-6 Astra, I turned it into a flight playground. The head leads the swoops, the body follows, and the tail trails behind. Arrow keys take over from autopilot. You can also grab a section, shake the dragon, and let go with enough momentum to throw it.

Astra chose jade, copper, and obsidian as the starting finishes. I just asked for a little more shine here, a little less there. Those properties live in the material presets. Colour, roughness, metalness, and transmission are Three.js settings, separate from the STL geometry.

The model isn’t included in the repository; download it separately from its creator.

One unexpected rabbit hole: looking at the flight-path code, I spotted CatmullRomCurve3, the Three.js curve guiding the dragon’s head. Catmull as in Ed Catmull, Pixar’s co-founder. The other half of the name is Raphael Rom: their 1974 paper, A Class of Local Interpolating Splines, describes the mathematics behind these smooth curves through a series of points.

Project: clyons/dragon-flight-til.

Demo: portrait · widescreen.