From aa7f7201942852a9126cf5714fd11e58e6c44bf6 Mon Sep 17 00:00:00 2001
From: brentperteet <brent.perteet@gmail.com>
Date: Fri, 27 Feb 2026 13:58:14 -0600
Subject: [PATCH] Fix Three.js module loading for OrbitControls and STLLoader
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Switch from legacy script includes to ES6 modules with import map
- Import OrbitControls and STLLoader from three/addons/
- Update constructor calls to use imported classes directly
- Remove THREE namespace prefix for OrbitControls and STLLoader
- Fixes "THREE.OrbitControls is not a constructor" error

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 templates/index.html | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 8e60224..4180ca9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,9 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>UM KiCad Manager</title>
     <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>
+    <script type="importmap">
+    {
+        "imports": {
+            "three": "https://cdn.jsdelivr.net/npm/three@0.159.0/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.159.0/examples/jsm/"
+        }
+    }
+    </script>
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -564,7 +569,14 @@
     </div>
     {% endif %}
 
-    <script>
+    <script type="module">
+        import * as THREE from 'three';
+        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+        import { STLLoader } from 'three/addons/loaders/STLLoader.js';
+
+        // Make THREE available globally for debugging
+        window.THREE = THREE;
+
         const libraryOnlyMode = {{ 'true' if library_only_mode else 'false' }};
         const socket = io();
         const statusEl = document.getElementById('status');
@@ -1341,7 +1353,7 @@
             modelScene.add(directionalLight2);
 
             // Controls
-            modelControls = new THREE.OrbitControls(modelCamera, modelRenderer.domElement);
+            modelControls = new OrbitControls(modelCamera, modelRenderer.domElement);
             modelControls.enableDamping = true;
             modelControls.dampingFactor = 0.05;
 
@@ -1372,7 +1384,7 @@
             }
 
             // Load STL
-            const loader = new THREE.STLLoader();
+            const loader = new STLLoader();
             const geometry = loader.parse(bytes.buffer);
 
             // Center and scale the geometry