Add 1 files

index.html

@@ -383,6 +383,14 @@
             scene.add(cabinetGroup);
             updateCabinetModel();
             
+            // Add a grid helper and axes helper for debugging (can be removed in production)
+            const gridHelper = new THREE.GridHelper(100, 100);
+            scene.add(gridHelper);
+            
+            const axesHelper = new THREE.AxesHelper(5);
+            axesHelper.position.y = 0.1; // Slightly above ground
+            scene.add(axesHelper);
+            
             // Handle window resize
             window.addEventListener('resize', onWindowResize);
             
@@ -421,6 +429,7 @@
             const shelvesCount = parseInt(shelvesSlider.value);
             const drawersCount = cabinetType.value === 'base' ? parseInt(drawersSlider.value) : 0;
             const hasGlassDoors = glassDoors.checked;
+            const thickness = 0.75; // Material thickness in inches
             
             // Set main material
             let mainMaterial = createMaterial(colorValue, false);
@@ -435,77 +444,91 @@
                 metalness: 0.0
             });
             
-            // Cabinet dimensions
-            const thickness = 0.75;
-            const doorThickness = 1.0;
-            const handleSize = 0.2;
+            // These factors help with converting inches to Three.js units
+            // Since Three.js uses arbitrary units, we'll treat 1 unit = 1 inch
+            const doorThickness = 0.75;
+            const handleSize = 2.0; // Door handle size
             const shelfThickness = 0.5;
             
+            // Create the cabinet box structure first
+            let cabinetBox = new THREE.Group();
+            cabinetGroup.add(cabinetBox);
+            
             // Bottom panel
             createPanel(width, thickness, depth, 
                        [0, thickness/2, 0], 
-                       mainMaterial);
+                       mainMaterial, cabinetBox);
             
             // Top panel
             createPanel(width, thickness, depth, 
                        [0, height - thickness/2, 0], 
-                       mainMaterial);
+                       mainMaterial, cabinetBox);
             
             // Left side
             createPanel(thickness, height - 2*thickness, depth, 
                        [-width/2 + thickness/2, height/2, 0], 
-                       mainMaterial);
+                       mainMaterial, cabinetBox);
             
             // Right side
             createPanel(thickness, height - 2*thickness, depth, 
                        [width/2 - thickness/2, height/2, 0], 
-                       mainMaterial);
+                       mainMaterial, cabinetBox);
             
             // Back panel
             createPanel(width - 2*thickness, height - 2*thickness, thickness, 
                        [0, height/2, -depth/2 + thickness/2], 
-                       mainMaterial);
+                       mainMaterial, cabinetBox);
+            
+            // Calculate interior height (accounting for drawers if they exist)
+            const interiorHeight = height - 2*thickness - (drawersCount > 0 ? (height * 0.33) : 0);
             
-            // Middle divider if two doors
+            // Middle divider if two doors (only extends down to drawer section if drawers exist)
             if (isTwoDoors) {
-                createPanel(thickness, height - 2*thickness - (drawersCount > 0 ? (height * 0.33) : 0), depth, 
-                           [0, height/2 - (drawersCount > 0 ? (height * 0.33)/2 : 0), 0], 
-                           mainMaterial);
+                const dividerHeight = drawersCount > 0 ? height - 2*thickness - (height * 0.33) : height - 2*thickness;
+                createPanel(thickness, dividerHeight, depth, 
+                           [0, (drawersCount > 0 ? (height/2 - (height * 0.33)/2) : height/2), 0], 
+                           mainMaterial, cabinetBox);
             }
             
             // Create doors
-            const doorHeight = height - thickness - (drawersCount > 0 ? (height * 0.33) : 0);
-            const doorYPosition = height/2 - (drawersCount > 0 ? (height * 0.33)/2 : 0);
+            const doorHeight = drawersCount > 0 ? height - thickness - (height * 0.33) : height - 2*thickness;
+            const doorYPosition = drawersCount > 0 ? height/2 - (height * 0.33)/2 : height/2;
             
             if (isTwoDoors) {
                 const doorWidth = (width - thickness) / 2;
                 
                 // Left door
                 createDoor(doorWidth, doorHeight, doorThickness, 
-                          [-(width - doorWidth)/2 + doorThickness/2, doorYPosition, depth/2 - doorThickness/2], 
-                          mainMaterial, hasGlassDoors, true);
+                          [-(width - thickness)/2 + doorThickness/2, doorYPosition, depth/2 - doorThickness/2], 
+                          mainMaterial, hasGlassDoors, true, cabinetBox);
                 
                 // Right door
                 createDoor(doorWidth, doorHeight, doorThickness, 
-                          [(width - doorWidth)/2 - doorThickness/2, doorYPosition, depth/2 - doorThickness/2], 
-                          mainMaterial, hasGlassDoors, false);
+                          [(width - thickness)/2 - doorThickness/2, doorYPosition, depth/2 - doorThickness/2], 
+                          mainMaterial, hasGlassDoors, false, cabinetBox);
             } else {
                 // Single door
                 const doorWidth = width;
                 createDoor(doorWidth, doorHeight, doorThickness, 
                           [0, doorYPosition, depth/2 - doorThickness/2], 
-                          mainMaterial, hasGlassDoors, false);
+                          mainMaterial, hasGlassDoors, false, cabinetBox);
             }
             
