Spaces:

gladiopeace
/

cabinet

Running

App Files Files Community

gladiopeace commited on Apr 9

Commit

8a04652

verified ·

1 Parent(s): 5b3145f

Add 1 files

Browse files

Files changed (1) hide show

index.html +390 -129

index.html CHANGED Viewed

@@ -38,10 +38,21 @@
             background-color: #f5f3f0;
             border-radius: 8px;
             overflow: hidden;
         }
         #priceSection {
             background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
         }
     </style>
 </head>
 <body class="bg-gray-50">
@@ -105,6 +116,24 @@
                         </div>
                     </div>
                     <!-- Material -->
                     <div class="mb-6 slider-container">
                         <div class="flex justify-between items-center mb-2">
@@ -153,6 +182,10 @@
                                 <input type="checkbox" id="lighting" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
                                 <span class="text-gray-700">LED Lighting</span>
                             </label>
                         </div>
                     </div>
                 </div>
@@ -167,14 +200,18 @@
                         <span class="text-gray-600">Material Upgrade</span>
                         <span id="materialPrice" class="font-medium">$50.00</span>
                     </div>
-                    <div class="flex justify-between items-center mb-4">
                         <span class="text-gray-600">Features</span>
                         <span id="featuresPrice" class="font-medium">$75.00</span>
                     </div>
                     <div class="border-t border-gray-300 pt-4">
                         <div class="flex justify-between items-center">
                             <span class="text-xl font-bold text-gray-800">Total</span>
-                            <span id="totalPrice" class="text-2xl font-bold text-indigo-600">$425.00</span>
                         </div>
                     </div>
                 </div>
@@ -197,7 +234,7 @@
                         </div>
                     </div>
                     <div id="modelViewer" class="w-full h-96 rounded-b-xl">
-                        <div id="loadingOverlay" class="absolute inset-0 bg-gray-100 bg-opacity-70 flex flex-col items-center justify-center">
                             <div class="w-16 h-16 relative mb-4">
                                 <svg class="w-full h-full" viewBox="0 0 100 100">
                                     <circle class="text-gray-400" cx="50" cy="50" r="40" stroke-width="8" stroke="currentColor" fill="none"></circle>
@@ -225,6 +262,14 @@
                                 <span class="text-gray-600">Material Thickness:</span>
                                 <span class="font-medium">0.75"</span>
                             </div>
                         </div>
                     </div>
@@ -272,9 +317,11 @@
         const softClose = document.getElementById('softClose');
         const pullOutShelves = document.getElementById('pullOutShelves');
         const lighting = document.getElementById('lighting');
         const basePrice = document.getElementById('basePrice');
         const materialPrice = document.getElementById('materialPrice');
         const featuresPrice = document.getElementById('featuresPrice');
         const totalPrice = document.getElementById('totalPrice');
         const dimensionsDisplay = document.getElementById('dimensionsDisplay');
         const capacityDisplay = document.getElementById('capacityDisplay');
@@ -283,6 +330,14 @@
         const downloadUSDZ = document.getElementById('downloadUSDZ');
         const downloadGLB = document.getElementById('downloadGLB');
         const progressRing = document.querySelector('.progress-ring');
         // Three.js variables
         let scene, camera, renderer, controls, cabinetGroup;
@@ -298,7 +353,7 @@
             camera.position.set(30, 30, 30);
             // Create renderer
-            renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(modelViewer.clientWidth, modelViewer.clientHeight);
             renderer.shadowMap.enabled = true;
             modelViewer.appendChild(renderer.domElement);
@@ -343,13 +398,12 @@
         function animate() {
             requestAnimationFrame(animate);
-            controls.update();
-            renderer.render(scene, camera);
         }
