TV table with a gap for VCR

tv-player/index.html

@@ -448,13 +448,88 @@
 
             const tvGroup = new THREE.Group();
 
-            // --- 1. Table (TV stand) ---
-            const tableGeometry = new THREE.BoxGeometry(2.0, 0.7, 1.0);
-            const table = new THREE.Mesh(tableGeometry, darkWood);
-            table.position.y = 0.35; 
-            table.castShadow = true; 
-            table.receiveShadow = true; 
-            tvGroup.add(table);
+            // --- TV Table Dimensions & Material ---
+            const woodColor = 0x5a3e36; // Dark brown wood
+            const tableHeight = 0.7;    // Height from floor to top surface
+            const tableWidth = 2.0;
+            const tableDepth = 1.0;
+            const legThickness = 0.05;
+            const shelfThickness = 0.03;
+            // Use standard material for realistic shadowing
+            const material = new THREE.MeshStandardMaterial({ color: woodColor, roughness: 0.8, metalness: 0.1 });
+
+            // VCR gap dimensions calculation
+            const shelfGap = 0.2; // Height of the VCR opening
+            const shelfY = tableHeight - shelfGap - (shelfThickness / 2); // Y position of the bottom shelf
+
+
+            // 2. Table Top 
+            const topGeometry = new THREE.BoxGeometry(tableWidth, shelfThickness, tableDepth);
+            const tableTop = new THREE.Mesh(topGeometry, material);
+            tableTop.position.set(0, tableHeight, 0);
+            tableTop.castShadow = true;
+            tableTop.receiveShadow = true;
+            tvGroup.add(tableTop);
+
+            // 3. VCR Shelf (Middle Shelf)
+            const shelfGeometry = new THREE.BoxGeometry(tableWidth, shelfThickness, tableDepth);
+            const vcrShelf = new THREE.Mesh(shelfGeometry, material);
+            vcrShelf.position.set(0, shelfY, 0);
+            vcrShelf.castShadow = true;
+            vcrShelf.receiveShadow = true;
+            tvGroup.add(vcrShelf);
+
+            // 4. Side Walls for VCR Compartment (NEW CODE)
+            const wallHeight = shelfGap; // Height is the gap itself
+            const wallThickness = shelfThickness; // Reuse the shelf thickness for the wall width/depth
+            const wallGeometry = new THREE.BoxGeometry(wallThickness, wallHeight, tableDepth);
+            
+            // Calculate the Y center position for the wall
+            const wallYCenter = tableHeight - (shelfThickness / 2) - (wallHeight / 2); 
+            
+            // Calculate the X position to be flush with the table sides
+            const wallXPosition = (tableWidth / 2) - (wallThickness / 2);
+
+            // Left Wall
+            const sideWallLeft = new THREE.Mesh(wallGeometry, material);
+            sideWallLeft.position.set(-wallXPosition, wallYCenter, 0);
+            sideWallLeft.castShadow = true;
+            sideWallLeft.receiveShadow = true;
+            tvGroup.add(sideWallLeft);
+
+            // Right Wall
+            const sideWallRight = new THREE.Mesh(wallGeometry, material);
+            sideWallRight.position.set(wallXPosition, wallYCenter, 0);
+            sideWallRight.castShadow = true;
+            sideWallRight.receiveShadow = true;
+            tvGroup.add(sideWallRight);
+
+            // 5. Legs
+            const legHeight = shelfY; // Legs go from the floor (y=0) to the shelf (y=shelfY)
+            const legGeometry = new THREE.BoxGeometry(legThickness, legHeight, legThickness);
+            
+            // Utility function to create and position a leg
+            const createLeg = (x, z) => {
+                const leg = new THREE.Mesh(legGeometry, material);
+                // Position the leg so the center is at half its height
+                leg.position.set(x, legHeight / 2, z);
+                leg.castShadow = true;
+                leg.receiveShadow = true;
+                return leg;
+            };
+
+            // Calculate offsets for positioning the legs near the corners
+            const offset = (tableWidth / 2) - (legThickness * 2); 
+            const depthOffset = (tableDepth / 2) - (legThickness * 2);
+
+            // Front Left
+            tvGroup.add(createLeg(-offset, depthOffset)); 
+            // Front Right
+            tvGroup.add(createLeg(offset, depthOffset)); 
+            // Back Left
+            tvGroup.add(createLeg(-offset, -depthOffset)); 
+            // Back Right
+            tvGroup.add(createLeg(offset, -depthOffset)); 
 
             // --- 2. The TV box ---
             const cabinetGeometry = new THREE.BoxGeometry(1.75, 1.5, 1.0);
@@ -598,7 +673,7 @@
             landingSurfaces.push(shadeMesh);
 
             // --- 7. Old Camera (On the table) ---
-            const cameraBody = new THREE.BoxGeometry(0.4, 0.3, 0.2);
+            const cameraBody = new THREE.BoxGeometry(0.4, 0.3, 0.15);
             const cameraLens = new THREE.CylinderGeometry(0.08, 0.08, 0.05, 12);
             const cameraMaterial = new THREE.MeshPhongMaterial({ 
                 color: 0x333333,