-            // Add shelves
-            const availableHeight = height - 2*thickness - (drawersCount > 0 ? (height * 0.33) : 0);
+            // Add shelves only in the upper section (above any drawers)
+            const availableHeight = interiorHeight;
             const shelfSpacing = availableHeight / (shelvesCount + 1);
             
             for (let i = 0; i < shelvesCount; i++) {
-                const shelfY = thickness + (i + 1) * shelfSpacing - (drawersCount > 0 ? (height * 0.33)/2 : 0);
+                const shelfY = thickness + (i + 1) * shelfSpacing;
+                if (drawersCount > 0) {
+                    // Adjust shelf position to be above the drawer section
+                    const drawerSectionHeight = height * 0.33;
+                    shelfY = thickness + (i + 1) * shelfSpacing + (height - thickness - drawerSectionHeight - availableHeight);
+                }
+                
                 createShelf(width - 2*thickness - 0.5, shelfThickness, depth - thickness - 0.5, 
-                            [0, shelfY, -0.25], 
-                            shelfMaterial);
+                            [0, shelfY, 0], 
+                            shelfMaterial, cabinetBox);
             }
             
             // Add drawers for base cabinets
@@ -515,19 +538,19 @@
                 
                 for (let i = 0; i < drawersCount; i++) {
                     const drawerY = thickness + i * drawerHeight + drawerHeight/2;
-                    createDrawer(width, drawerHeight, depth * 0.7, 
-                                [0, drawerY, depth/4 - depth/8], 
-                                drawerFrontMaterial, mainMaterial);
+                    createDrawer(width, drawerHeight, depth * 0.8, 
+                                [0, drawerY, depth/2 - depth*0.1], 
+                                drawerFrontMaterial, mainMaterial, cabinetBox);
                 }
             }
             
             // Adjust camera target based on cabinet size
             controls.target.set(0, height/2, 0);
             controls.update();
+            camera.position.set(width * 1.2, height * 1.2, depth * 1.2);
             
             // Update capacity calculation
             const interiorWidth = width - 2*thickness;
-            const interiorHeight = height - 2*thickness - (drawersCount > 0 ? (height * 0.33) : 0);
             const interiorDepth = depth - thickness;
             const capacity = (interiorWidth * interiorHeight * interiorDepth) / 1728; // convert to cubic feet
             
@@ -538,6 +561,9 @@
             capacityDisplay.textContent = `${capacity.toFixed(1)} cu.ft`;
             dimensionsDisplay.textContent = `${width}" W × ${height}" H × ${depth}" D`;
             shelvesDisplay.textContent = shelvesCount;
+            if (drawersCount > 0) {
+                drawersDisplay.textContent = drawersCount;
+            }
         }
         
         function createMaterial(colorValue, isDrawerFront = false) {
@@ -584,17 +610,17 @@
             return new THREE.MeshStandardMaterial(materialOptions);
         }
         