-        // Create cabinet geometry based on parameters
         function updateCabinetModel() {
-            // Simulate loading (in a real app, this would be replaced with actual model generation)
             showLoading();
             // Clear previous cabinet
@@ -364,151 +418,316 @@
             const type = cabinetType.value;
             const isTwoDoors = twoDoorsBtn.classList.contains('bg-indigo-100');
             const colorValue = color.value;
-            // Set material (simplified for demo)
-            let material;
             if (colorValue === 'natural') {
-                material = new THREE.MeshStandardMaterial({
                     color: 0xC19A6B,
-                    roughness: 0.4,
                     metalness: 0.1
-                });
             } else if (colorValue === 'white') {
-                material = new THREE.MeshStandardMaterial({
                     color: 0xF5F5F5,
                     roughness: 0.1,
                     metalness: 0.05
-                });
             } else if (colorValue === 'black') {
-                material = new THREE.MeshStandardMaterial({
                     color: 0x222222,
                     roughness: 0.3,
                     metalness: 0.2
-                });
             } else if (colorValue === 'gray') {
-                material = new THREE.MeshStandardMaterial({
                     color: 0x808080,
                     roughness: 0.3,
                     metalness: 0.15
-                });
             } else if (colorValue === 'navy') {
-                material = new THREE.MeshStandardMaterial({
                     color: 0x2C3E50,
                     roughness: 0.3,
                     metalness: 0.1
-                });
             } else { // green
-                material = new THREE.MeshStandardMaterial({
                     color: 0x3B5E2E,
                     roughness: 0.3,
                     metalness: 0.1
-                });
             }
-            // Create cabinet parts
-            const thickness = 0.75;
-            const doorThickness = 0.75;
-            // Bottom
-            const bottomGeometry = new THREE.BoxGeometry(width, thickness, depth);
-            const bottom = new THREE.Mesh(bottomGeometry, material);
-            bottom.position.y = thickness/2;
-            cabinetGroup.add(bottom);
-            // Top
-            const topGeometry = new THREE.BoxGeometry(width, thickness, depth);
-            const top = new THREE.Mesh(topGeometry, material);
-            top.position.y = height - thickness/2;
-            cabinetGroup.add(top);
-            // Sides
-            const leftSideGeometry = new THREE.BoxGeometry(thickness, height - 2*thickness, depth);
-            const leftSide = new THREE.Mesh(leftSideGeometry, material);
-            leftSide.position.set(-width/2 + thickness/2, height/2, 0);
-            cabinetGroup.add(leftSide);
-            const rightSideGeometry = new THREE.BoxGeometry(thickness, height - 2*thickness, depth);
-            const rightSide = new THREE.Mesh(rightSideGeometry, material);
-            rightSide.position.set(width/2 - thickness/2, height/2, 0);
-            cabinetGroup.add(rightSide);
-            // Back
-            const backGeometry = new THREE.BoxGeometry(width - 2*thickness, height - 2*thickness, thickness);
-            const back = new THREE.Mesh(backGeometry, material);
-            back.position.set(0, height/2, -depth/2 + thickness/2);
-            cabinetGroup.add(back);
-            // Create dividers if two doors
-            if (isTwoDoors) {
-                const dividerGeometry = new THREE.BoxGeometry(thickness, height - 2*thickness, depth);
-                const divider = new THREE.Mesh(dividerGeometry, material);
-                divider.position.set(0, height/2, 0);
-                cabinetGroup.add(divider);
-            }
-            // Doors (simplified representation)
-            const doorHeight = height - thickness;
-            let doorWidth;
-            if (isTwoDoors) {
-                doorWidth = (width - thickness) / 2;
-                // Left door
-                const leftDoorGeometry = new THREE.BoxGeometry(doorWidth, doorHeight, doorThickness);
-                const leftDoor = new THREE.Mesh(leftDoorGeometry, material);
-                leftDoor.position.set(-(width - doorWidth)/2 + doorThickness/2, height/2, depth/2 - doorThickness/2);
-                cabinetGroup.add(leftDoor);
-                // Right door
-                const rightDoorGeometry = new THREE.BoxGeometry(doorWidth, doorHeight, doorThickness);
-                const rightDoor = new THREE.Mesh(rightDoorGeometry, material);
-                rightDoor.position.set((width - doorWidth)/2 - doorThickness/2, height/2, depth/2 - doorThickness/2);
-                cabinetGroup.add(rightDoor);
-            } else {
-                doorWidth = width;
-                // Single door
-                const doorGeometry = new THREE.BoxGeometry(doorWidth, doorHeight, doorThickness);
-                const door = new THREE.Mesh(doorGeometry, material);
-                door.position.set(0, height/2, depth/2 - doorThickness/2);
-                cabinetGroup.add(door);
-            }
-            // Add drawer if base cabinet
-            if (type === 'base') {
-                const drawerHeight = height * 0.3;
-                const drawerGeometry = new THREE.BoxGeometry(width * 0.9, drawerHeight, depth * 0.5);
-                const drawer = new THREE.Mesh(drawerGeometry, material);
-                drawer.position.set(0, drawerHeight/2 + thickness, depth/4 - depth/8);
-                cabinetGroup.add(drawer);
-                // Drawer handle
-                const handleGeometry = new THREE.CylinderGeometry(0.2, 0.2, 2, 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, drawerHeight + thickness - 1, depth * 0.25 + 0.4);
-                cabinetGroup.add(handle);
-            }
-            // Adjust camera target based on cabinet size
-            controls.target.set(0, height/2, 0);
-            controls.update();
-            // Hide loading after a delay (in a real app, this would be when the model is ready)
-            setTimeout(hideLoading, 800);
-            // Update capacity calculation
-            const interiorWidth = width - 2*thickness;
-            const interiorHeight = height - 2*thickness;
-            const interiorDepth = depth - thickness;
-            const capacity = (interiorWidth * interiorHeight * interiorDepth) / 1728; // convert to cubic feet
-            capacityDisplay.textContent = `${capacity.toFixed(1)} cu.ft`;
-            dimensionsDisplay.textContent = `${width}" W × ${height}" H × ${depth}" D`;
         }
         function showLoading() {
-            loadingOverlay.style.display = 'flex';
             let progress = 0;
             const interval = setInterval(() => {
                 progress += 10;
@@ -517,11 +736,12 @@
                 if (progress >= 100) {
                     clearInterval(interval);
                 }
-            }, 50);
         }
         function hideLoading() {
-            loadingOverlay.style.display = 'none';
         }
         // Update price calculation
