3D room: fix card orientation (backfaces were toward the camera)

rotation.y had an extra 180° so every poster faced outward and the
front-side-only material rendered nothing; now lookAt(centre) +
DoubleSide. Stars exempted from fog; preserveDrawingBuffer on so the
canvas is screenshot-able. Verified by pixel readback (51% lit).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: tsemachh

3d/index.html

@@ -50,7 +50,7 @@ <h1>ATARI <span>ARCADE</span> · 3D</h1>
         var canvas = document.getElementById("gl");
         var tip = document.getElementById("tip");
         var loading = document.getElementById("loading");
-        var renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
+        var renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, preserveDrawingBuffer: true });
         renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
         var scene = new THREE.Scene();
         scene.fog = new THREE.Fog(0x05070c, 14, 30);
@@ -70,7 +70,7 @@ <h1>ATARI <span>ARCADE</span> · 3D</h1>
             pos[i * 3 + 2] = r * Math.sin(p) * Math.sin(t);
           }
           g.setAttribute("position", new THREE.BufferAttribute(pos, 3));
-          scene.add(new THREE.Points(g, new THREE.PointsMaterial({ color: 0x5cc8ff, size: 0.06, transparent: true, opacity: 0.7 })));
+          scene.add(new THREE.Points(g, new THREE.PointsMaterial({ color: 0x5cc8ff, size: 0.06, transparent: true, opacity: 0.7, fog: false })));
         })();
 
         scene.add(new THREE.AmbientLight(0xffffff, 1.0));
@@ -121,10 +121,10 @@ <h1>ATARI <span>ARCADE</span> · 3D</h1>
             var col = i % perRow;
             var theta = (col / perRow) * Math.PI * 2 + (row * 0.5 * (Math.PI * 2 / perRow));
             var geo = new THREE.PlaneGeometry(CARD_W, CARD_H);
-            var mat = new THREE.MeshBasicMaterial({ color: 0x0d1117 });
+            var mat = new THREE.MeshBasicMaterial({ color: 0x0d1117, side: THREE.DoubleSide });
             var mesh = new THREE.Mesh(geo, mat);
             mesh.position.set(R * Math.sin(theta), rows[row] || 0, -R * Math.cos(theta));
-            mesh.rotation.y = -theta + Math.PI;
+            mesh.lookAt(0, mesh.position.y, 0);   // face the camera at the centre
             mesh.userData = { game: g };
             group.add(mesh);
             pickables.push(mesh);