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

**URL:** <https://discourse.threejs.org/t/free-game-gopuzzlego-jigsaw-puzzles-in-three-js-car-paint-metals-beveled-pieces-and-planets-you-can-assemble/95131>\
**Category:** Showcase\
**Tags:** shader-material, webgl, game-dev, puzzle, materials, shaders, geometry\
**Created:** [October 8, 2026, 7:58pm UTC](https://discourse.threejs.org/t/free-game-gopuzzlego-jigsaw-puzzles-in-three-js-car-paint-metals-beveled-pieces-and-planets-you-can-assemble/95131 "2026-10-08T19:58:06Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexei\_Tacu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexei_tacu/32/73310_2.png) [@Alexei\_Tacu](https://discourse.threejs.org/u/Alexei_Tacu)\
**Post date:** [October 8, 2026, 7:58pm UTC](https://discourse.threejs.org/t/free-game-gopuzzlego-jigsaw-puzzles-in-three-js-car-paint-metals-beveled-pieces-and-planets-you-can-assemble/95131/1 "2026-10-08T19:58:06Z")

</div>

Hi everyone! 👋

I’ve been building **[GoPuzzleGo](https://gopuzzlego.com)**, 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)](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/5/c56cb4b60bed4787c417f10ebf1f7f8eb7c9e1ec.gif)

## Planets 🌍

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)](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/d/4da10d24b03b3b302685f380d41c23c0a46926d3.gif)

## Start a game in 30 seconds

1. Open **[https://gopuzzlego.com](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:

- [Metal puzzle in 3D](https://gopuzzlego.com/play?mode=metallic&renderer=three)
- [Planet puzzle:](https://gopuzzlego.com/play?imageUrl=%2Fplanets%2Fmoon-colour.webp&imageName=The+Moon&renderer=three&shape=circle)

## 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!