@@ -534,35 +754,45 @@
             const hasSoftClose = softClose.checked;
             const hasPullOutShelves = pullOutShelves.checked;
             const hasLighting = lighting.checked;
             // Calculate base price based on size and type
             let base = 100;
             const sizeFactor = (width * height * depth) / 10000;
             base += sizeFactor * 100;
-            if (cabinetType.value === 'base') base *= 1.2;
-            else if (cabinetType.value === 'tall') base *= 1.3;
-            else if (cabinetType.value === 'island') base *= 1.5;
             // Material premium
             let matPremium = 0;
-            if (mat === 'cherry' || mat === 'walnut') matPremium = 100;
-            else if (mat === 'maple') matPremium = 60;
-            else if (mat === 'oak') matPremium = 30;
-            else if (mat === 'painted') matPremium = 40;
             // Features
             let featuresPremium = 0;
-            if (hasSoftClose) featuresPremium += 30;
-            if (hasPullOutShelves) featuresPremium += 60;
-            if (hasLighting) featuresPremium += 45;
-            if (isTwoDoors) featuresPremium += 25;
             // Update displays
             basePrice.textContent = `$${base.toFixed(2)}`;
             materialPrice.textContent = `$${matPremium.toFixed(2)}`;
             featuresPrice.textContent = `$${featuresPremium.toFixed(2)}`;
-            totalPrice.textContent = `$${(base + matPremium + featuresPremium).toFixed(2)}`;
         }
         // Event listeners