-        function createPanel(width, height, depth, position, material) {
+        function createPanel(width, height, depth, position, material, parentGroup) {
             const geometry = new THREE.BoxGeometry(width, height, depth);
             const panel = new THREE.Mesh(geometry, material);
             panel.castShadow = true;
             panel.receiveShadow = true;
             panel.position.set(position[0], position[1], position[2]);
-            cabinetGroup.add(panel);
+            parentGroup.add(panel);
             return panel;
         }
         
-        function createDoor(width, height, thickness, position, material, hasGlass, isLeftDoor) {
+        function createDoor(width, height, thickness, position, material, hasGlass, isLeftDoor, parentGroup) {
             const doorGroup = new THREE.Group();
             doorGroup.position.set(position[0], position[1], position[2]);
             
@@ -607,37 +633,53 @@
             
             // Glass panel if selected
             if (hasGlass) {
-                const glassWidth = width * 0.8;
-                const glassHeight = height * 0.7;
-                const glassGeometry = new THREE.BoxGeometry(glassWidth, glassHeight, thickness * 0.1);
+                const glassWidth = width * 0.9;
+                const glassHeight = height * 0.8;
+                const glassGeometry = new THREE.BoxGeometry(glassWidth, glassHeight, thickness * 0.05);
                 const glassMaterial = new THREE.MeshPhysicalMaterial({
-                    color: 0x88ccff,
-                    transmission: 0.8,
-                    roughness: 0.1,
+                    color: 0xE6F0FF,
+                    transmission: 0.9,
+                    roughness: 0.0,
                     metalness: 0.0,
                     transparent: true,
-                    opacity: 0.7,
+                    opacity: 0.8,
                     ior: 1.5,
                     thickness: 0.1
                 });
                 const glass = new THREE.Mesh(glassGeometry, glassMaterial);
-                glass.position.z = thickness * 0.45;
+                glass.position.z = thickness * 0.3;
                 doorGroup.add(glass);
             }
             
             // Handle
-            const handleGeometry = new THREE.CylinderGeometry(0.15, 0.15, 3, 16);
+            const handleGeometry = new THREE.CylinderGeometry(0.5, 0.5, 3, 16);
             const handleMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
             const handle = new THREE.Mesh(handleGeometry, handleMaterial);
             handle.rotation.z = Math.PI/2;
             handle.position.set(isLeftDoor ? -width/2 + 2 : width/2 - 2, 0, thickness);
             doorGroup.add(handle);
             
-            cabinetGroup.add(doorGroup);
+            // Hinges (simple representation)
+            const hingeGeometry = new THREE.CylinderGeometry(0.2, 0.2, 0.5, 16);
+            const hingeMaterial = new THREE.MeshStandardMaterial({ color: 0x888888 });
+            
+            // Top hinge
+            const topHinge = new THREE.Mesh(hingeGeometry, hingeMaterial);
+            topHinge.rotation.x = Math.PI/2;
+            topHinge.position.set(isLeftDoor ? width/2 - 1 : -width/2 + 1, height/2 - 2, -thickness/2);
+            doorGroup.add(topHinge);
+            
+            // Bottom hinge
+            const bottomHinge = new THREE.Mesh(hingeGeometry, hingeMaterial);
+            bottomHinge.rotation.x = Math.PI/2;
+            bottomHinge.position.set(isLeftDoor ? width/2 - 1 : -width/2 + 1, -height/2 + 2, -thickness/2);
+            doorGroup.add(bottomHinge);
+            
+            parentGroup.add(doorGroup);
             return doorGroup;
         }
         
-        function createShelf(width, thickness, depth, position, material) {
+        function createShelf(width, thickness, depth, position, material, parentGroup) {
             const shelfGroup = new THREE.Group();
             shelfGroup.position.set(position[0], position[1], position[2]);
             
@@ -649,79 +691,94 @@
             shelfGroup.add(shelf);
             
             // Shelf supports
-            const supportGeometry = new THREE.BoxGeometry(0.5, 1, 0.5);
+            const supportGeometry = new THREE.BoxGeometry(0.5, 1.5, 0.5);
             const supportMaterial = new THREE.MeshStandardMaterial({ color: 0xCCCCCC });
             
             // Left support
             const leftSupport = new THREE.Mesh(supportGeometry, supportMaterial);
-            leftSupport.position.set(-width/2 + 0.25, -thickness/2 - 0.5, -depth/2 + 0.25);
+            leftSupport.position.set(-width/2 + 0.25, -thickness/2 - 0.75, 0);
             shelfGroup.add(leftSupport);
             
             // Right support
             const rightSupport = new THREE.Mesh(supportGeometry, supportMaterial);
-            rightSupport.position.set(width/2 - 0.25, -thickness/2 - 0.5, -depth/2 + 0.25);
+            rightSupport.position.set(width/2 - 0.25, -thickness/2 - 0.75, 0);
             shelfGroup.add(rightSupport);
             
             if (width > 24) {
                 // Middle support for wider shelves
                 const midSupport = new THREE.Mesh(supportGeometry, supportMaterial);
-                midSupport.position.set(0, -thickness/2 - 0.5, -depth/2 + 0.25);
+                midSupport.position.set(0, -thickness/2 - 0.75, 0);
                 shelfGroup.add(midSupport);
             }
             
-            cabinetGroup.add(shelfGroup);
+            parentGroup.add(shelfGroup);
             return shelfGroup;
         }
         
-        function createDrawer(width, height, depth, position, frontMaterial, sideMaterial) {
+        function createDrawer(width, height, depth, position, frontMaterial, sideMaterial, parentGroup) {
             const drawerGroup = new THREE.Group();
             drawerGroup.position.set(position[0], position[1], position[2]);
             
-            // Drawer box
-            const boxHeight = height * 0.9;
-            const boxYOffset = -height * 0.05;
+            // Drawer body
+            const bodyWidth = width * 0.9;
+            const bodyHeight = height * 0.85;
+            const bodyDepth = depth;
             
             // Front
-            const frontGeometry = new THREE.BoxGeometry(width * 0.9, height * 0.95, depth * 0.1);
+            const frontGeometry = new THREE.BoxGeometry(width, height, 0.5);
             const front = new THREE.Mesh(frontGeometry, frontMaterial);
-            front.position.set(0, boxYOffset, depth * 0.35);
+            front.position.set(0, 0, depth/2 + 0.25);
             drawerGroup.add(front);
             
             // Bottom
-            const bottomGeometry = new THREE.BoxGeometry(width * 0.85, 0.2, depth * 0.8);
+            const bottomGeometry = new THREE.BoxGeometry(width * 0.9, 0.2, depth);
             const bottom = new THREE.Mesh(bottomGeometry, sideMaterial);
-            bottom.position.set(0, boxYOffset - boxHeight/2 + 0.1, 0);
+            bottom.position.set(0, -height/2 + 0.1, 0);
             drawerGroup.add(bottom);
             
             // Sides
-            const sideWidth = width * 0.85;
-            const sideGeometry = new THREE.BoxGeometry(0.2, boxHeight, depth * 0.8);
+            const sideWidth = width * 0.9;
+            const sideGeometry = new THREE.BoxGeometry(0.2, bodyHeight, depth);
             
             // Left side
             const leftSide = new THREE.Mesh(sideGeometry, sideMaterial);
-            leftSide.position.set(-sideWidth/2, boxYOffset, 0);
+            leftSide.position.set(-sideWidth/2, 0, 0);
             drawerGroup.add(leftSide);
             
             // Right side
             const rightSide = new THREE.Mesh(sideGeometry, sideMaterial);
-            rightSide.position.set(sideWidth/2, boxYOffset, 0);
+            rightSide.position.set(sideWidth/2, 0, 0);
             drawerGroup.add(rightSide);
             
             // Back
-            const backGeometry = new THREE.BoxGeometry(sideWidth, boxHeight, 0.2);
+            const backGeometry = new THREE.BoxGeometry(sideWidth, bodyHeight, 0.2);
             const back = new THREE.Mesh(backGeometry, sideMaterial);
-            back.position.set(0, boxYOffset, depth * -0.3);
+            back.position.set(0, 0, -depth/2 + 0.1);
             drawerGroup.add(back);
             
-            // Handle (simplified as a bar)
-            const handleGeometry = new THREE.CylinderGeometry(0.1, 0.1, 4, 16);
+            // Handle (as a bar)
+            const handleGeometry = new THREE.CylinderGeometry(0.3, 0.3, 3, 16);
             const handleMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
             const handle = new THREE.Mesh(handleGeometry, handleMaterial);
             handle.rotation.z = Math.PI/2;
-            handle.position.set(0, boxYOffset, depth * 0.35 + 0.1);
+            handle.position.set(0, 0, depth/2 + 0.3);
             drawerGroup.add(handle);
             
-            cabinetGroup.add(drawerGroup);
+            // Drawer slides
+            const slideGeometry = new THREE.BoxGeometry(0.1, 0.5, depth * 1.2);
+            const slideMaterial = new THREE.MeshStandardMaterial({ color: 0x888888 });
+            
+            // Left slide
+            const leftSlide = new THREE.Mesh(slideGeometry, slideMaterial);
+            leftSlide.position.set(-width/2 + 0.25, -height/2 + 0.25, 0);
+            drawerGroup.add(leftSlide);
+            
+            // Right slide
+            const rightSlide = new THREE.Mesh(slideGeometry, slideMaterial);
+            rightSlide.position.set(width/2 - 0.25, -height/2 + 0.25, 0);
+            drawerGroup.add(rightSlide);
+            
+            parentGroup.add(drawerGroup);
             return drawerGroup;
         }
         
@@ -729,6 +786,7 @@
             loadingOverlay.style.opacity = 1;
             loadingOverlay.style.pointerEvents = 'auto';
             let progress = 0;
+            progressRing.style.strokeDashoffset = 314;
             const interval = setInterval(() => {
                 progress += 10;
                 const offset = 314 * (1 - progress/100);
@@ -736,7 +794,7 @@
                 if (progress >= 100) {
                     clearInterval(interval);
                 }
-            }, 30);
+            }, 50);
         }
         
         function hideLoading() {