From d0e7af67d300fe9ef7aa609165b351ebeff93892 Mon Sep 17 00:00:00 2001
From: Frank Loesche <loeschef@janelia.hhmi.org>
Date: Thu, 22 Jan 2026 22:13:04 -0500
Subject: [PATCH] upgrade three.js and node (for testing)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- three.js: r128 (2021) → r182 (2025)
- node.js: v20 (maintenance LTS from 2023) → v24 (active LTS from 2025)
---
 .github/workflows/validate-calculations.yml |  2 +-
 CLAUDE.md                                   |  2 +-
 arena_3d_viewer.html                        | 33 +++++++++++++++------
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/validate-calculations.yml b/.github/workflows/validate-calculations.yml
index 1655dd9..9ecb2d4 100644
--- a/.github/workflows/validate-calculations.yml
+++ b/.github/workflows/validate-calculations.yml
@@ -29,7 +29,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
 
       - name: Run validation tests
         run: node tests/validate-arena-calculations.js
diff --git a/CLAUDE.md b/CLAUDE.md
index 8d440bd..bbefa43 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -55,7 +55,7 @@ Arena radius formula: `cRadius = panelWidth / (tan(alpha/2)) / 2` where `alpha =
 ## Arena 3D Viewer (`arena_3d_viewer.html`)
 
 ### Key Implementation Details
-- Uses Three.js r128 with OrbitControls
+- Uses Three.js r182 with OrbitControls (ES6 modules)
 - Renderer requires `preserveDrawingBuffer: true` for screenshot functionality
 - LED meshes stored in `ledMeshes[]` array for efficient animation (color-only updates)
 - Pattern rotation uses `state.phaseOffset` to shift pattern, not world rotation
diff --git a/arena_3d_viewer.html b/arena_3d_viewer.html
index 1ec23ce..12c9ac3 100644
--- a/arena_3d_viewer.html
+++ b/arena_3d_viewer.html
@@ -5,8 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Arena 3D Viewer - PanelDisplayTools</title>
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
+                "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/"
+            }
+        }
+    </script>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
 
@@ -583,7 +589,10 @@ <h3>View Controls</h3>
         <strong>Controls:</strong> Drag to rotate | Scroll to zoom | Right-drag to pan
     </div>
 
-    <script>
+    <script type="module">
+        import * as THREE from 'three';
+        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
         // Panel specifications (same as arena_editor.html)
         const PANEL_SPECS = {
             'G3': {
@@ -705,12 +714,13 @@ <h3>View Controls</h3>
 
             // Renderer (preserveDrawingBuffer needed for screenshots)
             renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
+
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.setPixelRatio(window.devicePixelRatio);
             container.appendChild(renderer.domElement);
 
             // Controls
-            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls = new OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
             controls.dampingFactor = 0.05;
             controls.minDistance = 0.1; // Allow getting close to center for fly view
@@ -1325,7 +1335,7 @@ <h3>View Controls</h3>
                     -halfW,  halfH, borderZ,
                     -halfW, -halfH, borderZ
                 ]);
-                borderGeom.setAttribute('position', new THREE.BufferAttribute(borderVertices, 3));
+                borderGeom.setAttribute('position', new THREE.Float32BufferAttribute(borderVertices, 3));
                 const border = new THREE.LineSegments(borderGeom, borderMat);
                 group.add(border);
 
@@ -1339,7 +1349,7 @@ <h3>View Controls</h3>
                             -halfW, lineY, borderZ,
                              halfW, lineY, borderZ
                         ]);
-                        lineGeom.setAttribute('position', new THREE.BufferAttribute(lineVerts, 3));
+                        lineGeom.setAttribute('position', new THREE.Float32BufferAttribute(lineVerts, 3));
                         const line = new THREE.Line(lineGeom, borderMat);
                         group.add(line);
                     }
@@ -1438,7 +1448,7 @@ <h3>View Controls</h3>
                             c4x, c4y, 0,
                             c1x, c1y, 0
                         ]);
-                        outlineGeom.setAttribute('position', new THREE.BufferAttribute(outlineVerts, 3));
+                        outlineGeom.setAttribute('position', new THREE.Float32BufferAttribute(outlineVerts, 3));
                         const outlineMat = new THREE.LineBasicMaterial({ color: 0x333333 });
                         const outline = new THREE.LineSegments(outlineGeom, outlineMat);
                         outline.position.set(localX, localY, localZ + 0.0001);
@@ -1484,6 +1494,7 @@ <h3>View Controls</h3>
 
             return group;
         }
+    
 
         // Update all LED colors without rebuilding geometry (efficient animation)
         function updateLEDColors() {
@@ -1561,8 +1572,12 @@ <h3>View Controls</h3>
             renderer.render(scene, camera);
         }
 
-        // Start
-        init();
+        // Start - Initialize when module loads
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', init);
+        } else {
+            init();
+        }
     </script>
 </body>
 </html>