@@ -598,9 +828,35 @@
             updatePrice();
         });
         cabinetType.addEventListener('change', () => {
             cabinetTypeDisplay.textContent = cabinetType.options[cabinetType.selectedIndex].text;
             // Adjust default dimensions based on cabinet type
             if (cabinetType.value === 'wall') {
                 heightSlider.value = 36;
@@ -636,12 +892,17 @@
         color.addEventListener('change', () => {
             colorDisplay.textContent = color.options[color.selectedIndex].text;
             updateCabinetModel();
         });
         softClose.addEventListener('change', updatePrice);
         pullOutShelves.addEventListener('change', updatePrice);
         lighting.addEventListener('change', updatePrice);
         // Simulate download buttons (in a real app, these would generate actual files)
         downloadUSDZ.addEventListener('click', () => {
@@ -649,7 +910,7 @@
         });
         downloadGLB.addEventListener('click', () => {
-            alert('In a real implementation, this would generate and download a GLB file of your cabinet design.');
         });
         // Initialize

             background-color: #f5f3f0;
             border-radius: 8px;
             overflow: hidden;
+            position: relative;
         }
         #priceSection {
             background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
         }
+        .door-handle {
+            position: relative;
+            z-index: 5;
+        }
+        .shelf {
+            box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
+        }
+        #loadingOverlay {
+            transition: opacity 0.3s ease;
+        }
     </style>
 </head>
 <body class="bg-gray-50">
                         </div>
                     </div>
+                    <!-- Shelves -->
+                    <div class="mb-6 slider-container">
+                        <div class="flex justify-between items-center mb-2">
+                            <label class="text-gray-700 font-medium">Number of Shelves</label>
+                            <span id="shelvesValue" class="text-gray-500">1</span>
+                        </div>
+                        <input id="shelvesSlider" type="range" min="0" max="5" value="1" step="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                    </div>
+                    <!-- Drawers (only for base cabinets) -->
+                    <div class="mb-6 slider-container" id="drawersContainer" style="display: none;">
+                        <div class="flex justify-between items-center mb-2">
+                            <label class="text-gray-700 font-medium">Number of Drawers</label>
+                            <span id="drawersValue" class="text-gray-500">0</span>
+                        </div>
+                        <input id="drawersSlider" type="range" min="0" max="3" value="0" step="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                    </div>
                     <!-- Material -->
                     <div class="mb-6 slider-container">
                         <div class="flex justify-between items-center mb-2">
                                 <input type="checkbox" id="lighting" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
                                 <span class="text-gray-700">LED Lighting</span>
                             </label>
+                            <label class="flex items-center space-x-3">
+                                <input type="checkbox" id="glassDoors" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
+                                <span class="text-gray-700">Glass Doors</span>
+                            </label>
                         </div>
                     </div>
                 </div>
                         <span class="text-gray-600">Material Upgrade</span>
                         <span id="materialPrice" class="font-medium">$50.00</span>
                     </div>
+                    <div class="flex justify-between items-center mb-2">
                         <span class="text-gray-600">Features</span>
                         <span id="featuresPrice" class="font-medium">$75.00</span>
                     </div>
+                    <div class="flex justify-between items-center mb-4">
+                        <span class="text-gray-600">Options</span>
+                        <span id="optionsPrice" class="font-medium">$25.00</span>
+                    </div>
                     <div class="border-t border-gray-300 pt-4">
                         <div class="flex justify-between items-center">
                             <span class="text-xl font-bold text-gray-800">Total</span>
+                            <span id="totalPrice" class="text-2xl font-bold text-indigo-600">$450.00</span>
                         </div>
                     </div>
                 </div>
                         </div>
                     </div>
                     <div id="modelViewer" class="w-full h-96 rounded-b-xl">
+                        <div id="loadingOverlay" class="absolute inset-0 bg-gray-100 bg-opacity-70 flex flex-col items-center justify-center opacity-0 pointer-events-none">
                             <div class="w-16 h-16 relative mb-4">
                                 <svg class="w-full h-full" viewBox="0 0 100 100">
                                     <circle class="text-gray-400" cx="50" cy="50" r="40" stroke-width="8" stroke="currentColor" fill="none"></circle>
                                 <span class="text-gray-600">Material Thickness:</span>
                                 <span class="font-medium">0.75"</span>
                             </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">Shelves:</span>
