From 5966f2b4b8c0781f99f6876b397c19e2ad0e44bb Mon Sep 17 00:00:00 2001
From: brentperteet <brent.perteet@gmail.com>
Date: Fri, 27 Feb 2026 13:54:24 -0600
Subject: [PATCH] Add interactive 3D model viewer with STEP to STL conversion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Install and integrate CadQuery for STEP to STL conversion on server
- Add convert_step_to_stl() function using CadQuery OCP bindings
- Implement Three.js-based interactive 3D viewer with OrbitControls
- Add STLLoader for loading converted models
- Auto-center and scale models to fit viewer
- Add lighting (ambient + 2 directional lights) for better visualization
- Enable mouse controls: rotate (left-click drag), zoom (scroll), pan (right-click drag)
- Add debug logging throughout conversion pipeline
- Display converted STL models in real-time when footprint is selected

Dependencies added: cadquery, cadquery-ocp, zstandard

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app.py               |  99 +++++++++++++++++++++++++++++++++-----
 templates/index.html | 111 +++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 194 insertions(+), 16 deletions(-)

diff --git a/app.py b/app.py
index 414169f..201301a 100644
--- a/app.py
+++ b/app.py
@@ -173,6 +173,64 @@ def get_footprints_in_library(library_path):
 
     return sorted(footprints)
 
