Hi everyone,
I’ve been working on this solo project for about half a year and wanted to share it with the Three.js community since it wouldn’t exist without Three.js.
What it is: Classic Minesweeper rebuilt in a real 3D cube grid. Each cell has up to 26 neighbors instead of 8. Every board is validated by a solvability checker before it’s shown to the player — so there’s never a forced guess.
Play it: https://minesweeper3d.online
The technical bits that might interest this community:
The entire game runs in a single Three.js scene. The cube grid, the icosahedron geometry, the explosion view, and the sub-region highlighting are all built with Three.js 0.160.0.
Board generation is checked by a solver before any board is shown: flood-fill + subset deduction for the cube grid, a full CSP-style solver (subset + frontier-component enumeration) for the icosahedron mode.
The icosahedron mode generates nested spherical shells built from frustum-shaped (truncated-pyramid) cells instead of a regular grid — up to 38 neighbors per cell across shell boundaries. Detecting neighbors correctly across these shells was the most interesting Three.js challenge in the project.
Hover/neighbor outlines are real geometry (a 12-beam box-frame Mesh), not LineSegments — LineBasicMaterial.linewidth > 1 is silently clamped to 1px by Chrome/Safari/Edge (ANGLE), so I had to build the outlines as actual box geometry to get consistent thickness across browsers.
The step-by-step logic solver’s explanation bubbles are a DOM overlay tracked via Vector3.project(camera) — plain world-to-screen projection, updated every frame to follow the current cell through camera moves.
Everything is vanilla HTML/JS – no build tools, no framework. Three.js is self-hosted.
Happy to answer any questions about the Three.js implementation, the geometry generation, or the solver!
Best regards
Verstand2Go
(Collage screenshot attached – you can try the game directly at the link above)
