A Three.js site presenting 20 world history milestones as double-sided loose-leaf pages, with three views: a leather binder with page-flip animation, a golden timeline, and a dotted globe with great-circle arcs. All textures (paper, leather, registration cards, and 18 hand-drawn sketches) are generated procedurally via Canvas 2D, so no external image assets are needed beyond the Earth map. Includes dev helper scripts for screenshots, ASCII previews, and headless verification.
30 lines
1.0 KiB
JavaScript
30 lines
1.0 KiB
JavaScript
import fs from 'node:fs';
|
|
import { PNG } from 'pngjs';
|
|
|
|
// 以 ASCII 字符打印截图的亮度分布,粗略预览构图
|
|
for (const name of process.argv.slice(2)) {
|
|
const png = PNG.sync.read(fs.readFileSync(name));
|
|
const { width: w, height: h, data } = png;
|
|
const cols = 72, rows = 26;
|
|
const chars = ' .:-=+*#%@';
|
|
console.log(`\n=== ${name} ===`);
|
|
for (let r = 0; r < rows; r++) {
|
|
let line = '';
|
|
for (let c = 0; c < cols; c++) {
|
|
const x0 = Math.floor((c / cols) * w), x1 = Math.floor(((c + 1) / cols) * w);
|
|
const y0 = Math.floor((r / rows) * h), y1 = Math.floor(((r + 1) / rows) * h);
|
|
let sum = 0, n = 0;
|
|
for (let y = y0; y < y1; y += 3) {
|
|
for (let x = x0; x < x1; x += 3) {
|
|
const i = (y * w + x) * 4;
|
|
sum += 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
|
|
n++;
|
|
}
|
|
}
|
|
const lum = sum / n;
|
|
line += chars[Math.min(chars.length - 1, Math.floor((lum / 255) * chars.length))];
|
|
}
|
|
console.log(line);
|
|
}
|
|
}
|