Update game_viewer.html

frontend/game_viewer.html

@@ -492,12 +492,60 @@
             physicsWorld.addContactMaterial(defaultContactMaterial);
             physicsWorld.defaultContactMaterial = defaultContactMaterial;
 
-            // Create ground plane (10x10 centered at origin)
+            // Create blueprint-style grid texture for ground
+            function createBlueprintTexture(size = 512) {
+                const canvas = document.createElement('canvas');
+                canvas.width = size;
+                canvas.height = size;
+                const ctx = canvas.getContext('2d');
+
+                // Background - blueprint blue
+                ctx.fillStyle = '#1a4a6e';
+                ctx.fillRect(0, 0, size, size);
+
+                // Major grid lines (1 unit = 64px at 512 texture for 8 divisions)
+                const majorSpacing = size / 8;
+                ctx.strokeStyle = '#2a6a9e';
+                ctx.lineWidth = 2;
+                ctx.beginPath();
+                for (let i = 0; i <= 8; i++) {
+                    const pos = i * majorSpacing;
+                    ctx.moveTo(pos, 0);
+                    ctx.lineTo(pos, size);
+                    ctx.moveTo(0, pos);
+                    ctx.lineTo(size, pos);
+                }
+                ctx.stroke();
+
+                // Minor grid lines (subdivisions)
+                const minorSpacing = majorSpacing / 4;
+                ctx.strokeStyle = '#1f5a8e';
+                ctx.lineWidth = 1;
+                ctx.beginPath();
+                for (let i = 0; i <= 32; i++) {
+                    const pos = i * minorSpacing;
+                    ctx.moveTo(pos, 0);
+                    ctx.lineTo(pos, size);
+                    ctx.moveTo(0, pos);
+                    ctx.lineTo(size, pos);
+                }
+                ctx.stroke();
+
+                return canvas;
+            }
+
+            // Create ground plane
             const groundGeometry = new THREE.PlaneGeometry(WORLD_SIZE, WORLD_SIZE);
+            const blueprintCanvas = createBlueprintTexture();
+            const blueprintTexture = new THREE.CanvasTexture(blueprintCanvas);
+            blueprintTexture.wrapS = THREE.RepeatWrapping;
+            blueprintTexture.wrapT = THREE.RepeatWrapping;
+            blueprintTexture.repeat.set(WORLD_SIZE / 5, WORLD_SIZE / 5); // 5 units per texture tile
+
             const groundMaterial = new THREE.MeshStandardMaterial({
-                color: 0xffffff,
-                roughness: 0.8,
-                metalness: 0.2
+                map: blueprintTexture,
+                roughness: 0.9,
+                metalness: 0.0
             });
             const groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);
             groundMesh.rotation.x = -Math.PI / 2; // Rotate to be horizontal
@@ -513,37 +561,85 @@
             groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
             physicsWorld.addBody(groundBody);
 
-            // Create 4 invisible boundary walls (physics only, no visible mesh)
+            // Create 4 boundary walls with blueprint texture
             const wallHeight = 5;
             const wallThickness = 0.5;
 
+            // Wall material - same blueprint texture
+            const wallTexture = new THREE.CanvasTexture(createBlueprintTexture());
+            wallTexture.wrapS = THREE.RepeatWrapping;
+            wallTexture.wrapT = THREE.RepeatWrapping;
+
+            const wallMaterial = new THREE.MeshStandardMaterial({
+                map: wallTexture,
+                roughness: 0.9,
+                metalness: 0.0
+            });
+
+            // North/South walls (along X axis)
+            const nsWallGeometry = new THREE.BoxGeometry(WORLD_SIZE, wallHeight, wallThickness);
+            // Texture repeat: width based on world size, height = 1 tile (5 units)
+            const nsWallMaterial = wallMaterial.clone();
+            nsWallMaterial.map = wallTexture.clone();
+            nsWallMaterial.map.repeat.set(WORLD_SIZE / 5, wallHeight / 5);
+
             // North wall (z = +WORLD_HALF)
