From aabf20405fd6d94998c8276a6a6be31e6c20aef0 Mon Sep 17 00:00:00 2001
From: jwinterm <johnwmurphy@gmail.com>
Date: Mon, 13 Jul 2026 08:53:43 -0400
Subject: [PATCH] feat(3d): fog-of-war parity (hide unexplored + distance fog
 on explored)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

3D built every tile including unexplored, revealing the whole map. Now: _buildTiles skips
unexplored (dark) cells so they never render (void), and the scene gets THREE distance Fog
(black, 14->32) which — since the camera follows the player — fades explored tiles to black away
from you. Background set to pure black to match. Entities are already fog-gated at the scene
level (features on seen, monster in-view). Net: unexplored hidden, explored fades with distance,
no map-edge leak — matching the 2D modes.
---
 html/js/render/threeRenderer.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/html/js/render/threeRenderer.js b/html/js/render/threeRenderer.js
index 9131343..276c970 100644
--- a/html/js/render/threeRenderer.js
+++ b/html/js/render/threeRenderer.js
@@ -29,7 +29,12 @@
     ThreeRenderer.prototype._init = function () {
         var T = this.THREE;
         this.scene = new T.Scene();
-        this.scene.background = new T.Color(0x0a0c0f);
+        this.scene.background = new T.Color(0x000000);
+        // Fog-of-war parity with the 2D modes: the camera follows the player, so distance fog fades
+        // explored tiles to black away from you, and _buildTiles skips unexplored ('dark') tiles so
+        // they never render. Together: unexplored = hidden, explored fades with distance, no map leak.
+        // (camera sits ~14.5 units from the player; fade from there out to ~15 tiles.)
+        this.scene.fog = new T.Fog(0x000000, 14, 32);
         this.camera = new T.OrthographicCamera(-10, 10, 10, -10, 0.1, 100);
         this.camera.position.set(8, 9, 8);
         this.camera.lookAt(0, 0, 0);
@@ -83,6 +88,7 @@
         for (var y = 0; y < scene.rows; y++) {
             for (var x = 0; x < scene.cols; x++) {
                 var kind = scene.grid[y][x];
+                if (kind === 'dark') continue; // unexplored — leave it void (fog-of-war: never render it)
                 var def = scene.legend[kind] || {};
                 var h = kind === 'wall' ? 0.9 : (kind === 'bar' ? 0.42 : (kind === 'table' ? 0.28 : 0.08));
                 var geom = new T.BoxGeometry(kind === 'wall' ? 1 : 0.96, h, kind === 'wall' ? 1 : 0.96);