+                                <span id="shelvesDisplay" class="font-medium">1</span>
+                            </div>
+                            <div class="flex justify-between" id="drawersDisplayContainer" style="display: none;">
+                                <span class="text-gray-600">Drawers:</span>
+                                <span id="drawersDisplay" class="font-medium">0</span>
+                            </div>
                         </div>
                     </div>
         const softClose = document.getElementById('softClose');
         const pullOutShelves = document.getElementById('pullOutShelves');
         const lighting = document.getElementById('lighting');
+        const glassDoors = document.getElementById('glassDoors');
         const basePrice = document.getElementById('basePrice');
         const materialPrice = document.getElementById('materialPrice');
         const featuresPrice = document.getElementById('featuresPrice');
+        const optionsPrice = document.getElementById('optionsPrice');
         const totalPrice = document.getElementById('totalPrice');
         const dimensionsDisplay = document.getElementById('dimensionsDisplay');
         const capacityDisplay = document.getElementById('capacityDisplay');
         const downloadUSDZ = document.getElementById('downloadUSDZ');
         const downloadGLB = document.getElementById('downloadGLB');
         const progressRing = document.querySelector('.progress-ring');
+        const shelvesSlider = document.getElementById('shelvesSlider');
+        const shelvesValue = document.getElementById('shelvesValue');
+        const shelvesDisplay = document.getElementById('shelvesDisplay');
+        const drawersSlider = document.getElementById('drawersSlider');
+        const drawersValue = document.getElementById('drawersValue');
+        const drawersContainer = document.getElementById('drawersContainer');
+        const drawersDisplay = document.getElementById('drawersDisplay');
+        const drawersDisplayContainer = document.getElementById('drawersDisplayContainer');
         // Three.js variables
         let scene, camera, renderer, controls, cabinetGroup;
             camera.position.set(30, 30, 30);
             // Create renderer
+            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
             renderer.setSize(modelViewer.clientWidth, modelViewer.clientHeight);
             renderer.shadowMap.enabled = true;
             modelViewer.appendChild(renderer.domElement);
         function animate() {
             requestAnimationFrame(animate);
+            if (controls) controls.update();
+            if (renderer) renderer.render(scene, camera);
         }
