362 lines
13 KiB
JavaScript
362 lines
13 KiB
JavaScript
import * as THREE from 'https://esm.sh/three@0.165.0';
|
|
import { OrbitControls } from 'https://esm.sh/three@0.165.0/examples/jsm/controls/OrbitControls.js';
|
|
|
|
const canvas = document.getElementById('scene');
|
|
const progressInput = document.getElementById('progress');
|
|
const progressValue = document.getElementById('progress_value');
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
|
|
renderer.setClearColor(0x202124, 1);
|
|
|
|
const scene = new THREE.Scene();
|
|
const camera = new THREE.PerspectiveCamera(34, 1, 0.1, 30);
|
|
if (urlParams.get('view') === 'profile') {
|
|
camera.position.set(0, 0.82, 5.8);
|
|
} else if (urlParams.get('view') === 'top') {
|
|
camera.position.set(0, 5.8, 0.001);
|
|
} else {
|
|
camera.position.set(0, 3.25, 5.4);
|
|
}
|
|
|
|
const controls = new OrbitControls(camera, canvas);
|
|
controls.target.set(0, urlParams.get('view') === 'profile' ? 0.13 : 0.18, 0);
|
|
controls.enableDamping = true;
|
|
controls.minDistance = 2.2;
|
|
controls.maxDistance = 8.0;
|
|
controls.update();
|
|
|
|
const book = new THREE.Group();
|
|
scene.add(book);
|
|
|
|
const guide = new THREE.GridHelper(5.6, 16, 0x4c4c4c, 0x343434);
|
|
guide.position.y = -0.12;
|
|
scene.add(guide);
|
|
|
|
const materials = {
|
|
cover: new THREE.MeshBasicMaterial({ color: 0x2c1810 }),
|
|
spine: new THREE.MeshBasicMaterial({ color: 0x9c1f1f, side: THREE.DoubleSide }),
|
|
pagesLeft: new THREE.MeshBasicMaterial({ color: 0xd8c7a4, side: THREE.DoubleSide }),
|
|
pagesRight: new THREE.MeshBasicMaterial({ color: 0xe7d6b4, side: THREE.DoubleSide }),
|
|
topPage: new THREE.MeshBasicMaterial({ color: 0xf1dfba, side: THREE.DoubleSide }),
|
|
edge: new THREE.MeshBasicMaterial({ color: 0xb99a68, side: THREE.DoubleSide }),
|
|
hinge: new THREE.MeshBasicMaterial({ color: 0x2b0808 })
|
|
};
|
|
|
|
let readingProgress = readInitialProgress();
|
|
progressInput.value = readingProgress.toFixed(3);
|
|
progressValue.value = readingProgress.toFixed(2);
|
|
rebuildBook();
|
|
resize();
|
|
animate();
|
|
|
|
progressInput.addEventListener('input', () => {
|
|
setReadingProgress(progressInput.value);
|
|
});
|
|
|
|
window.addEventListener('resize', resize);
|
|
|
|
window.BookShapeLab = {
|
|
get progress() {
|
|
return readingProgress;
|
|
},
|
|
setReadingProgress(value) {
|
|
setReadingProgress(value);
|
|
return readingProgress;
|
|
}
|
|
};
|
|
|
|
function readInitialProgress() {
|
|
const parsed = Number.parseFloat(urlParams.get('progress') ?? '0.25');
|
|
return Number.isFinite(parsed) ? THREE.MathUtils.clamp(parsed, 0, 1) : 0.25;
|
|
}
|
|
|
|
function setReadingProgress(value) {
|
|
const next = THREE.MathUtils.clamp(Number.parseFloat(value), 0, 1);
|
|
if (!Number.isFinite(next)) return;
|
|
readingProgress = next;
|
|
progressInput.value = readingProgress.toFixed(3);
|
|
progressValue.value = readingProgress.toFixed(2);
|
|
rebuildBook();
|
|
}
|
|
|
|
function rebuildBook() {
|
|
clearGroup(book);
|
|
|
|
const coverDepth = 2.34;
|
|
const coverThickness = 0.022;
|
|
const pageWidth = 1.62;
|
|
const pageDepth = 2.24;
|
|
const gutter = 0.12;
|
|
const sheetTick = 0.0045;
|
|
const fullBlock = 0.41;
|
|
const leftThickness = THREE.MathUtils.lerp(sheetTick, fullBlock, readingProgress);
|
|
const rightThickness = THREE.MathUtils.lerp(fullBlock, sheetTick, readingProgress);
|
|
const foldX = clothFoldX(gutter);
|
|
|
|
addCoverAssembly(pageWidth, coverDepth, coverThickness);
|
|
addSplinePageBlock(-1, pageWidth, pageDepth, leftThickness, foldX);
|
|
addSplinePageBlock(1, pageWidth, pageDepth, rightThickness, foldX);
|
|
addPageLayerLines(-1, pageWidth, pageDepth, leftThickness, foldX);
|
|
addPageLayerLines(1, pageWidth, pageDepth, rightThickness, foldX);
|
|
addClothSpine(pageDepth, gutter);
|
|
}
|
|
|
|
function clearGroup(group) {
|
|
while (group.children.length) {
|
|
const child = group.children.pop();
|
|
child.geometry?.dispose();
|
|
if (Array.isArray(child.material)) {
|
|
child.material.forEach((material) => material.dispose?.());
|
|
}
|
|
}
|
|
}
|
|
|
|
function addCoverAssembly(pageWidth, depth, thickness) {
|
|
const cover = new THREE.Mesh(createCoverAssemblyGeometry(pageWidth, depth, thickness), materials.cover);
|
|
book.add(cover);
|
|
}
|
|
|
|
function createCoverAssemblyGeometry(pageWidth, depth, thickness) {
|
|
const overhang = 0.055;
|
|
const hingeX = 0.18;
|
|
const centerX = 0.095;
|
|
const boardTopY = 0.023;
|
|
const centerTopY = -0.002;
|
|
const section = [
|
|
{ x: -pageWidth - overhang, y: boardTopY },
|
|
{ x: -hingeX, y: boardTopY },
|
|
{ x: -centerX, y: centerTopY },
|
|
{ x: centerX, y: centerTopY },
|
|
{ x: hingeX, y: boardTopY },
|
|
{ x: pageWidth + overhang, y: boardTopY }
|
|
];
|
|
const positions = [];
|
|
const uvs = [];
|
|
const indices = [];
|
|
const frontTop = [];
|
|
const backTop = [];
|
|
const frontBottom = [];
|
|
const backBottom = [];
|
|
|
|
const push = (x, y, z, u, v) => {
|
|
const index = positions.length / 3;
|
|
positions.push(x, y, z);
|
|
uvs.push(u, v);
|
|
return index;
|
|
};
|
|
|
|
section.forEach((point, index) => {
|
|
const u = index / (section.length - 1);
|
|
frontTop[index] = push(point.x, point.y, depth * 0.5, u, 1);
|
|
backTop[index] = push(point.x, point.y, -depth * 0.5, u, 0);
|
|
frontBottom[index] = push(point.x, point.y - thickness, depth * 0.5, u, 1);
|
|
backBottom[index] = push(point.x, point.y - thickness, -depth * 0.5, u, 0);
|
|
});
|
|
|
|
for (let i = 0; i < section.length - 1; i += 1) {
|
|
indices.push(frontTop[i], backTop[i], frontTop[i + 1], frontTop[i + 1], backTop[i], backTop[i + 1]);
|
|
indices.push(frontBottom[i], frontBottom[i + 1], backBottom[i], frontBottom[i + 1], backBottom[i + 1], backBottom[i]);
|
|
indices.push(frontTop[i], frontTop[i + 1], frontBottom[i], frontTop[i + 1], frontBottom[i + 1], frontBottom[i]);
|
|
indices.push(backTop[i], backBottom[i], backTop[i + 1], backTop[i + 1], backBottom[i], backBottom[i + 1]);
|
|
}
|
|
|
|
const last = section.length - 1;
|
|
indices.push(frontTop[0], frontBottom[0], backTop[0], backTop[0], frontBottom[0], backBottom[0]);
|
|
indices.push(frontTop[last], backTop[last], frontBottom[last], backTop[last], backBottom[last], frontBottom[last]);
|
|
|
|
const geometry = new THREE.BufferGeometry();
|
|
geometry.setIndex(indices);
|
|
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
|
|
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
|
|
geometry.computeVertexNormals();
|
|
return geometry;
|
|
}
|
|
|
|
function addSplinePageBlock(side, width, depth, thickness, foldX) {
|
|
const block = new THREE.Mesh(createSplinePageBlockGeometry(side, width, depth, thickness, foldX), side < 0 ? materials.pagesLeft : materials.pagesRight);
|
|
book.add(block);
|
|
}
|
|
|
|
function addPageLayerLines(side, width, depth, thickness, foldX) {
|
|
const material = new THREE.LineBasicMaterial({ color: 0x8f7750, transparent: true, opacity: 0.55 });
|
|
const z = depth * 0.5 + 0.006;
|
|
const lineCount = Math.max(1, Math.round(thickness / 0.018));
|
|
for (let layer = 1; layer < lineCount; layer += 1) {
|
|
const t = layer / lineCount;
|
|
const points = [];
|
|
for (let i = 0; i <= 40; i += 1) {
|
|
const u = 0.04 + 0.96 * (i / 40);
|
|
const top = pageBlockTopY(thickness, u, 0.5);
|
|
const bottom = pageBlockBottomY(thickness, u, 0.5);
|
|
points.push(new THREE.Vector3(pageX(side, foldX, width, u, 0.5), bottom + (top - bottom) * t, z));
|
|
}
|
|
book.add(new THREE.Line(new THREE.BufferGeometry().setFromPoints(points), material));
|
|
}
|
|
}
|
|
|
|
function clothFoldX(gutter) {
|
|
const spineTravel = gutter * 0.52;
|
|
return THREE.MathUtils.lerp(-spineTravel, spineTravel, readingProgress);
|
|
}
|
|
|
|
function addClothSpine(depth, gutter) {
|
|
const geometry = createClothSpineGeometry(depth, gutter);
|
|
const spine = new THREE.Mesh(geometry, materials.spine);
|
|
book.add(spine);
|
|
}
|
|
|
|
function createClothSpineGeometry(depth, gutter) {
|
|
const columns = 24;
|
|
const rows = 18;
|
|
const positions = [];
|
|
const uvs = [];
|
|
const indices = [];
|
|
const radiusX = gutter * 0.52;
|
|
const radiusY = 0.04;
|
|
const baseY = -0.004;
|
|
|
|
for (let row = 0; row <= rows; row += 1) {
|
|
const v = row / rows;
|
|
const z = (v - 0.5) * depth * 0.94;
|
|
for (let column = 0; column <= columns; column += 1) {
|
|
const u = column / columns;
|
|
const theta = Math.PI * (1 - u);
|
|
const x = Math.cos(theta) * radiusX;
|
|
const y = baseY + Math.sin(theta) * radiusY + x * 0.12;
|
|
const exposedY = Math.min(y, 0.038);
|
|
const lengthSag = -0.006 * Math.sin(Math.PI * v);
|
|
positions.push(x, exposedY + lengthSag, z);
|
|
uvs.push(u, v);
|
|
}
|
|
}
|
|
|
|
for (let row = 0; row < rows; row += 1) {
|
|
for (let column = 0; column < columns; column += 1) {
|
|
const a = row * (columns + 1) + column;
|
|
const b = a + 1;
|
|
const c = a + columns + 1;
|
|
const d = c + 1;
|
|
indices.push(a, c, b, b, c, d);
|
|
}
|
|
}
|
|
|
|
const geometry = new THREE.BufferGeometry();
|
|
geometry.setIndex(indices);
|
|
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
|
|
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
|
|
geometry.computeVertexNormals();
|
|
return geometry;
|
|
}
|
|
|
|
function pageBlockTopY(thickness, u, v) {
|
|
const hingeWidth = 0.105;
|
|
const hinge = THREE.MathUtils.clamp(u / hingeWidth, 0, 1);
|
|
const t = easeOutCubic(hinge);
|
|
const sewnY = 0.066;
|
|
const stackY = 0.032 + thickness;
|
|
const flatCrown = 0.006 * Math.sin(Math.PI * v);
|
|
const foreCurl = 0.006 * smoothstep(THREE.MathUtils.clamp((u - 0.88) / 0.12, 0, 1));
|
|
return sewnY * (1 - t) + (stackY + flatCrown + foreCurl) * t;
|
|
}
|
|
|
|
function pageBlockBottomY(thickness, u, v) {
|
|
const hingeWidth = 0.105;
|
|
const hinge = THREE.MathUtils.clamp(u / hingeWidth, 0, 1);
|
|
const t = easeOutCubic(hinge);
|
|
const sewnY = 0.026;
|
|
const stackY = 0.026;
|
|
return sewnY * (1 - t) + stackY * t;
|
|
}
|
|
|
|
function smoothstep(value) {
|
|
return value * value * (3 - 2 * value);
|
|
}
|
|
|
|
function easeOutCubic(value) {
|
|
return 1 - Math.pow(1 - value, 3);
|
|
}
|
|
|
|
function pageWidthAtDepth(width, v) {
|
|
return width;
|
|
}
|
|
|
|
function pageX(side, foldX, width, u, v = 0.5) {
|
|
const foreX = side * pageWidthAtDepth(width, v);
|
|
return foldX * (1 - u) + foreX * u;
|
|
}
|
|
|
|
function createSplinePageBlockGeometry(side, width, depth, thickness, foldX) {
|
|
const columns = 36;
|
|
const rows = 36;
|
|
const positions = [];
|
|
const uvs = [];
|
|
const indices = [];
|
|
const top = [];
|
|
const bottom = [];
|
|
|
|
const push = (x, y, z, u, v) => {
|
|
const index = positions.length / 3;
|
|
positions.push(x, y, z);
|
|
uvs.push(u, v);
|
|
return index;
|
|
};
|
|
|
|
for (let row = 0; row <= rows; row += 1) {
|
|
const v = row / rows;
|
|
top[row] = [];
|
|
bottom[row] = [];
|
|
for (let column = 0; column <= columns; column += 1) {
|
|
const u = column / columns;
|
|
const z = (v - 0.5) * depth;
|
|
top[row][column] = push(pageX(side, foldX, width, u, v), pageBlockTopY(thickness, u, v), z, u, v);
|
|
bottom[row][column] = push(pageX(side, foldX, width, u, v), pageBlockBottomY(thickness, u, v), z, u, v);
|
|
}
|
|
}
|
|
|
|
for (let row = 0; row < rows; row += 1) {
|
|
for (let column = 0; column < columns; column += 1) {
|
|
indices.push(top[row][column], top[row + 1][column], top[row][column + 1]);
|
|
indices.push(top[row][column + 1], top[row + 1][column], top[row + 1][column + 1]);
|
|
indices.push(bottom[row][column], bottom[row][column + 1], bottom[row + 1][column]);
|
|
indices.push(bottom[row][column + 1], bottom[row + 1][column + 1], bottom[row + 1][column]);
|
|
}
|
|
}
|
|
|
|
for (let row = 0; row < rows; row += 1) {
|
|
indices.push(top[row][0], bottom[row][0], top[row + 1][0], top[row + 1][0], bottom[row][0], bottom[row + 1][0]);
|
|
indices.push(top[row][columns], top[row + 1][columns], bottom[row][columns], top[row + 1][columns], bottom[row + 1][columns], bottom[row][columns]);
|
|
}
|
|
|
|
for (let column = 0; column < columns; column += 1) {
|
|
indices.push(top[0][column], top[0][column + 1], bottom[0][column], top[0][column + 1], bottom[0][column + 1], bottom[0][column]);
|
|
indices.push(top[rows][column], bottom[rows][column], top[rows][column + 1], top[rows][column + 1], bottom[rows][column], bottom[rows][column + 1]);
|
|
}
|
|
|
|
const geometry = new THREE.BufferGeometry();
|
|
geometry.setIndex(indices);
|
|
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
|
|
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
|
|
geometry.computeVertexNormals();
|
|
return geometry;
|
|
}
|
|
|
|
function resize() {
|
|
const width = window.innerWidth;
|
|
const height = window.innerHeight;
|
|
renderer.setSize(width, height, false);
|
|
camera.aspect = width / height;
|
|
camera.updateProjectionMatrix();
|
|
}
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
if (urlParams.get('animate') === '1') {
|
|
const t = performance.now() * 0.00035;
|
|
setReadingProgress(0.5 + Math.sin(t) * 0.48);
|
|
}
|
|
controls.update();
|
|
renderer.render(scene, camera);
|
|
}
|