292 lines
9.8 KiB
JavaScript
292 lines
9.8 KiB
JavaScript
import {mat4Ortho, mat4LookAt, mat4Multiply} from './math.js';
|
|
|
|
export class Diorama {
|
|
constructor(elementId, world, requestRenderCallback) {
|
|
this.element = document.getElementById(elementId);
|
|
this.canvas = document.createElement('canvas')
|
|
this.element.appendChild(this.canvas)
|
|
this.ctx2d = this.canvas.getContext('2d');
|
|
this.world = world;
|
|
this.requestRender = requestRenderCallback;
|
|
|
|
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;
|
|
this.touchMode = '';
|
|
this.lastMouse = {x: 0, y: 0};
|
|
this.lastPinchDist = 0;
|
|
|
|
this.checkpoint = null;
|
|
|
|
this.initUI();
|
|
this.attachEvents();
|
|
}
|
|
|
|
initUI() {
|
|
this.element.style.position = "relative";
|
|
|
|
this.resetBtn = document.createElement('button');
|
|
this.resetBtn.textContent = 'Reset View';
|
|
this.resetBtn.style.cssText = `
|
|
position: absolute; top: 1ch; right: 1ch;
|
|
padding: 0.5ch 1ch; background: rgba(0,0,0,0.7);
|
|
color: white; border: 1px solid gray;
|
|
cursor: pointer; display: none; z-index: 10;
|
|
`;
|
|
|
|
this.resetBtn.addEventListener('mousedown', e => e.stopPropagation());
|
|
this.resetBtn.addEventListener('touchstart', e => e.stopPropagation());
|
|
this.resetBtn.addEventListener('click', () => {
|
|
this.loadState();
|
|
this.resetBtn.style.display = 'none';
|
|
});
|
|
this.element.appendChild(this.resetBtn);
|
|
|
|
this.touchTimer = null;
|
|
this.touchTimedOut = false;
|
|
}
|
|
|
|
saveState() {
|
|
this.checkpoint = {
|
|
target: [...this.target],
|
|
radius: this.radius,
|
|
theta: this.theta,
|
|
phi: this.phi,
|
|
};
|
|
}
|
|
|
|
loadState() {
|
|
if (!this.checkpoint) return;
|
|
this.target = [...this.checkpoint.target];
|
|
this.radius = this.checkpoint.radius;
|
|
this.theta = this.checkpoint.theta;
|
|
this.phi = this.checkpoint.phi;
|
|
this.requestRender();
|
|
}
|
|
|
|
centerView() {
|
|
if (this.world.blocks.size === 0) {
|
|
this.target = [0.5, 0.5, 0.5];
|
|
return;
|
|
}
|
|
|
|
let minX = Infinity, minY = Infinity, minZ = Infinity;
|
|
let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
|
|
|
|
for (const block of this.world.blocks.values()) {
|
|
minX = Math.min(minX, block.pos[0]);
|
|
minY = Math.min(minY, block.pos[1]);
|
|
minZ = Math.min(minZ, block.pos[2]);
|
|
maxX = Math.max(maxX, block.pos[0] + 1);
|
|
maxY = Math.max(maxY, block.pos[1] + 1);
|
|
maxZ = Math.max(maxZ, block.pos[2] + 1);
|
|
}
|
|
|
|
this.target = [(minX + maxX) / 2, (minY + maxY) / 2, (minZ + maxZ) / 2];
|
|
this.requestRender();
|
|
}
|
|
|
|
updateMatrices(aspectRatio) {
|
|
const t = this.theta * Math.PI / 180;
|
|
const p = this.phi * Math.PI / 180;
|
|
|
|
this.viewDir = [
|
|
Math.cos(p) * Math.sin(t),
|
|
Math.sin(p),
|
|
Math.cos(p) * Math.cos(t)
|
|
];
|
|
|
|
this.upDir = [
|
|
-Math.sin(p) * Math.sin(t),
|
|
Math.cos(p),
|
|
-Math.sin(p) * Math.cos(t),
|
|
];
|
|
|
|
this.eyePos = [
|
|
this.target[0] + this.radius * this.viewDir[0],
|
|
this.target[1] + this.radius * this.viewDir[1],
|
|
this.target[2] + this.radius * this.viewDir[2],
|
|
];
|
|
|
|
const size = this.radius * 0.5;
|
|
mat4Ortho(this.projMatrix, -size * aspectRatio, size * aspectRatio, -size, size, -50, 50);
|
|
|
|
mat4LookAt(
|
|
this.viewMatrix,
|
|
this.eyePos[0], this.eyePos[1], this.eyePos[2],
|
|
this.target[0], this.target[1], this.target[2],
|
|
this.upDir[0], this.upDir[1], this.upDir[2],
|
|
);
|
|
mat4Multiply(this.viewProjMatrix, this.projMatrix, this.viewMatrix);
|
|
|
|
return this.viewProjMatrix;
|
|
}
|
|
|
|
orbit(dx, dy) {
|
|
this.theta -= dx * 0.4;
|
|
this.phi += dy * 0.4;
|
|
this.phi = Math.max(-90, Math.min(90, this.phi));
|
|
}
|
|
|
|
pan(dx, dy) {
|
|
const t = this.theta * Math.PI / 180;
|
|
const p = this.phi * Math.PI / 180;
|
|
|
|
const rightX = Math.cos(t);
|
|
const rightZ = -Math.sin(t);
|
|
|
|
const upX = -Math.sin(p) * Math.sin(t);
|
|
const upY = Math.cos(p);
|
|
const upZ = -Math.sin(p) * Math.cos(t);
|
|
|
|
const rect = this.canvas.getBoundingClientRect();
|
|
const panSpeed = this.radius / rect.height;
|
|
|
|
this.target[0] += (-rightX * dx + upX * dy) * panSpeed;
|
|
this.target[1] += (upY * dy) * panSpeed;
|
|
this.target[2] += (-rightZ * dx + upZ * dy) * panSpeed;
|
|
}
|
|
|
|
zoomRatio(ratio) {
|
|
this.radius *= ratio;
|
|
this.radius = Math.max(1, Math.min(50, this.radius));
|
|
}
|
|
|
|
zoomLinear(delta) {
|
|
this.radius += delta * 0.05;
|
|
this.radius = Math.max(1, Math.min(50, this.radius));
|
|
}
|
|
|
|
attachEvents() {
|
|
this.element.addEventListener('contextmenu', e => e.preventDefault());
|
|
|
|
const notifyChange = () => {
|
|
if (this.checkpoint) this.resetBtn.style.display = 'block';
|
|
this.requestRender();
|
|
};
|
|
|
|
this.element.addEventListener('mousedown', (e) => {
|
|
e.preventDefault();
|
|
this.isDragging = true;
|
|
this.lastMouse = {x: e.clientX, y: e.clientY};
|
|
|
|
this.dragButton = e.button;
|
|
if (this.dragButton === 0) {
|
|
if (e.ctrlKey || e.metaKey) this.dragButton = 2;
|
|
else if (e.shiftKey) this.dragButton = 1;
|
|
}
|
|
|
|
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) this.orbit(dx, dy);
|
|
else if (this.dragButton === 1) this.pan(dx, dy);
|
|
else if (this.dragButton === 2) this.zoomLinear(dy);
|
|
|
|
notifyChange();
|
|
});
|
|
|
|
this.element.addEventListener('touchstart', (e) => {
|
|
if (this.touchTimer) clearTimeout(this.touchTimer);
|
|
this.touchTimedOut = false;
|
|
|
|
if (e.touches.length === 1) {
|
|
this.touchTimer = setTimeout(() => {
|
|
this.touchTimedOut = true;
|
|
this.isDragging = true;
|
|
this.touchMode = 'orbit';
|
|
this.lastMouse = {x: e.touches[0].clientX, y: e.touches[0].clientY};
|
|
this.element.style.cursor = 'grabbing';
|
|
}, 200);
|
|
} else if (e.touches.length >= 2) {
|
|
this.touchTimedOut = true;
|
|
this.isDragging = true;
|
|
this.touchMode = 'pan-zoom';
|
|
const t1 = e.touches[0], t2 = e.touches[1];
|
|
this.lastMouse = {
|
|
x: (t1.clientX + t2.clientX) / 2,
|
|
y: (t1.clientY + t2.clientY) / 2
|
|
};
|
|
this.lastPinchDist = Math.hypot(t1.clientX - t2.clientX, t1.clientY - t2.clientY);
|
|
}
|
|
}, {passive: true});
|
|
|
|
this.element.addEventListener('touchmove', (e) => {
|
|
if (!this.touchTimedOut) {
|
|
if (this.touchTimer) {
|
|
clearTimeout(this.touchTimer);
|
|
this.touchTimer = null;
|
|
}
|
|
this.isDragging = false;
|
|
return;
|
|
}
|
|
|
|
if (!this.isDragging) return;
|
|
if (e.cancelable) e.preventDefault();
|
|
|
|
if (this.touchMode === 'orbit' && e.touches.length === 1) {
|
|
const dx = e.touches[0].clientX - this.lastMouse.x;
|
|
const dy = e.touches[0].clientY - this.lastMouse.y;
|
|
this.lastMouse = {x: e.touches[0].clientX, y: e.touches[0].clientY};
|
|
|
|
this.orbit(dx, dy);
|
|
notifyChange();
|
|
} else if (this.touchMode === 'pan-zoom' && e.touches.length >= 2) {
|
|
const t1 = e.touches[0], t2 = e.touches[1];
|
|
const cx = (t1.clientX + t2.clientX) / 2;
|
|
const cy = (t1.clientY + t2.clientY) / 2;
|
|
const dist = Math.hypot(t1.clientX - t2.clientX, t1.clientY - t2.clientY);
|
|
|
|
const dx = cx - this.lastMouse.x;
|
|
const dy = cy - this.lastMouse.y;
|
|
const zRatio = this.lastPinchDist > 0 ? (this.lastPinchDist / dist) : 1;
|
|
|
|
this.lastMouse = {x: cx, y: cy};
|
|
this.lastPinchDist = dist;
|
|
|
|
this.pan(dx, dy);
|
|
this.zoomRatio(zRatio);
|
|
notifyChange();
|
|
}
|
|
}, {passive: false});
|
|
|
|
const onTouchEnd = (e) => {
|
|
if (this.touchTimer) {
|
|
clearTimeout(this.touchTimer);
|
|
this.touchTimer = null;
|
|
}
|
|
|
|
if (e.touches.length === 0) {
|
|
this.isDragging = false;
|
|
this.touchMode = '';
|
|
} else if (e.touches.length === 1) {
|
|
this.touchMode = 'orbit';
|
|
this.lastMouse = {x: e.touches[0].clientX, y: e.touches[0].clientY};
|
|
}
|
|
};
|
|
|
|
this.element.addEventListener('touchend', onTouchEnd);
|
|
this.element.addEventListener('touchcancel', onTouchEnd);
|
|
}
|
|
} |