+        // Create cabinet geometry with detailed components
         function updateCabinetModel() {
             showLoading();
             // Clear previous cabinet
             const type = cabinetType.value;
             const isTwoDoors = twoDoorsBtn.classList.contains('bg-indigo-100');
             const colorValue = color.value;
+            const shelvesCount = parseInt(shelvesSlider.value);
+            const drawersCount = cabinetType.value === 'base' ? parseInt(drawersSlider.value) : 0;
+            const hasGlassDoors = glassDoors.checked;
+            // Set main material
+            let mainMaterial = createMaterial(colorValue, false);
+            let interiorMaterial = new THREE.MeshStandardMaterial({
+                color: 0xF5F5F5,
+                roughness: 0.7,
+                metalness: 0.0
+            });
+            let shelfMaterial = new THREE.MeshStandardMaterial({
+                color: 0xEAEAEA,
+                roughness: 0.6,
+                metalness: 0.0
+            });
+            // Cabinet dimensions
+            const thickness = 0.75;
+            const doorThickness = 1.0;
+            const handleSize = 0.2;
+            const shelfThickness = 0.5;
+            // Bottom panel
+            createPanel(width, thickness, depth,
+                       [0, thickness/2, 0],
+                       mainMaterial);
+            // Top panel
+            createPanel(width, thickness, depth,
+                       [0, height - thickness/2, 0],
+                       mainMaterial);
+            // Left side
+            createPanel(thickness, height - 2*thickness, depth,
+                       [-width/2 + thickness/2, height/2, 0],
+                       mainMaterial);
+            // Right side
+            createPanel(thickness, height - 2*thickness, depth,
+                       [width/2 - thickness/2, height/2, 0],
+                       mainMaterial);
+            // Back panel
+            createPanel(width - 2*thickness, height - 2*thickness, thickness,
+                       [0, height/2, -depth/2 + thickness/2],
+                       mainMaterial);
+            // Middle divider if two doors
+            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);
+            }
+            // Create doors
+            const doorHeight = height - thickness - (drawersCount > 0 ? (height * 0.33) : 0);
+            const doorYPosition = height/2 - (drawersCount > 0 ? (height * 0.33)/2 : 0);
+            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);
+                // Right door
+                createDoor(doorWidth, doorHeight, doorThickness,
+                          [(width - doorWidth)/2 - doorThickness/2, doorYPosition, depth/2 - doorThickness/2],
+                          mainMaterial, hasGlassDoors, false);
+            } else {
+                // Single door
+                const doorWidth = width;
+                createDoor(doorWidth, doorHeight, doorThickness,
+                          [0, doorYPosition, depth/2 - doorThickness/2],
+                          mainMaterial, hasGlassDoors, false);
+            }
+            // Add shelves
+            const availableHeight = height - 2*thickness - (drawersCount > 0 ? (height * 0.33) : 0);
+            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);
+                createShelf(width - 2*thickness - 0.5, shelfThickness, depth - thickness - 0.5,
+                            [0, shelfY, -0.25],
+                            shelfMaterial);
+            }
+            // Add drawers for base cabinets
+            if (type === 'base' && drawersCount > 0) {
+                const drawerHeight = (height * 0.33) / drawersCount;
+                const drawerFrontMaterial = createMaterial(colorValue, true); // Slightly different for drawer fronts
+                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);
+                }
+            }
+            // Adjust camera target based on cabinet size
+            controls.target.set(0, height/2, 0);
+            controls.update();
+            // 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
+            // Hide loading after a delay
+            setTimeout(hideLoading, 800);
+            // Update displays
+            capacityDisplay.textContent = `${capacity.toFixed(1)} cu.ft`;
+            dimensionsDisplay.textContent = `${width}" W × ${height}" H × ${depth}" D`;
+            shelvesDisplay.textContent = shelvesCount;
+        }
+        function createMaterial(colorValue, isDrawerFront = false) {
+            let materialOptions = {};
             if (colorValue === 'natural') {
+                materialOptions = {
                     color: 0xC19A6B,
+                    roughness: isDrawerFront ? 0.3 : 0.4,
                     metalness: 0.1
+                };
             } else if (colorValue === 'white') {
+                materialOptions = {
                     color: 0xF5F5F5,
                     roughness: 0.1,
                     metalness: 0.05
+                };
             } else if (colorValue === 'black') {
+                materialOptions = {
                     color: 0x222222,
                     roughness: 0.3,
                     metalness: 0.2
+                };
             } else if (colorValue === 'gray') {
+                materialOptions = {
                     color: 0x808080,
                     roughness: 0.3,
                     metalness: 0.15
+                };
             } else if (colorValue === 'navy') {
+                materialOptions = {
                     color: 0x2C3E50,
                     roughness: 0.3,
                     metalness: 0.1
+                };
             } else { // green
+                materialOptions = {
                     color: 0x3B5E2E,
                     roughness: 0.3,
                     metalness: 0.1
+                };
             }
+            return new THREE.MeshStandardMaterial(materialOptions);
+        }
+        function createPanel(width, height, depth, position, material) {
+            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);
+            return panel;
+        }
+        function createDoor(width, height, thickness, position, material, hasGlass, isLeftDoor) {
+            const doorGroup = new THREE.Group();
+            doorGroup.position.set(position[0], position[1], position[2]);
+            // Door frame
+            const frameGeometry = new THREE.BoxGeometry(width, height, thickness);
+            const frame = new THREE.Mesh(frameGeometry, material);
+            frame.castShadow = true;
+            frame.receiveShadow = true;
+            doorGroup.add(frame);
+            // 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 glassMaterial = new THREE.MeshPhysicalMaterial({
+                    color: 0x88ccff,
+                    transmission: 0.8,
+                    roughness: 0.1,
+                    metalness: 0.0,
+                    transparent: true,
+                    opacity: 0.7,
+                    ior: 1.5,
+                    thickness: 0.1
+                });
+                const glass = new THREE.Mesh(glassGeometry, glassMaterial);
+                glass.position.z = thickness * 0.45;
+                doorGroup.add(glass);
+            }
+            // Handle
+            const handleGeometry = new THREE.CylinderGeometry(0.15, 0.15, 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);
+            return doorGroup;
+        }
+        function createShelf(width, thickness, depth, position, material) {
+            const shelfGroup = new THREE.Group();
+            shelfGroup.position.set(position[0], position[1], position[2]);
+            // Main shelf
+            const shelfGeometry = new THREE.BoxGeometry(width, thickness, depth);
+            const shelf = new THREE.Mesh(shelfGeometry, material);
+            shelf.castShadow = true;
+            shelf.receiveShadow = true;
+            shelfGroup.add(shelf);
+            // Shelf supports
+            const supportGeometry = new THREE.BoxGeometry(0.5, 1, 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);
+            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);
+            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);
+                shelfGroup.add(midSupport);
+            }
+            cabinetGroup.add(shelfGroup);
+            return shelfGroup;
+        }
+        function createDrawer(width, height, depth, position, frontMaterial, sideMaterial) {
+            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;
+            // Front
+            const frontGeometry = new THREE.BoxGeometry(width * 0.9, height * 0.95, depth * 0.1);
+            const front = new THREE.Mesh(frontGeometry, frontMaterial);
+            front.position.set(0, boxYOffset, depth * 0.35);
+            drawerGroup.add(front);
+            // Bottom
+            const bottomGeometry = new THREE.BoxGeometry(width * 0.85, 0.2, depth * 0.8);
+            const bottom = new THREE.Mesh(bottomGeometry, sideMaterial);
+            bottom.position.set(0, boxYOffset - boxHeight/2 + 0.1, 0);
+            drawerGroup.add(bottom);
+            // Sides
+            const sideWidth = width * 0.85;
+            const sideGeometry = new THREE.BoxGeometry(0.2, boxHeight, depth * 0.8);
+            // Left side
+            const leftSide = new THREE.Mesh(sideGeometry, sideMaterial);
+            leftSide.position.set(-sideWidth/2, boxYOffset, 0);
+            drawerGroup.add(leftSide);
+            // Right side
+            const rightSide = new THREE.Mesh(sideGeometry, sideMaterial);
+            rightSide.position.set(sideWidth/2, boxYOffset, 0);
+            drawerGroup.add(rightSide);
+            // Back
+            const backGeometry = new THREE.BoxGeometry(sideWidth, boxHeight, 0.2);
+            const back = new THREE.Mesh(backGeometry, sideMaterial);
+            back.position.set(0, boxYOffset, depth * -0.3);
+            drawerGroup.add(back);
+            // Handle (simplified as a bar)
+            const handleGeometry = new THREE.CylinderGeometry(0.1, 0.1, 4, 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);
+            drawerGroup.add(handle);
+            cabinetGroup.add(drawerGroup);
+            return drawerGroup;
         }
         function showLoading() {
+            loadingOverlay.style.opacity = 1;
+            loadingOverlay.style.pointerEvents = 'auto';
             let progress = 0;
             const interval = setInterval(() => {
                 progress += 10;
                 if (progress >= 100) {
                     clearInterval(interval);
                 }
+            }, 30);
         }
         function hideLoading() {
+            loadingOverlay.style.opacity = 0;
+            loadingOverlay.style.pointerEvents = 'none';
         }
         // Update price calculation
             const hasSoftClose = softClose.checked;
             const hasPullOutShelves = pullOutShelves.checked;
             const hasLighting = lighting.checked;
