116 lines
4.3 KiB
JavaScript
116 lines
4.3 KiB
JavaScript
// 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;
|
|
}
|
|
} |