From c870b7e5f307fb838678188b60830ba7beedd270 Mon Sep 17 00:00:00 2001 From: Dejvino Date: Sat, 8 Nov 2025 22:52:09 +0100 Subject: [PATCH] TV table with a gap for VCR --- tv-player/index.html | 91 ++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 83 insertions(+), 8 deletions(-) diff --git a/tv-player/index.html b/tv-player/index.html index c74d339..1fd1e05 100644 --- a/tv-player/index.html +++ b/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,