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

@@ -114,6 +114,12 @@ async function init() {
     // Handle window resize
     window.addEventListener('resize', onWindowResize, false);
     
+    // Handle print events
+    setupPrintHandlers();
+    
+    // Setup manual print button
+    setupPrintButton();
+    
     // Start render loop
     animate();
 }
@@ -136,6 +142,240 @@ function setupCustomTouchControls() {
     console.log('Touch controls enabled - OrbitControls handles all touch gestures natively');
 }
 
+function setupPrintHandlers() {
+    const originalBackgroundColor = scene.background;
+    const originalRendererClearColor = renderer.getClearColor(new THREE.Color());
+    const originalRendererClearAlpha = renderer.getClearAlpha();
+    
+    let isTestMode = false;
+    let testTimeout = null;
+    
+    // Before print - change background to white and make renderer opaque
+    const beforePrint = () => {
+        if (isTestMode) {
+            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 = () => {
+        if (isTestMode) {
+            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 {
+                afterPrint();
+            }
+        });
+    }
+    
+    // Fallback for older browsers
+    window.addEventListener('beforeprint', () => {
+        console.log('🖨️ beforeprint event fired');
+        beforePrint();
+    });
+    window.addEventListener('afterprint', () => {
+        console.log('🖨️ afterprint event fired');
+        afterPrint();
+    });
+    
+    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() {
     // Ambient light for overall illumination - increased intensity
     const ambientLight = new THREE.AmbientLight(0x404040, 1.2);

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) */
@@ -92,3 +98,71 @@ body {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
+
+/* 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 */
+    #info {
+        display: none !important;
+    }
+    
+    /* Hide print button in print output */
+    #print-btn {
+        display: none !important;
+    }
+    
+    /* Hide loading indicator when printing */
+    #loading {
+        display: none !important;
+    }
+    
+    /* 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;
+        max-height: none !important;
+        margin: 0 !important;
+        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;
+    }
+}