[ FREE GAME ] GoPuzzleGo – jigsaw puzzles in Three.js: car-paint metals, beveled pieces and planets you can assemble

Showcase
, , , , , ,
1

Hi everyone! :waving_hand:

I’ve been building GoPuzzleGo, a free browser jigsaw puzzle site, and recently moved the board to a Three.js renderer. Every piece is a real 3D object: extruded, beveled, lit, and you can tilt the whole table.

Metal puzzles

No picture, just material. You pick a colour and a finish, and the pieces become solid metal:

  • MeshPhysicalMaterial with clearcoat, a procedural flake normal map for car paint, and iridescence for the pearl/oil-slick finishes
  • Image-based lighting from a softbox / photographed sky, so the edges actually reflect something when you drag a piece
  • A modelled chamfer bevel (not just a shader trick), so every edge catches a highlight
  • All pieces draw as one BatchedMesh, so a few hundred metal pieces stay smooth

Screen_Recording_20261008_221037_Chrome_1(1)

Planets :globe_showing_europe_africa:

This one was the most fun. Relief puzzles take a heightmap and raise the terrain on each piece, with an optional dome so the finished puzzle reads as a globe. Mountains stay mountains when you pick a piece up, and the snap still lines everything up perfectly.

Screen_Recording_20261008_221636_Chrome_1(1)

Start a game in 30 seconds

  1. Open https://gopuzzlego.com
  2. Choose a Metallic tile (or any picture) and pick a colour + finish
  3. In Play settings, switch on 3D pieces
  4. Pick a shape and piece count, hit Solve
  5. Drag to move, right-click (or two fingers) to rotate, and tilt the board to see the light play on the edges

Direct links:

A few things I learned

  • Self-intersecting outlines will haunt you. At narrow knob necks the bevel’s inner loop crosses itself, and earcut happily fills the wrong side. The fix was to split the loop into its real lobes and triangulate each one separately.
  • Shortest-arc rotation matters for snapping: lerping 350° → 0° the naive way spins the piece almost a full turn.
  • Override iridescenceThickness in lights_physical_fragment, not in iridescence_fragment, if you want per-pixel iridescence control.

It’s free to play, no sign-up needed. I’d love feedback on the materials and lighting, and especially on performance on your hardware. Happy to answer anything about the setup!