+            const hasGlassDoors = glassDoors.checked;
+            const shelvesCount = parseInt(shelvesSlider.value);
+            const drawersCount = cabinetType.value === 'base' ? parseInt(drawersSlider.value) : 0;
             // Calculate base price based on size and type
             let base = 100;
             const sizeFactor = (width * height * depth) / 10000;
             base += sizeFactor * 100;
+            if (cabinetType.value === 'base') base *= 1.3;
+            else if (cabinetType.value === 'tall') base *= 1.4;
+            else if (cabinetType.value === 'island') base *= 1.6;
             // Material premium
             let matPremium = 0;
+            if (mat === 'cherry' || mat === 'walnut') matPremium = 120;
+            else if (mat === 'maple') matPremium = 80;
+            else if (mat === 'oak') matPremium = 40;
+            else if (mat === 'painted') matPremium = 60;
+            else if (mat === 'laminate') matPremium = 0;
             // Features
             let featuresPremium = 0;
+            if (hasSoftClose) featuresPremium += 40;
+            if (hasPullOutShelves) featuresPremium += 80;
+            if (hasLighting) featuresPremium += 60;
+            if (hasGlassDoors) featuresPremium += 90;
+            // Options (shelves, drawers)
+            let optionsPremium = shelvesCount * 20;
+            optionsPremium += drawersCount * 45;
+            if (isTwoDoors) optionsPremium += 35;
             // Update displays
             basePrice.textContent = `$${base.toFixed(2)}`;
             materialPrice.textContent = `$${matPremium.toFixed(2)}`;
             featuresPrice.textContent = `$${featuresPremium.toFixed(2)}`;
