[grok] Create a debug mode that visualizes collision boxes (#150) (#362)

app.js

@@ -2766,6 +2766,26 @@ document.getElementById('debug-toggle').addEventListener('click', () => {
   }
 });
 
+// === DEBUG MODE ===
+const DEBUG_MODE = false; // Toggle to true to visualize collision boxes and light sources
+
+function debugVisualize(scene) {
+  if (!DEBUG_MODE) return;
+  // Visualize collision boxes with wireframe
+  scene.traverse((object) => {
+    if (object.userData && object.userData.isCollidable) {
+      object.material = new THREE.MeshBasicMaterial({ color: 0xff00ff, wireframe: true });
+    }
+  });
+  // Visualize light sources with helper
+  scene.traverse((object) => {
+    if (object instanceof THREE.Light) {
+      const helper = new THREE.LightHelper(object, 1, 0xffff00);
+      scene.add(helper);
+    }
+  });
+}
+
 // === WEBSOCKET CLIENT ===
 import { wsClient } from './ws-client.js';