-            const northWallShape = new CANNON.Box(new CANNON.Vec3((WORLD_SIZE + wallThickness * 2) / 2, wallHeight / 2, wallThickness / 2));
+            const northWallMesh = new THREE.Mesh(nsWallGeometry, nsWallMaterial);
+            northWallMesh.position.set(0, wallHeight / 2, WORLD_HALF);
+            northWallMesh.receiveShadow = true;
+            northWallMesh.castShadow = true;
+            scene.add(northWallMesh);
+
+            const northWallShape = new CANNON.Box(new CANNON.Vec3(WORLD_SIZE / 2, wallHeight / 2, wallThickness / 2));
             const northWallBody = new CANNON.Body({ mass: 0, material: defaultMaterial });
             northWallBody.addShape(northWallShape);
-            northWallBody.position.set(0, wallHeight / 2, WORLD_HALF);
+            northWallBody.position.copy(northWallMesh.position);
             physicsWorld.addBody(northWallBody);
             wallBodies.push(northWallBody);
 
             // South wall (z = -WORLD_HALF)
+            const southWallMesh = new THREE.Mesh(nsWallGeometry, nsWallMaterial);
+            southWallMesh.position.set(0, wallHeight / 2, -WORLD_HALF);
+            southWallMesh.receiveShadow = true;
+            southWallMesh.castShadow = true;
+            scene.add(southWallMesh);
+
             const southWallBody = new CANNON.Body({ mass: 0, material: defaultMaterial });
             southWallBody.addShape(northWallShape);
-            southWallBody.position.set(0, wallHeight / 2, -WORLD_HALF);
+            southWallBody.position.copy(southWallMesh.position);
             physicsWorld.addBody(southWallBody);
             wallBodies.push(southWallBody);
 
+            // East/West walls (along Z axis)
+            const ewWallGeometry = new THREE.BoxGeometry(wallThickness, wallHeight, WORLD_SIZE);
+            const ewWallMaterial = wallMaterial.clone();
+            ewWallMaterial.map = wallTexture.clone();
+            ewWallMaterial.map.repeat.set(WORLD_SIZE / 5, wallHeight / 5);
+
             // East wall (x = +WORLD_HALF)
+            const eastWallMesh = new THREE.Mesh(ewWallGeometry, ewWallMaterial);
+            eastWallMesh.position.set(WORLD_HALF, wallHeight / 2, 0);
+            eastWallMesh.receiveShadow = true;
+            eastWallMesh.castShadow = true;
+            scene.add(eastWallMesh);
+
             const eastWallShape = new CANNON.Box(new CANNON.Vec3(wallThickness / 2, wallHeight / 2, WORLD_SIZE / 2));
             const eastWallBody = new CANNON.Body({ mass: 0, material: defaultMaterial });
             eastWallBody.addShape(eastWallShape);
-            eastWallBody.position.set(WORLD_HALF, wallHeight / 2, 0);
+            eastWallBody.position.copy(eastWallMesh.position);
             physicsWorld.addBody(eastWallBody);
             wallBodies.push(eastWallBody);
 
             // West wall (x = -WORLD_HALF)
+            const westWallMesh = new THREE.Mesh(ewWallGeometry, ewWallMaterial);
+            westWallMesh.position.set(-WORLD_HALF, wallHeight / 2, 0);
+            westWallMesh.receiveShadow = true;
+            westWallMesh.castShadow = true;
+            scene.add(westWallMesh);
+
             const westWallBody = new CANNON.Body({ mass: 0, material: defaultMaterial });
             westWallBody.addShape(eastWallShape);
-            westWallBody.position.set(-WORLD_HALF, wallHeight / 2, 0);
+            westWallBody.position.copy(westWallMesh.position);
             physicsWorld.addBody(westWallBody);
             wallBodies.push(westWallBody);