Describe a 3D scene and click Generate
Script generated (see Script tab)
';
}
}
if (this.#codeArea && this.#script) {
this.#codeArea.innerHTML = `${this.#escapeHtml(this.#script)}`;
}
if (this.#downloadRow && this.#blendUrl) {
this.#downloadRow.style.display = "flex";
const blendLink = this.#downloadRow.querySelector(".blend-dl") as HTMLAnchorElement;
if (blendLink) blendLink.href = this.#blendUrl;
}
}
#applyTransform(img: HTMLImageElement) {
img.style.transform = `translate(${this.#viewX}px, ${this.#viewY}px) scale(${this.#viewScale})`;
}
#wireViewerEvents(container: HTMLElement, img: HTMLImageElement) {
let dragging = false;
let dragStartX = 0;
let dragStartY = 0;
let startViewX = 0;
let startViewY = 0;
const onPointerDown = (e: PointerEvent) => {
e.stopPropagation();
this.#pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
container.setPointerCapture(e.pointerId);
if (this.#pointers.size === 1) {
dragging = true;
dragStartX = e.clientX;
dragStartY = e.clientY;
startViewX = this.#viewX;
startViewY = this.#viewY;
container.classList.add("dragging");
} else if (this.#pointers.size === 2) {
// Start pinch
const pts = [...this.#pointers.values()];
this.#lastPinchDist = Math.hypot(pts[1].x - pts[0].x, pts[1].y - pts[0].y);
}
};
const onPointerMove = (e: PointerEvent) => {
if (!this.#pointers.has(e.pointerId)) return;
this.#pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
if (this.#pointers.size === 2) {
// Pinch zoom
const pts = [...this.#pointers.values()];
const dist = Math.hypot(pts[1].x - pts[0].x, pts[1].y - pts[0].y);
if (this.#lastPinchDist > 0) {
const ratio = dist / this.#lastPinchDist;
const cx = (pts[0].x + pts[1].x) / 2;
const cy = (pts[0].y + pts[1].y) / 2;
const rect = container.getBoundingClientRect();
const px = cx - rect.left;
const py = cy - rect.top;
this.#zoomAt(px, py, ratio, img);
}
this.#lastPinchDist = dist;
} else if (dragging && this.#pointers.size === 1) {
this.#viewX = startViewX + (e.clientX - dragStartX);
this.#viewY = startViewY + (e.clientY - dragStartY);
this.#applyTransform(img);
}
};
const onPointerUp = (e: PointerEvent) => {
this.#pointers.delete(e.pointerId);
if (this.#pointers.size < 2) this.#lastPinchDist = 0;
if (this.#pointers.size === 0) {
dragging = false;
container.classList.remove("dragging");
}
};
const onWheel = (e: WheelEvent) => {
e.preventDefault();
e.stopPropagation();
const rect = container.getBoundingClientRect();
const px = e.clientX - rect.left;
const py = e.clientY - rect.top;
const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;
this.#zoomAt(px, py, factor, img);
};
const onDblClick = (e: MouseEvent) => {
e.stopPropagation();
// Double-click to reset
const cw = container.clientWidth;
const ch = container.clientHeight;
const iw = img.naturalWidth || img.width;
const ih = img.naturalHeight || img.height;
if (!iw || !ih) return;
this.#viewScale = Math.min(cw / iw, ch / ih, 1);
this.#viewX = (cw - iw * this.#viewScale) / 2;
this.#viewY = (ch - ih * this.#viewScale) / 2;
this.#applyTransform(img);
};
container.addEventListener("pointerdown", onPointerDown);
container.addEventListener("pointermove", onPointerMove);
container.addEventListener("pointerup", onPointerUp);
container.addEventListener("pointercancel", onPointerUp);
container.addEventListener("wheel", onWheel, { passive: false });
container.addEventListener("dblclick", onDblClick);
this.#viewCleanup = () => {
container.removeEventListener("pointerdown", onPointerDown);
container.removeEventListener("pointermove", onPointerMove);
container.removeEventListener("pointerup", onPointerUp);
container.removeEventListener("pointercancel", onPointerUp);
container.removeEventListener("wheel", onWheel);
container.removeEventListener("dblclick", onDblClick);
};
}
#zoomAt(px: number, py: number, factor: number, img: HTMLImageElement) {
const newScale = Math.min(Math.max(this.#viewScale * factor, 0.1), 10);
const ratio = newScale / this.#viewScale;
this.#viewX = px - ratio * (px - this.#viewX);
this.#viewY = py - ratio * (py - this.#viewY);
this.#viewScale = newScale;
this.#applyTransform(img);
}
#escapeHtml(text: string): string {
const div = document.createElement("div");
div.textContent = text;
return div.innerHTML;
}
static override fromData(data: Record