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.
38 lines
1.4 KiB
JavaScript
38 lines
1.4 KiB
JavaScript
import fs from 'node:fs';
|
|
import { PNG } from 'pngjs';
|
|
|
|
// 颜色分类预览:G=金, R=红, B=蓝, E=绿, P=纸(亮), .=暗
|
|
// 用于检查地球上的弧线(G)与标记(R/B/E)
|
|
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 = 90, rows = 36;
|
|
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 R = 0, G = 0, B = 0, n = 0;
|
|
for (let y = y0; y < y1; y += 2) {
|
|
for (let x = x0; x < x1; x += 2) {
|
|
const i = (y * w + x) * 4;
|
|
R += data[i]; G += data[i + 1]; B += data[i + 2]; n++;
|
|
}
|
|
}
|
|
R /= n; G /= n; B /= n;
|
|
const lum = 0.299 * R + 0.587 * G + 0.114 * B;
|
|
let ch = '.';
|
|
if (lum > 150) ch = 'P';
|
|
else if (R > 150 && G > 110 && B < 120) ch = 'G'; // 金
|
|
else if (R > 110 && G < 90 && B < 90) ch = 'R'; // 红
|
|
else if (B > 90 && R < 90 && G < 110) ch = 'B'; // 蓝
|
|
else if (G > 70 && R < 110 && B < 110) ch = 'E'; // 绿
|
|
else if (lum > 60) ch = ':';
|
|
else if (lum > 30) ch = '-';
|
|
line += ch;
|
|
}
|
|
console.log(line);
|
|
}
|
|
}
|