108 lines
3.3 KiB
JavaScript
108 lines
3.3 KiB
JavaScript
import {mat4Ortho, mat4LookAt, mat4Multiply} from './math.js';
|
|
|
|
export class Diorama {
|
|
constructor(elementId, frame, requestRenderCallback) {
|
|
this.element = document.getElementById(elementId);
|
|
this.element.style.position = 'relative';
|
|
|
|
this.canvas = document.createElement('canvas');
|
|
this.element.appendChild(this.canvas);
|
|
this.ctx2d = this.canvas.getContext('2d');
|
|
this.frame = frame;
|
|
|
|
this.dirty = true; // Start dirty to guarantee the first render
|
|
this.requestEngineRender = 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.checkpoint = null;
|
|
}
|
|
|
|
requestRender() {
|
|
this.dirty = true;
|
|
if (this.requestEngineRender) this.requestEngineRender();
|
|
}
|
|
|
|
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.frame.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.frame.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;
|
|
}
|
|
} |