multiview. camera controls

2026-07-04 10:43:11 -04:00
parent b4029d1bdf
commit 8249c4dd52
5 changed files with 352 additions and 141 deletions
--- a/camera.js
+++ b/camera.js
@@ -0,0 +1,116 @@
+// camera.js
+import {mat4Ortho, mat4LookAt, mat4Multiply} from './math.js';
+
+export class Camera {
+    constructor(element, onChangeCallback) {
+        this.element = element;
+        this.onChange = onChangeCallback;
+
+        this.target = [0.5, 0, 0.5];
+        this.radius = 4;
+        this.theta = 135;
+        this.phi = 30;
+
+        this.projMatrix = new Float32Array(16);
+        this.viewMatrix = new Float32Array(16);
+        this.viewProjMatrix = new Float32Array(16);
+
+        this.isDragging = false;
+        this.dragButton = 0; // 0: Left, 1: Middle, 2: Right
+        this.lastMouse = {x: 0, y: 0};
+
+        this.attachEvents();
+    }
+
+    attachEvents() {
+        // Prevent the browser context menu on right-click
+        this.element.addEventListener('contextmenu', e => e.preventDefault());
+
+        this.element.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            this.isDragging = true;
+            this.dragButton = e.button;
+            this.lastMouse = {x: e.clientX, y: e.clientY};
+
+            // Visual feedback based on action
+            if (this.dragButton === 1) this.element.style.cursor = 'move';
+            else if (this.dragButton === 2) this.element.style.cursor = 'ns-resize';
+            else this.element.style.cursor = 'grabbing';
+        });
+
+        window.addEventListener('mouseup', () => {
+            this.isDragging = false;
+            this.element.style.cursor = 'grab';
+        });
+
+        window.addEventListener('mousemove', (e) => {
+            if (!this.isDragging) return;
+            const dx = e.clientX - this.lastMouse.x;
+            const dy = e.clientY - this.lastMouse.y;
+            this.lastMouse = {x: e.clientX, y: e.clientY};
+
+            if (this.dragButton === 0) {
+                // LEFT CLICK: Orbit
+                this.theta -= dx * 0.4;
+                this.phi += dy * 0.4;
+                this.phi = Math.max(-90, Math.min(90, this.phi));
+            } else if (this.dragButton === 1) {
+                // MIDDLE CLICK: Pan
+                const t = this.theta * Math.PI / 180;
+                const p = this.phi * Math.PI / 180;
+
+                // Camera's local Right vector mapped to world space
+                const rightX = Math.cos(t);
+                const rightZ = -Math.sin(t);
+
+                // Camera's local Up vector mapped to world space
+                const upX = -Math.sin(p) * Math.sin(t);
+                const upY = Math.cos(p);
+                const upZ = -Math.sin(p) * Math.cos(t);
+
+                // Scale pan speed based on zoom radius so it feels consistent
+                const panSpeed = this.radius * 0.0025;
+
+                this.target[0] += (-rightX * dx + upX * dy) * panSpeed;
+                this.target[1] += (upY * dy) * panSpeed;
+                this.target[2] += (-rightZ * dx + upZ * dy) * panSpeed;
+            } else if (this.dragButton === 2) {
+                // RIGHT CLICK: Zoom
+                this.radius += dy * 0.05;
+                this.radius = Math.max(1, Math.min(50, this.radius));
+            }
+
+            this.onChange();
+        });
+
+        this.element.addEventListener('wheel', (e) => {
+            e.preventDefault();
+            this.radius += e.deltaY * 0.01;
+            this.radius = Math.max(1, Math.min(50, this.radius));
+            this.onChange();
+        });
+    }
+
+    updateMatrices(aspectRatio) {
+        const t = this.theta * Math.PI / 180;
+        const p = this.phi * Math.PI / 180;
+
+        const eyeX = this.target[0] + this.radius * Math.cos(p) * Math.sin(t);
+        const eyeY = this.target[1] + this.radius * Math.sin(p);
+        const eyeZ = this.target[2] + this.radius * Math.cos(p) * Math.cos(t);
+
+        // Calculate dynamic Up vector to prevent gimbal lock at exactly +/- 90 degrees
+        const upX = -Math.sin(p) * Math.sin(t);
+        const upY = Math.cos(p);
+        const upZ = -Math.sin(p) * Math.cos(t);
+
+        const size = this.radius * 0.5;
+        mat4Ortho(this.projMatrix, -size * aspectRatio, size * aspectRatio, -size, size, -50, 50);
+
+        // Pass the dynamic Up vector to the LookAt matrix
+        mat4LookAt(this.viewMatrix, eyeX, eyeY, eyeZ, this.target[0], this.target[1], this.target[2], upX, upY, upZ);
+        mat4Multiply(this.viewProjMatrix, this.projMatrix, this.viewMatrix);
+
+        return this.viewProjMatrix;
+    }
+}