u

src/index.js

@@ -114,6 +114,9 @@ async function init() {
     // Handle window resize
     window.addEventListener('resize', onWindowResize, false);
     
+    // Handle print events
+    setupPrintHandlers();
+    
     // Start render loop
     animate();
 }
@@ -136,6 +139,40 @@ function setupCustomTouchControls() {
     console.log('Touch controls enabled - OrbitControls handles all touch gestures natively');
 }
 
+function setupPrintHandlers() {
+    const originalBackgroundColor = scene.background;
+    
+    // Before print - change background to white
+    const beforePrint = () => {
+        scene.background = new THREE.Color(0xffffff); // White background for printing
+        console.log('Print mode activated - background set to white');
+    };
+    
+    // After print - restore original background
+    const afterPrint = () => {
+        scene.background = originalBackgroundColor; // Restore original background
+        console.log('Print mode deactivated - background restored');
+    };
+    
+    // Listen for print events
+    if (window.matchMedia) {
+        const mediaQueryList = window.matchMedia('print');
+        mediaQueryList.addEventListener('change', (mql) => {
+            if (mql.matches) {
+                beforePrint();
+            } else {
+                afterPrint();
+            }
+        });
+    }
+    
+    // Fallback for older browsers
+    window.addEventListener('beforeprint', beforePrint);
+    window.addEventListener('afterprint', afterPrint);
+    
+    console.log('Print event handlers set up');
+}
+
 function setupLighting() {
     // Ambient light for overall illumination - increased intensity
     const ambientLight = new THREE.AmbientLight(0x404040, 1.2);

src/styles.css

@@ -92,3 +92,42 @@ body {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
+
+/* Print styles - make background transparent and model visible */
+@media print {
+    body {
+        background: white !important;
+        background-image: none !important;
+    }
+    
+    #container {
+        background: white !important;
+    }
+    
+    /* Hide info box when printing to focus on the model */
+    #info {
+        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;
+        width: 100% !important;
+        height: 100% !important;
+        max-width: none !important;
+        max-height: none !important;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+    
+    /* Ensure proper print sizing */
+    @page {
+        margin: 0.5in;
+        size: auto;
+    }
+}