d

src/index.html

@@ -21,6 +21,8 @@
             <p>👆 Single finger drag: Rotate around model</p>
             <p>🤏 Pinch to zoom: Zoom in/out</p>
             <p>✌️ Two finger drag: Pan around scene</p>
+            <hr style="margin: 10px 0; border: 1px solid #555;">
+            <button id="print-btn" style="background: #4CAF50; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;">🖨️ Print</button>
         </div>
     </div>
 </body>

src/index.js

@@ -117,6 +117,9 @@ async function init() {
     // Handle print events
     setupPrintHandlers();
     
+    // Setup manual print button
+    setupPrintButton();
+    
     // Start render loop
     animate();
 }
@@ -141,23 +144,153 @@ function setupCustomTouchControls() {
 
 function setupPrintHandlers() {
     const originalBackgroundColor = scene.background;
+    const originalRendererClearColor = renderer.getClearColor(new THREE.Color());
+    const originalRendererClearAlpha = renderer.getClearAlpha();
     
-    // Before print - change background to white
+    let isTestMode = false;
+    let testTimeout = null;
+    
+    // Before print - change background to white and make renderer opaque
     const beforePrint = () => {
-        scene.background = new THREE.Color(0xffffff); // White background for printing
+        if (isTestMode) {
-        console.log('Print mode activated - background set to white');
+            console.log('🚫 Print event ignored - test mode is active');
+            return;
+        }
+        
+        console.log('🖨️ PRINT MODE ACTIVATED - Changing background to white');
+        
+        // Force scene background to white
+        scene.background = new THREE.Color(0xffffff);
+        
+        // Set renderer clear color to white
+        renderer.setClearColor(0xffffff, 1.0);
+        
+        // Force canvas background to white with multiple methods
+        const canvas = renderer.domElement;
+        canvas.style.setProperty('background', 'white', 'important');
+        canvas.style.setProperty('background-color', 'white', 'important');
+        canvas.style.setProperty('background-image', 'none', 'important');
+        
+        // Also set body and html backgrounds
+        document.body.style.setProperty('background', 'white', 'important');
+        document.body.style.setProperty('background-color', 'white', 'important');
+        document.documentElement.style.setProperty('background', 'white', 'important');
+        document.documentElement.style.setProperty('background-color', 'white', 'important');
+        
+        // Force a render to apply changes immediately
+        renderer.render(scene, camera);
+        
+        console.log('✅ Print background forcibly set to white');
     };
     
     // After print - restore original background
     const afterPrint = () => {
-        scene.background = originalBackgroundColor; // Restore original background
+        if (isTestMode) {
-        console.log('Print mode deactivated - background restored');
+            console.log('🚫 Print restore ignored - test mode is active');
+            return;
+        }
+        
+        console.log('🖨️ PRINT MODE DEACTIVATED - Restoring original background');
+        
+        // Restore original settings
+        scene.background = originalBackgroundColor;
+        renderer.setClearColor(originalRendererClearColor, originalRendererClearAlpha);
+        
+        // Remove forced styles
+        const canvas = renderer.domElement;
+        canvas.style.removeProperty('background');
+        canvas.style.removeProperty('background-color');
+        canvas.style.removeProperty('background-image');
+        
+        document.body.style.removeProperty('background');
+        document.body.style.removeProperty('background-color');
+        document.documentElement.style.removeProperty('background');
+        document.documentElement.style.removeProperty('background-color');
+        
+        console.log('✅ Original background restored');
+    };
+    
+    // Apply white background (used by both test and print modes)
+    const applyWhiteBackground = () => {
+        // Force scene background to white
+        scene.background = new THREE.Color(0xffffff);
+        
+        // Set renderer clear color to white
+        renderer.setClearColor(0xffffff, 1.0);
+        
+        // Force canvas background to white with multiple methods
+        const canvas = renderer.domElement;
+        canvas.style.setProperty('background', 'white', 'important');
+        canvas.style.setProperty('background-color', 'white', 'important');
+        canvas.style.setProperty('background-image', 'none', 'important');
+        
+        // Also set body and html backgrounds
+        document.body.style.setProperty('background', 'white', 'important');
+        document.body.style.setProperty('background-color', 'white', 'important');
+        document.documentElement.style.setProperty('background', 'white', 'important');
+        document.documentElement.style.setProperty('background-color', 'white', 'important');
+        
+        // Force a render to apply changes immediately
+        renderer.render(scene, camera);
+    };
+    
+    // Restore original background (used by both test and print modes)
+    const restoreBackground = () => {
+        // Restore original settings
+        scene.background = originalBackgroundColor;
+        renderer.setClearColor(originalRendererClearColor, originalRendererClearAlpha);
+        
+        // Remove forced styles
+        const canvas = renderer.domElement;
+        canvas.style.removeProperty('background');
+        canvas.style.removeProperty('background-color');
+        canvas.style.removeProperty('background-image');
+        
+        document.body.style.removeProperty('background');
+        document.body.style.removeProperty('background-color');
+        document.documentElement.style.removeProperty('background');
+        document.documentElement.style.removeProperty('background-color');
+    };
+    
+    // Test the print handler immediately (for debugging)
+    window.testPrintMode = () => {
+        console.log('🧪 Testing print mode (print events disabled during test)...');
+        isTestMode = true;
+        
+        if (testTimeout) {
+            clearTimeout(testTimeout);
+        }
+        
+        applyWhiteBackground();
+        console.log('✅ Test mode background set to white');
+        
+        testTimeout = setTimeout(() => {
+            console.log('🧪 Test complete, restoring...');
+            restoreBackground();
+            isTestMode = false;
+            testTimeout = null;
+            console.log('✅ Test mode complete, print events re-enabled');
+        }, 6000);
+    };
+    
+    // Cancel test mode early
+    window.cancelTestMode = () => {
+        if (testTimeout) {
+            clearTimeout(testTimeout);
+            testTimeout = null;
+        }
+        if (isTestMode) {
+            restoreBackground();
+            isTestMode = false;
+            console.log('🧪 Test mode cancelled, print events re-enabled');
+        }
     };
     
     // Listen for print events
     if (window.matchMedia) {
         const mediaQueryList = window.matchMedia('print');
         mediaQueryList.addEventListener('change', (mql) => {
+            console.log('📱 Media query change detected:', mql.matches ? 'PRINT' : 'SCREEN');
             if (mql.matches) {
                 beforePrint();
             } else {
@@ -167,10 +300,80 @@ function setupPrintHandlers() {
     }
     
     // Fallback for older browsers
-    window.addEventListener('beforeprint', beforePrint);
+    window.addEventListener('beforeprint', () => {
-    window.addEventListener('afterprint', afterPrint);
+        console.log('🖨️ beforeprint event fired');
+        beforePrint();
+    });
+    window.addEventListener('afterprint', () => {
+        console.log('🖨️ afterprint event fired');
+        afterPrint();
+    });
     
-    console.log('Print event handlers set up');
+    console.log('🔧 Print event handlers set up.');
+    console.log('   Use window.testPrintMode() to test for 6 seconds');
+    console.log('   Use window.cancelTestMode() to end test early');
+}
+
+function setupPrintButton() {
+    const printBtn = document.getElementById('print-btn');
+    if (!printBtn) {
+        console.warn('Print button not found');
+        return;
+    }
+    
+    const originalBackgroundColor = scene.background;
+    const originalRendererClearColor = renderer.getClearColor(new THREE.Color());
+    const originalRendererClearAlpha = renderer.getClearAlpha();
+    
+    printBtn.addEventListener('click', () => {
+        console.log('🖨️ Manual print button clicked - forcing white background');
+        
+        // Force white background immediately
+        scene.background = new THREE.Color(0xffffff);
+        renderer.setClearColor(0xffffff, 1.0);
+        
+        // Force canvas and page backgrounds to white
+        const canvas = renderer.domElement;
+        canvas.style.setProperty('background', 'white', 'important');
+        canvas.style.setProperty('background-color', 'white', 'important');
+        canvas.style.setProperty('background-image', 'none', 'important');
+        
+        document.body.style.setProperty('background', 'white', 'important');
+        document.body.style.setProperty('background-color', 'white', 'important');
+        document.documentElement.style.setProperty('background', 'white', 'important');
+        document.documentElement.style.setProperty('background-color', 'white', 'important');
+        
+        // Force a render to apply changes
+        renderer.render(scene, camera);
+        
+        console.log('✅ Background forced to white, opening print dialog...');
+        
+        // Small delay to ensure changes are applied, then open print dialog
+        setTimeout(() => {
+            window.print();
+            
+            // Restore background after a delay to account for print dialog
+            setTimeout(() => {
+                console.log('🔄 Restoring original background...');
+                
+                scene.background = originalBackgroundColor;
+                renderer.setClearColor(originalRendererClearColor, originalRendererClearAlpha);
+                
+                canvas.style.removeProperty('background');
+                canvas.style.removeProperty('background-color');
+                canvas.style.removeProperty('background-image');
+                
+                document.body.style.removeProperty('background');
+                document.body.style.removeProperty('background-color');
+                document.documentElement.style.removeProperty('background');
+                document.documentElement.style.removeProperty('background-color');
+                
+                console.log('✅ Original background restored');
+            }, 1000); // Wait 1 second after print dialog opens
+        }, 100); // Small delay to apply changes
+    });
+    
+    console.log('🖨️ Manual print button set up');
 }
 
 function setupLighting() {

src/styles.css

@@ -51,6 +51,12 @@ body {
         margin: 3px 0 !important;
         border: 0.5px solid #555;
     }
+    
+    #print-btn {
+        font-size: 9px !important;
+        padding: 4px 6px !important;
+        border-radius: 3px !important;
+    }
 }
 
 /* Very small screens (phones in portrait) */
@@ -95,13 +101,28 @@ body {
 
 /* Print styles - make background transparent and model visible */
 @media print {
+    * {
+        background: white !important;
+        background-image: none !important;
+        background-color: white !important;
+    }
+    
     body {
         background: white !important;
         background-image: none !important;
+        background-color: white !important;
+    }
+    
+    html {
+        background: white !important;
+        background-image: none !important;
+        background-color: white !important;
     }
     
     #container {
         background: white !important;
+        background-image: none !important;
+        background-color: white !important;
     }
     
     /* Hide info box when printing to focus on the model */
@@ -109,6 +130,11 @@ body {
         display: none !important;
     }
     
+    /* Hide print button in print output */
+    #print-btn {
+        display: none !important;
+    }
+    
     /* Hide loading indicator when printing */
     #loading {
         display: none !important;
@@ -117,6 +143,8 @@ body {
     /* Ensure the canvas is visible and takes full page */
     canvas {
         background: white !important;
+        background-image: none !important;
+        background-color: white !important;
         width: 100% !important;
         height: 100% !important;
         max-width: none !important;
@@ -125,9 +153,16 @@ body {
         padding: 0 !important;
     }
     
+    /* Remove any WebGL background */
+    canvas[data-engine*="three"], canvas[data-engine*="webgl"] {
+        background: white !important;
+        background-color: white !important;
+    }
+    
     /* Ensure proper print sizing */
     @page {
         margin: 0.5in;
         size: auto;
+        background: white;
     }
 }