+            optionsPrice.textContent = `$${optionsPremium.toFixed(2)}`;
+            totalPrice.textContent = `$${(base + matPremium + featuresPremium + optionsPremium).toFixed(2)}`;
         }
         // Event listeners
             updatePrice();
         });
+        shelvesSlider.addEventListener('input', () => {
+            shelvesValue.textContent = shelvesSlider.value;
+            shelvesDisplay.textContent = shelvesSlider.value;
+            updateCabinetModel();
+            updatePrice();
+        });
+        drawersSlider.addEventListener('input', () => {
+            drawersValue.textContent = drawersSlider.value;
+            drawersDisplay.textContent = drawersSlider.value;
+            updateCabinetModel();
+            updatePrice();
+        });
         cabinetType.addEventListener('change', () => {
             cabinetTypeDisplay.textContent = cabinetType.options[cabinetType.selectedIndex].text;
+            // Show/hide drawers control based on cabinet type
+            if (cabinetType.value === 'base') {
+                drawersContainer.style.display = 'block';
+                drawersDisplayContainer.style.display = 'flex';
+            } else {
+                drawersContainer.style.display = 'none';
+                drawersDisplayContainer.style.display = 'none';
+                drawersSlider.value = 0;
+                drawersValue.textContent = '0';
+                drawersDisplay.textContent = '0';
+            }
             // Adjust default dimensions based on cabinet type
             if (cabinetType.value === 'wall') {
                 heightSlider.value = 36;
         color.addEventListener('change', () => {
             colorDisplay.textContent = color.options[color.selectedIndex].text;
+            updatePrice();
             updateCabinetModel();
         });
         softClose.addEventListener('change', updatePrice);
         pullOutShelves.addEventListener('change', updatePrice);
         lighting.addEventListener('change', updatePrice);
+        glassDoors.addEventListener('change', () => {
+            updatePrice();
+            updateCabinetModel();
+        });
         // Simulate download buttons (in a real app, these would generate actual files)
         downloadUSDZ.addEventListener('click', () => {
         });
         downloadGLB.addEventListener('click', () => {
+            alert('In a real implementation, this would generate and download a GLB/GLTF file of your cabinet design.');
         });
         // Initialize