+def convert_step_to_stl(step_data_bytes):
+    """Convert STEP file data to STL format using CadQuery.
+
+    Args:
+        step_data_bytes: Raw STEP file data as bytes
+
+    Returns:
+        STL file data as bytes, or None if conversion fails
+    """
+    try:
+        import cadquery as cq
+        import tempfile
+
+        # Write STEP data to a temporary file
+        with tempfile.NamedTemporaryFile(suffix='.step', delete=False, mode='wb') as temp_step:
+            temp_step.write(step_data_bytes)
+            temp_step_path = temp_step.name
+
+        try:
+            # Import the STEP file
+            print(f"[3D Model] Importing STEP file...")
+            result = cq.importers.importStep(temp_step_path)
+
+            # Export to STL
+            print(f"[3D Model] Converting to STL...")
+            with tempfile.NamedTemporaryFile(suffix='.stl', delete=False, mode='wb') as temp_stl:
+                temp_stl_path = temp_stl.name
+
+            # Export the shape to STL
+            cq.exporters.export(result, temp_stl_path, exportType='STL')
+
+            # Read the STL file
+            with open(temp_stl_path, 'rb') as f:
+                stl_data = f.read()
+
+            print(f"[3D Model] Conversion successful, STL size: {len(stl_data)} bytes")
+
+            # Cleanup
+            os.unlink(temp_step_path)
+            os.unlink(temp_stl_path)
+
+            return stl_data
+
+        except Exception as e:
+            print(f"[3D Model] Error during conversion: {e}")
+            import traceback
+            traceback.print_exc()
+            # Cleanup on error
+            if os.path.exists(temp_step_path):
+                os.unlink(temp_step_path)
+            return None
+
+    except Exception as e:
+        print(f"[3D Model] Error setting up conversion: {e}")
+        import traceback
+        traceback.print_exc()
+        return None
+
 def extract_embedded_model(footprint_path, footprint_name):
     """Extract embedded 3D model from a KiCad footprint file.
 
@@ -2140,18 +2198,25 @@ def handle_get_footprint_model(data):
         library_path = data.get('library_path', '')
         footprint_name = data.get('footprint_name', '')
 
+        print(f"[3D Model] Request for footprint: {footprint_name}")
+        print(f"[3D Model] Library path: {library_path}")
+
         if not library_path or not footprint_name:
+            print(f"[3D Model] Missing library_path or footprint_name")
             emit('model_result', {'has_model': False})
             return
 
         if not os.path.exists(library_path):
+            print(f"[3D Model] Library path does not exist: {library_path}")
             emit('model_result', {'has_model': False})
             return
 
         # Extract embedded model
+        print(f"[3D Model] Extracting model from {library_path}/{footprint_name}")
         model_data = extract_embedded_model(library_path, footprint_name)
 
         if model_data:
+            print(f"[3D Model] Found model: {model_data['name']}")
             # Decode base64 to get the actual file data
             import base64
             import zstandard as zstd
@@ -2159,25 +2224,37 @@ def handle_get_footprint_model(data):
             try:
                 # Decode base64
                 compressed_data = base64.b64decode(model_data['data'])
+                print(f"[3D Model] Decoded base64, compressed size: {len(compressed_data)}")
                 # Decompress (KiCad uses zstd compression)
                 dctx = zstd.ZstdDecompressor()
-                decompressed_data = dctx.decompress(compressed_data)
-                # Re-encode as base64 for transmission
-                model_base64 = base64.b64encode(decompressed_data).decode('ascii')
+                step_data = dctx.decompress(compressed_data)
+                print(f"[3D Model] Decompressed STEP, size: {len(step_data)}")
 
-                emit('model_result', {
-                    'has_model': True,
-                    'name': model_data['name'],
-                    'type': model_data['type'],
-                    'data': model_base64,
-                    'format': 'step'  # Assuming STEP format
-                })
+                # Convert STEP to STL
+                stl_data = convert_step_to_stl(step_data)
+
+                if stl_data:
+                    # Encode STL as base64 for transmission
+                    stl_base64 = base64.b64encode(stl_data).decode('ascii')
+                    print(f"[3D Model] Success! Sending STL model to client")
+
+                    emit('model_result', {
+                        'has_model': True,
+                        'name': model_data['name'].replace('.stp', '.stl').replace('.step', '.stl'),
+                        'type': model_data['type'],
+                        'data': stl_base64,
+                        'format': 'stl'
+                    })
+                else:
+                    print(f"[3D Model] Failed to convert STEP to STL")
+                    emit('model_result', {'has_model': False})
             except Exception as e:
-                print(f"Error decoding model data: {e}")
+                print(f"[3D Model] Error processing model data: {e}")
                 import traceback
                 traceback.print_exc()
                 emit('model_result', {'has_model': False})
         else:
+            print(f"[3D Model] No embedded model found")
             emit('model_result', {'has_model': False})
 
     except Exception as e:
diff --git a/templates/index.html b/templates/index.html
index 12cda52..8e60224 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,6 +7,7 @@
     <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.159.0/build/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.159.0/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.159.0/examples/js/loaders/STLLoader.js"></script>
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -1302,6 +1303,101 @@
             selectedFootprint = `${libName}:${data.footprint_name}`;
         });
 
+        let modelScene = null;
+        let modelRenderer = null;
+        let modelCamera = null;
+        let modelControls = null;
+        let modelMesh = null;
+
+        function init3DViewer() {
+            const canvasContainer = document.getElementById('modelViewerCanvas');
+            const width = canvasContainer.clientWidth || 800;
+            const height = 300;
+
+            // Scene
+            modelScene = new THREE.Scene();
+            modelScene.background = new THREE.Color(0x1a1a1a);
+
+            // Camera
+            modelCamera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
+            modelCamera.position.set(0, 0, 50);
+
+            // Renderer
+            modelRenderer = new THREE.WebGLRenderer({ antialias: true });
+            modelRenderer.setSize(width, height);
+            canvasContainer.innerHTML = '';
+            canvasContainer.appendChild(modelRenderer.domElement);
+
+            // Lights
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+            modelScene.add(ambientLight);
+
+            const directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.5);
+            directionalLight1.position.set(1, 1, 1);
+            modelScene.add(directionalLight1);
+
+            const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.3);
+            directionalLight2.position.set(-1, -1, -1);
+            modelScene.add(directionalLight2);
+
+            // Controls
+            modelControls = new THREE.OrbitControls(modelCamera, modelRenderer.domElement);
+            modelControls.enableDamping = true;
+            modelControls.dampingFactor = 0.05;
+
+            // Animation loop
+            function animate() {
+                requestAnimationFrame(animate);
+                modelControls.update();
+                modelRenderer.render(modelScene, modelCamera);
+            }
+            animate();
+        }
+
+        function load3DModel(stlData) {
+            if (!modelScene) {
+                init3DViewer();
+            }
+
+            // Remove old mesh if exists
+            if (modelMesh) {
+                modelScene.remove(modelMesh);
+            }
+
+            // Decode base64 STL data
+            const binaryString = atob(stlData);
+            const bytes = new Uint8Array(binaryString.length);
+            for (let i = 0; i < binaryString.length; i++) {
+                bytes[i] = binaryString.charCodeAt(i);
+            }
+
+            // Load STL
+            const loader = new THREE.STLLoader();
+            const geometry = loader.parse(bytes.buffer);
+
+            // Center and scale the geometry
+            geometry.center();
+            geometry.computeBoundingBox();
+            const size = new THREE.Vector3();
+            geometry.boundingBox.getSize(size);
+            const maxDim = Math.max(size.x, size.y, size.z);
+            const scale = 30 / maxDim;
+            geometry.scale(scale, scale, scale);
+
+            // Create mesh
+            const material = new THREE.MeshPhongMaterial({
+                color: 0x00aa00,
+                specular: 0x111111,
+                shininess: 50
+            });
+            modelMesh = new THREE.Mesh(geometry, material);
+            modelScene.add(modelMesh);
+
+            // Adjust camera
+            modelCamera.position.set(0, 0, 50);
+            modelControls.reset();
+        }
+
         socket.on('model_result', (data) => {
             console.log('Received model_result:', data);
             const container = document.getElementById('modelViewerContainer');
@@ -1310,11 +1406,16 @@
             if (data.has_model) {
                 console.log('Model found, displaying viewer');
                 container.style.display = 'block';
-                messageEl.innerHTML = `<strong>3D Model Found:</strong> ${data.name}<br><br>` +
-                    `<em>Note: STEP file viewing in browser requires conversion to STL/OBJ format.<br>` +
-                    `This feature is under development.</em><br><br>` +
-                    `<a href="data:application/stp;base64,${data.data}" download="${data.name}" ` +
-                    `style="color: #007bff; text-decoration: underline; cursor: pointer;">Download ${data.name}</a>`;
+                messageEl.style.display = 'none';
+
+                // Load and display the 3D model
+                try {
+                    load3DModel(data.data);
+                } catch (error) {
+                    console.error('Error loading 3D model:', error);
+                    messageEl.style.display = 'block';
+                    messageEl.innerHTML = `<span style="color: #dc3545;">Error loading 3D model: ${error.message}</span>`;
+                }
             } else {
                 console.log('No model found');
                 container.style.display = 'none';