670 lines
24 KiB
JavaScript
670 lines
24 KiB
JavaScript
import * as THREE from 'three';
|
|
import { ENTRIES } from '../data/entries.js';
|
|
import { PAGE_W, PAGE_H, HOLE_U, acquirePageTextures, releasePageTextures, getPlaceholderTextures, prefetchPageTextures, makeTwoSidedMaterial } from '../textures/pages.js';
|
|
import { clamp, easeOutCubic, easeInOutCubic } from '../utils/easing.js';
|
|
|
|
const RING_R = 0.085;
|
|
const RING_TUBE = 0.0115;
|
|
const STACK_GAP = 0.004;
|
|
const TOP_LIFT = 0.02; // 顶层左右两页高出栈内的距离
|
|
const FLIP_LIFT = 0.028; // 翻页过程中的最大抬高（略高于顶层静止高度）
|
|
const PAGE_GAP = 0.02; // 页内缘离书脊的小空隙
|
|
|
|
function makeLeatherTexture({ emblem = false } = {}) {
|
|
const w = 512, h = 640;
|
|
const c = document.createElement('canvas');
|
|
c.width = w; c.height = h;
|
|
const ctx = c.getContext('2d');
|
|
|
|
// 小牛皮：深棕色，平滑细腻的纯色
|
|
const g = ctx.createLinearGradient(0, 0, w, h);
|
|
g.addColorStop(0, '#6e4527');
|
|
g.addColorStop(0.5, '#5f3a20');
|
|
g.addColorStop(1, '#4f2f19');
|
|
ctx.fillStyle = g;
|
|
ctx.fillRect(0, 0, w, h);
|
|
|
|
// 极细腻的天然纹理（小牛皮几乎无颗粒，只有细微毛孔）
|
|
for (let i = 0; i < 16000; i++) {
|
|
const x = Math.random() * w, y = Math.random() * h;
|
|
const s = Math.random() * 1.2 + 0.3;
|
|
ctx.fillStyle = Math.random() > 0.5 ? 'rgba(28,14,6,0.06)' : 'rgba(205,165,125,0.05)';
|
|
ctx.beginPath();
|
|
ctx.ellipse(x, y, s, s * 0.7, Math.random() * Math.PI, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
|
|
// 极淡的天然色差
|
|
for (let i = 0; i < 40; i++) {
|
|
const x = Math.random() * w, y = Math.random() * h, r = Math.random() * 120 + 40;
|
|
const rg = ctx.createRadialGradient(x, y, 0, x, y, r);
|
|
rg.addColorStop(0, 'rgba(20,8,3,0.06)');
|
|
rg.addColorStop(1, 'rgba(0,0,0,0)');
|
|
ctx.fillStyle = rg;
|
|
ctx.fillRect(0, 0, w, h);
|
|
}
|
|
|
|
const tex = new THREE.CanvasTexture(c);
|
|
tex.colorSpace = THREE.SRGBColorSpace;
|
|
tex.anisotropy = 8;
|
|
return tex;
|
|
}
|
|
|
|
// 内侧绒面（粗糙、哑光、模糊绒毛）
|
|
function makeSuedeTexture() {
|
|
const w = 1024, h = 1280;
|
|
const c = document.createElement('canvas');
|
|
c.width = w; c.height = h;
|
|
const ctx = c.getContext('2d');
|
|
const g = ctx.createLinearGradient(0, 0, w, h);
|
|
g.addColorStop(0, '#a8825c');
|
|
g.addColorStop(0.5, '#96724e');
|
|
g.addColorStop(1, '#866244');
|
|
ctx.fillStyle = g;
|
|
ctx.fillRect(0, 0, w, h);
|
|
// 密集绒毛噪点（更细更密）
|
|
for (let i = 0; i < 420000; i++) {
|
|
const x = Math.random() * w, y = Math.random() * h;
|
|
ctx.fillStyle = Math.random() > 0.5 ? 'rgba(40,22,10,0.10)' : 'rgba(230,200,160,0.08)';
|
|
ctx.fillRect(x, y, Math.random() * 1.1 + 0.22, Math.random() * 1.1 + 0.22);
|
|
}
|
|
// 绒毛短划痕（更细密）
|
|
ctx.strokeStyle = 'rgba(30,16,8,0.10)';
|
|
ctx.lineWidth = 0.65;
|
|
for (let i = 0; i < 70000; i++) {
|
|
const x = Math.random() * w, y = Math.random() * h, a = Math.random() * Math.PI, l = Math.random() * 7 + 1.5;
|
|
ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + Math.cos(a) * l, y + Math.sin(a) * l); ctx.stroke();
|
|
}
|
|
const edge = ctx.createRadialGradient(w / 2, h / 2, Math.min(w, h) * 0.4, w / 2, h / 2, Math.max(w, h) * 0.72);
|
|
edge.addColorStop(0, 'rgba(0,0,0,0)');
|
|
edge.addColorStop(1, 'rgba(50,28,12,0.18)');
|
|
ctx.fillStyle = edge;
|
|
ctx.fillRect(0, 0, w, h);
|
|
const tex = new THREE.CanvasTexture(c);
|
|
tex.colorSpace = THREE.SRGBColorSpace;
|
|
tex.anisotropy = 16;
|
|
return tex;
|
|
}
|
|
|
|
// 圆角矩形轮廓（直线段 + 圆弧段都用 lineTo 细分，正反面/皮边共享同一轮廓）
|
|
function roundedRectShape(w, h, r, edgeSeg = 16, arcSeg = 10) {
|
|
const hw = w / 2, hh = h / 2;
|
|
const s = new THREE.Shape();
|
|
s.moveTo(-hw + r, hh);
|
|
// 上边
|
|
for (let i = 1; i <= edgeSeg; i++) s.lineTo(-hw + r + (w - 2 * r) * i / edgeSeg, hh);
|
|
// 右上角：90° → 0°
|
|
for (let i = 1; i <= arcSeg; i++) { const a = Math.PI / 2 - (Math.PI / 2) * i / arcSeg; s.lineTo(hw - r + r * Math.cos(a), hh - r + r * Math.sin(a)); }
|
|
// 右边
|
|
for (let i = 1; i <= edgeSeg; i++) s.lineTo(hw, hh - r - (h - 2 * r) * i / edgeSeg);
|
|
// 右下角：0° → -90°
|
|
for (let i = 1; i <= arcSeg; i++) { const a = 0 - (Math.PI / 2) * i / arcSeg; s.lineTo(hw - r + r * Math.cos(a), -hh + r + r * Math.sin(a)); }
|
|
// 下边
|
|
for (let i = 1; i <= edgeSeg; i++) s.lineTo(hw - r - (w - 2 * r) * i / edgeSeg, -hh);
|
|
// 左下角：-90° → -180°
|
|
for (let i = 1; i <= arcSeg; i++) { const a = -Math.PI / 2 - (Math.PI / 2) * i / arcSeg; s.lineTo(-hw + r + r * Math.cos(a), -hh + r + r * Math.sin(a)); }
|
|
// 左边
|
|
for (let i = 1; i <= edgeSeg; i++) s.lineTo(-hw, -hh + r + (h - 2 * r) * i / edgeSeg);
|
|
// 左上角：180° → 90°
|
|
for (let i = 1; i <= arcSeg; i++) { const a = Math.PI - (Math.PI / 2) * i / arcSeg; s.lineTo(-hw + r + r * Math.cos(a), hh - r + r * Math.sin(a)); }
|
|
s.closePath();
|
|
return s;
|
|
}
|
|
|
|
// 软皮曲面：ShapeGeometry 三角化（圆角正确、无缺口）+ 书脊处弧度弯曲
|
|
function makeLeatherSurface(w, h, crXY, curve, flip) {
|
|
// 规则网格（含内部顶点，曲面平滑无对角褶痕）+ 角区收缩到圆弧
|
|
const segX = 64, segY = 48;
|
|
const hw = w / 2, hh = h / 2;
|
|
const bx = hw - crXY, by = hh - crXY;
|
|
const sigma = 0.5;
|
|
const pos = [], uvs = [], idx = [];
|
|
const g = [];
|
|
|
|
for (let j = 0; j <= segY; j++) {
|
|
g[j] = [];
|
|
const y = -hh + (j / segY) * h;
|
|
for (let i = 0; i <= segX; i++) {
|
|
const x = -hw + (i / segX) * w;
|
|
let px = x, py = y;
|
|
const ax = Math.abs(x), ay = Math.abs(y);
|
|
// 角区：外部点投影到圆弧上（内部点保留）
|
|
if (ax > bx && ay > by) {
|
|
const dx = ax - bx, dy = ay - by;
|
|
const dl = Math.sqrt(dx * dx + dy * dy);
|
|
if (dl > crXY) {
|
|
const k = crXY / dl;
|
|
px = Math.sign(x) * (bx + dx * k);
|
|
py = Math.sign(y) * (by + dy * k);
|
|
}
|
|
}
|
|
const v = py / hh;
|
|
const z = -curve * Math.exp(-(px * px) / (2 * sigma * sigma)) * (1 - 0.25 * v * v);
|
|
g[j].push(pos.length / 3);
|
|
pos.push(px, py, z);
|
|
uvs.push(flip ? (hw - px) / w : (px + hw) / w, (py + hh) / h);
|
|
}
|
|
}
|
|
|
|
for (let j = 0; j < segY; j++) {
|
|
for (let i = 0; i < segX; i++) {
|
|
const a = g[j][i], b = g[j][i + 1], c = g[j + 1][i], d = g[j + 1][i + 1];
|
|
if (flip) idx.push(a, c, b, b, c, d);
|
|
else idx.push(a, b, c, b, d, c);
|
|
}
|
|
}
|
|
|
|
const geo = new THREE.BufferGeometry();
|
|
geo.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
|
|
geo.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
|
|
geo.setIndex(idx);
|
|
geo.computeVertexNormals();
|
|
return geo;
|
|
}
|
|
|
|
// 皮边：与曲面共享同一圆角矩形轮廓的窄侧壁（封闭厚度，纯色）
|
|
function makeSideRim(w, h, crXY, thick, curve) {
|
|
const shape = roundedRectShape(w, h, crXY);
|
|
const pts = shape.getPoints();
|
|
const hh = h / 2, sigma = 0.5;
|
|
const pos = [], idx = [];
|
|
for (let i = 0; i < pts.length; i++) {
|
|
const px = pts[i].x, py = pts[i].y;
|
|
const v = py / hh;
|
|
const z = -curve * Math.exp(-(px * px) / (2 * sigma * sigma)) * (1 - 0.25 * v * v);
|
|
pos.push(px, py, z - thick / 2, px, py, z + thick / 2);
|
|
if (i > 0) {
|
|
const a = (i - 1) * 2, b = a + 1, c = i * 2, d = i * 2 + 1;
|
|
idx.push(a, c, b, b, c, d);
|
|
}
|
|
}
|
|
const n = pts.length;
|
|
idx.push((n - 1) * 2, 0, (n - 1) * 2 + 1, (n - 1) * 2 + 1, 0, 1);
|
|
const geo = new THREE.BufferGeometry();
|
|
geo.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
|
|
geo.setIndex(idx);
|
|
geo.computeVertexNormals();
|
|
return geo;
|
|
}
|
|
|
|
// 皮革法线贴图：由卵石颗粒 + 皱纹 + 缝线凹槽的高度图生成
|
|
function makeLeatherNormalMap() {
|
|
const w = 512, h = 640;
|
|
const c = document.createElement('canvas');
|
|
c.width = w; c.height = h;
|
|
const ctx = c.getContext('2d', { willReadFrequently: true });
|
|
// 平面基准
|
|
ctx.fillStyle = 'rgb(128,128,128)';
|
|
ctx.fillRect(0, 0, w, h);
|
|
// 极细颗粒（光滑小牛皮：几乎无凹凸）
|
|
for (let i = 0; i < 30000; i++) {
|
|
const x = Math.random() * w, y = Math.random() * h, r = Math.random() * 1.5 + 0.4;
|
|
const g = ctx.createRadialGradient(x, y, 0, x, y, r);
|
|
g.addColorStop(0, 'rgba(255,255,255,0.2)');
|
|
g.addColorStop(0.65, 'rgba(128,128,128,0.03)');
|
|
g.addColorStop(1, 'rgba(0,0,0,0.16)');
|
|
ctx.fillStyle = g;
|
|
ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill();
|
|
}
|
|
// 高度图 → 法线贴图
|
|
const img = ctx.getImageData(0, 0, w, h);
|
|
const out = ctx.createImageData(w, h);
|
|
const S = 1.6;
|
|
const hAt = (yy, xx) => img.data[(Math.min(h - 1, Math.max(0, yy)) * w + Math.min(w - 1, Math.max(0, xx))) * 4];
|
|
for (let y = 0; y < h; y++) {
|
|
for (let x = 0; x < w; x++) {
|
|
const l = hAt(y, x - 1), r = hAt(y, x + 1), u = hAt(y - 1, x), d = hAt(y + 1, x);
|
|
const nx = (l - r) * S;
|
|
const ny = (u - d) * S;
|
|
const nz = 255;
|
|
const len = Math.sqrt(nx * nx + ny * ny + nz * nz);
|
|
const o = (y * w + x) * 4;
|
|
out.data[o] = (nx / len * 0.5 + 0.5) * 255;
|
|
out.data[o + 1] = (ny / len * 0.5 + 0.5) * 255;
|
|
out.data[o + 2] = (nz / len * 0.5 + 0.5) * 255;
|
|
out.data[o + 3] = 255;
|
|
}
|
|
}
|
|
ctx.putImageData(out, 0, 0);
|
|
const tex = new THREE.CanvasTexture(c);
|
|
tex.colorSpace = THREE.NoColorSpace;
|
|
tex.anisotropy = 8;
|
|
return tex;
|
|
}
|
|
|
|
// 内侧绒面法线：密集细绒毛（高频噪点）
|
|
function makeSuedeNormalMap() {
|
|
const w = 512, h = 640;
|
|
const c = document.createElement('canvas');
|
|
c.width = w; c.height = h;
|
|
const ctx = c.getContext('2d', { willReadFrequently: true });
|
|
ctx.fillStyle = 'rgb(128,128,128)';
|
|
ctx.fillRect(0, 0, w, h);
|
|
// 密集绒毛噪点
|
|
const img = ctx.createImageData(w, h);
|
|
for (let i = 0; i < img.data.length; i += 4) {
|
|
const v = 128 + (Math.random() - 0.5) * 60;
|
|
img.data[i] = img.data[i + 1] = img.data[i + 2] = v;
|
|
img.data[i + 3] = 255;
|
|
}
|
|
ctx.putImageData(img, 0, 0);
|
|
// 高度 → 法线
|
|
const src = ctx.getImageData(0, 0, w, h);
|
|
const out = ctx.createImageData(w, h);
|
|
const S = 3.2;
|
|
const hAt = (yy, xx) => src.data[(Math.min(h - 1, Math.max(0, yy)) * w + Math.min(w - 1, Math.max(0, xx))) * 4];
|
|
for (let y = 0; y < h; y++) {
|
|
for (let x = 0; x < w; x++) {
|
|
const l = hAt(y, x - 1), r = hAt(y, x + 1), u = hAt(y - 1, x), d = hAt(y + 1, x);
|
|
const nx = (l - r) * S, ny = (u - d) * S, nz = 255;
|
|
const len = Math.sqrt(nx * nx + ny * ny + nz * nz);
|
|
const o = (y * w + x) * 4;
|
|
out.data[o] = (nx / len * 0.5 + 0.5) * 255;
|
|
out.data[o + 1] = (ny / len * 0.5 + 0.5) * 255;
|
|
out.data[o + 2] = (nz / len * 0.5 + 0.5) * 255;
|
|
out.data[o + 3] = 255;
|
|
}
|
|
}
|
|
ctx.putImageData(out, 0, 0);
|
|
const tex = new THREE.CanvasTexture(c);
|
|
tex.colorSpace = THREE.NoColorSpace;
|
|
tex.anisotropy = 16;
|
|
return tex;
|
|
}
|
|
|
|
export class Binder {
|
|
constructor() {
|
|
this.group = new THREE.Group();
|
|
this.pages = [];
|
|
this.current = 0;
|
|
this.flip = null; // { index, from, to, t, duration }
|
|
this.resetTween = null; // 回卷重置动画
|
|
this.onChange = null;
|
|
|
|
this.suedeTex = makeSuedeTexture();
|
|
this.suedeNormalTex = makeSuedeNormalMap();
|
|
this.placeholder = getPlaceholderTextures();
|
|
this._textured = new Set();
|
|
this._buildCovers();
|
|
this._buildHingePlate();
|
|
this._buildRings();
|
|
this._buildPages();
|
|
|
|
// 微微后仰，像阅读架
|
|
this.group.rotation.x = -0.09;
|
|
}
|
|
|
|
_buildCovers() {
|
|
const coverW = PAGE_W + 0.2;
|
|
const coverH = PAGE_H + 0.2;
|
|
const spineW = 0.12;
|
|
const thick = 0.017; // 牛皮厚度
|
|
|
|
// 内侧：粗糙绒面（哑光）——外皮不渲染，只保留内侧
|
|
const innerMat = new THREE.MeshStandardMaterial({
|
|
map: this.suedeTex,
|
|
normalMap: this.suedeNormalTex,
|
|
normalScale: new THREE.Vector2(1.1, 1.1),
|
|
roughness: 0.92,
|
|
metalness: 0.0,
|
|
});
|
|
|
|
// 一张牛皮：仅内侧曲面 + 封闭皮边
|
|
const totalW = coverW * 2 + spineW;
|
|
const frontGeo = makeLeatherSurface(totalW, coverH, 0.06, 0.07, false);
|
|
const rimGeo = makeSideRim(totalW, coverH, 0.06, thick, 0.07);
|
|
const rimMat = new THREE.MeshStandardMaterial({ color: 0x6b4524, roughness: 0.7, metalness: 0.0, side: THREE.DoubleSide });
|
|
|
|
const front = new THREE.Mesh(frontGeo, innerMat); // +z 朝书页（绒面）
|
|
front.position.z = thick / 2;
|
|
const rim = new THREE.Mesh(rimGeo, rimMat);
|
|
|
|
this.cover = new THREE.Group();
|
|
this.cover.add(front, rim);
|
|
this.cover.position.set(0, 0, -0.095);
|
|
front.receiveShadow = rim.receiveShadow = true;
|
|
front.castShadow = rim.castShadow = true;
|
|
|
|
this.group.add(this.cover);
|
|
}
|
|
|
|
_buildHingePlate() {
|
|
// 金属连接片：薄薄地贴合在牛皮书脊内面上，用于连接铁环
|
|
const mat = new THREE.MeshStandardMaterial({
|
|
color: 0xd8d2c6, metalness: 0.95, roughness: 0.25,
|
|
});
|
|
// 薄片（有可见厚度的金属条），贴在牛皮内面（书脊处曲面 z≈-0.157）上
|
|
const plate = new THREE.Mesh(new THREE.BoxGeometry(0.09, 1.95, 0.04), mat);
|
|
plate.position.set(0, 0, -0.137);
|
|
plate.castShadow = true;
|
|
plate.receiveShadow = true;
|
|
|
|
// 铆钉：把薄片钉在牛皮上（覆盖新的铁环范围 ±0.896）
|
|
const rivetGeo = new THREE.SphereGeometry(0.013, 8, 6);
|
|
const rivets = [];
|
|
for (const ry of [-0.78, -0.39, 0, 0.39, 0.78]) {
|
|
const rivet = new THREE.Mesh(rivetGeo, mat);
|
|
rivet.position.set(0, ry, -0.116);
|
|
rivet.scale.z = 0.5;
|
|
rivet.castShadow = true;
|
|
rivets.push(rivet);
|
|
}
|
|
|
|
this.hingePlate = new THREE.Group();
|
|
this.hingePlate.add(plate, ...rivets);
|
|
this.group.add(this.hingePlate);
|
|
}
|
|
|
|
_buildRings() {
|
|
const mat = new THREE.MeshStandardMaterial({
|
|
color: 0xd4d7dc, metalness: 0.95, roughness: 0.2,
|
|
});
|
|
// 更平滑的活页环
|
|
const geo = new THREE.TorusGeometry(RING_R, RING_TUBE, 12, 24);
|
|
this.rings = [];
|
|
for (const u of HOLE_U) {
|
|
const y = (0.5 - u) * PAGE_H;
|
|
const ring = new THREE.Mesh(geo, mat);
|
|
ring.rotation.x = Math.PI / 2; // 环面落在 XZ 平面（绕书脊）
|
|
ring.position.set(0, y, 0);
|
|
ring.castShadow = true;
|
|
this.rings.push(ring);
|
|
this.group.add(ring);
|
|
}
|
|
}
|
|
|
|
_makePageGeometry(segX, segY) {
|
|
// 纯平面页（无自然弧度）：页内缘离书脊留出小空隙，左右页不紧贴
|
|
const geo = new THREE.PlaneGeometry(PAGE_W, PAGE_H, segX, segY);
|
|
geo.translate(PAGE_W / 2 + PAGE_GAP, 0, 0);
|
|
return geo;
|
|
}
|
|
|
|
_ensureHiGeo(p) {
|
|
if (!p.hiGeo) {
|
|
p.hiGeo = this._makePageGeometry(96, 8);
|
|
p.hiBase = Float32Array.from(p.hiGeo.attributes.position.array);
|
|
}
|
|
}
|
|
|
|
_buildPages() {
|
|
// 共享极简几何（所有栈内页相同，只露边缘无需弯曲）
|
|
this.loGeo = this._makePageGeometry(1, 1);
|
|
|
|
ENTRIES.forEach((entry, i) => {
|
|
// 单 mesh + 双面材质：正面登记卡、背面素描（gl_FrontFacing 自动选择）
|
|
// 活页孔用 alphaTest 直接丢弃透明像素（不启用 transparent，避免透明+双面拆两次 draw call）
|
|
const mat = makeTwoSidedMaterial(this.placeholder.front, this.placeholder.back, {
|
|
alphaTest: 0.5,
|
|
});
|
|
const mesh = new THREE.Mesh(this.loGeo, mat); // 初始为栈内页，用极简几何
|
|
mesh.castShadow = false; // 由 _restackState 依据是否为顶层页控制
|
|
|
|
const g = new THREE.Group();
|
|
g.add(mesh);
|
|
g.userData.index = i;
|
|
g.userData.entry = entry;
|
|
|
|
this.pages.push({
|
|
group: g,
|
|
hiGeo: null, // 高分段几何延迟创建（成为顶层页时才需要弯曲）
|
|
hiBase: null,
|
|
loGeo: this.loGeo,
|
|
material: mat,
|
|
mesh,
|
|
isPlaceholder: true,
|
|
angle: 0,
|
|
y: 0,
|
|
z: 0,
|
|
targetZ: 0,
|
|
});
|
|
|
|
this.group.add(g);
|
|
});
|
|
|
|
this._restack(true);
|
|
}
|
|
|
|
// 各页休息位置：角度 + 目标 z（堆叠深度）；z 由 update 里平滑动画过渡
|
|
_restack(instant = false) {
|
|
this.pages.forEach((p, j) => {
|
|
const angle = j < this.current ? -Math.PI : 0;
|
|
p.angle = angle;
|
|
p.group.rotation.y = angle;
|
|
});
|
|
this._restackState(this.current, instant);
|
|
this._updateCurvature();
|
|
}
|
|
|
|
// 堆叠状态（z 目标/亮度/投影/几何 LOD），不碰角度；可传未来 current 实现与翻页并行
|
|
_restackState(cur, instant = false) {
|
|
this.pages.forEach((p, j) => {
|
|
const onTop = (j === cur || j === cur - 1);
|
|
const depth = j < cur ? (cur - 1 - j) : (j - cur);
|
|
p.targetZ = onTop ? TOP_LIFT : -depth * STACK_GAP;
|
|
if (instant) {
|
|
p.z = p.targetZ;
|
|
p.group.position.z = p.z;
|
|
}
|
|
p.group.position.y = 0;
|
|
p.group.position.x = 0;
|
|
const dim = 1 - Math.min(depth * 0.06, 0.22);
|
|
p.material.color.setScalar(dim);
|
|
p.mesh.castShadow = onTop;
|
|
if (onTop) {
|
|
this._ensureHiGeo(p);
|
|
if (p.mesh.geometry !== p.hiGeo) p.mesh.geometry = p.hiGeo;
|
|
} else if (p.mesh.geometry !== p.loGeo) {
|
|
p.mesh.geometry = p.loGeo;
|
|
}
|
|
});
|
|
this._ensureTextures();
|
|
}
|
|
|
|
// 需要真实纹理的窗口：左右可见页 + 翻页时会露出的下一层页（按需，首屏最小）
|
|
_pageWindow() {
|
|
const len = this.pages.length;
|
|
const win = new Set();
|
|
// 左页 + 右页（当前）
|
|
for (let d = -1; d <= 0; d++) {
|
|
const i = this.current + d;
|
|
if (i >= 0 && i < len) win.add(i);
|
|
}
|
|
// 向前翻页会露出的下一层右页
|
|
const fwd = this.current + 1;
|
|
if (fwd >= 0 && fwd < len) win.add(fwd);
|
|
// 向后翻页会露出的下一层左页
|
|
const bwd = this.current - 2;
|
|
if (bwd >= 0 && bwd < len) win.add(bwd);
|
|
return win;
|
|
}
|
|
|
|
// 懒加载：窗口内页生成真实纹理，窗口外释放回占位纹理
|
|
_ensureTextures() {
|
|
const win = this._pageWindow();
|
|
const prev = this._textured;
|
|
for (const i of win) {
|
|
if (prev.has(i)) continue;
|
|
const p = this.pages[i];
|
|
const { front, back } = acquirePageTextures(ENTRIES[i]);
|
|
p.material.setPageMaps(front, back);
|
|
p.isPlaceholder = false;
|
|
prev.add(i);
|
|
}
|
|
for (const i of [...prev]) {
|
|
if (win.has(i)) continue;
|
|
const p = this.pages[i];
|
|
releasePageTextures(ENTRIES[i]);
|
|
p.material.setPageMaps(this.placeholder.front, this.placeholder.back);
|
|
p.isPlaceholder = true;
|
|
prev.delete(i);
|
|
}
|
|
}
|
|
|
|
// 预生成即将进入纹理窗口的页：推迟到下一帧，避免占用点击这一帧造成卡顿
|
|
_prefetchForFlip(index) {
|
|
if (index < 0 || index >= ENTRIES.length) return;
|
|
requestAnimationFrame(() => prefetchPageTextures(ENTRIES[index]));
|
|
}
|
|
|
|
_updateCurvature(index = null) {
|
|
// 翻页时整页柔软弧弯：自由边最高、中段有“腹”、书脊侧贴环；顶边略强于底边；静止时完全平整
|
|
const pages = index === null ? this.pages : [this.pages[index]];
|
|
pages.forEach((p) => {
|
|
if (!p.hiGeo) return; // 栈内页未创建高分段几何，跳过
|
|
// 弯曲只作用于高分段几何（顶层/翻页页）；栈内极简几何不弯曲
|
|
const pos = p.hiGeo.attributes.position;
|
|
const arr = pos.array;
|
|
const theta = Math.abs(p.angle); // 0..π
|
|
const c = Math.sin(theta); // 0 静止，1 翻页中途
|
|
const A = 0.58 * c; // 抬升幅度（整页弧）
|
|
for (let i = 0; i < arr.length; i += 3) {
|
|
const x = p.hiBase[i];
|
|
const y = p.hiBase[i + 1];
|
|
const s = Math.max(0, x - PAGE_GAP); // 距页内缘 0..W（防浮点误差产生负值→NaN）
|
|
const u = Math.min(1, s / PAGE_W); // 0 内缘 .. 1 自由边
|
|
const yNorm = (y + PAGE_H / 2) / PAGE_H; // 0 底边 .. 1 顶边
|
|
const twist = 0.7 + 0.3 * yNorm; // 顶边抬升略强
|
|
// 主抬升 + 中段“腹”的次级谐波，曲线更饱满、更柔软
|
|
const belly = 0.85 * Math.sin((Math.PI * u) / 2) + 0.15 * Math.sin(Math.PI * u);
|
|
const z = A * twist * belly;
|
|
arr[i + 2] = p.hiBase[i + 2] + z;
|
|
}
|
|
pos.needsUpdate = true;
|
|
});
|
|
}
|
|
|
|
syncTo(index) {
|
|
this.current = clamp(index, 0, this.pages.length - 1);
|
|
this.flip = null;
|
|
this.resetTween = null; // 外部跳转时终止回卷/快进动画，避免旧状态残留
|
|
this._restack(true);
|
|
if (this.onChange) this.onChange(this.current);
|
|
}
|
|
|
|
canFlipForward() { return !this.flip && !this.resetTween; }
|
|
canFlipBackward() { return !this.flip && !this.resetTween; }
|
|
|
|
// 页面 z 是否仍在向目标位置过渡（用于按需渲染：过渡期间需要持续重绘）
|
|
isSettling() {
|
|
return this.pages.some((p) => Math.abs(p.z - p.targetZ) > 0.0001);
|
|
}
|
|
|
|
_finalizeFlip() {
|
|
// 立即把正在翻的页收到目标位置，好让下一页马上开始翻
|
|
if (!this.flip) return;
|
|
const f = this.flip;
|
|
const p = this.pages[f.index];
|
|
p.angle = f.to;
|
|
p.group.rotation.y = f.to;
|
|
p.z = TOP_LIFT;
|
|
p.group.position.z = TOP_LIFT;
|
|
this.current = f.nextCurrent;
|
|
this.flip = null;
|
|
this._restack(false);
|
|
}
|
|
|
|
_startWrap(targetCur) {
|
|
// 回卷/快进：所有页从各自当前角度平滑转到目标角度（左页→右侧 或 右页→左侧），current 跳到目标页
|
|
this.current = targetCur;
|
|
this.flip = null;
|
|
this.resetTween = { t: 0, duration: 0.5 };
|
|
this.pages.forEach((p, j) => {
|
|
p._resetFrom = p.angle;
|
|
p._resetTo = j < targetCur ? -Math.PI : 0;
|
|
});
|
|
this._restackState(targetCur, false);
|
|
if (this.onChange) this.onChange(targetCur);
|
|
}
|
|
|
|
flipForward() {
|
|
if (this.flip) this._finalizeFlip(); // 前一页没翻完也能继续翻
|
|
if (!this.canFlipForward()) return;
|
|
// END 页（所有页都已翻到左侧，current = pages.length）：向前 → 回卷到第一页
|
|
if (this.current >= this.pages.length) {
|
|
this._startWrap(0);
|
|
return;
|
|
}
|
|
// 最后一页翻完即进入 END 页：右侧无纸，左页为最后一页的背面
|
|
const nextCurrent = this.current + 1;
|
|
this.flip = { index: this.current, from: 0, to: -Math.PI, t: 0, duration: 0.38, nextCurrent };
|
|
// 堆叠重排与旋转并行：翻页开始即设好目标位置，z-lerp 随旋转同步过渡
|
|
this._restackState(nextCurrent, false);
|
|
this._prefetchForFlip((nextCurrent + 2) % this.pages.length);
|
|
// 优先更新底部导航与信息卡（翻页开始即切换目标页）
|
|
if (this.onChange) this.onChange(nextCurrent);
|
|
}
|
|
|
|
flipBackward() {
|
|
if (this.flip) this._finalizeFlip();
|
|
if (!this.canFlipBackward()) return;
|
|
// 第一页向后：快进到 END 页（所有未翻的右页都翻到左侧，展示末页背面）
|
|
if (this.current === 0) {
|
|
this._startWrap(this.pages.length);
|
|
return;
|
|
}
|
|
const nextCurrent = this.current - 1;
|
|
this.flip = { index: this.current - 1, from: -Math.PI, to: 0, t: 0, duration: 0.38, nextCurrent };
|
|
this._restackState(nextCurrent, false);
|
|
this._prefetchForFlip((nextCurrent - 2 + this.pages.length) % this.pages.length);
|
|
if (this.onChange) this.onChange(nextCurrent);
|
|
}
|
|
|
|
update(dt) {
|
|
// 回卷重置动画：所有页角度从各自起点平滑回到 0（右侧）
|
|
if (this.resetTween) {
|
|
const r = this.resetTween;
|
|
r.t += dt / r.duration;
|
|
const k = clamp(r.t, 0, 1);
|
|
const e = easeInOutCubic(k);
|
|
this.pages.forEach((p) => {
|
|
p.angle = p._resetFrom + (p._resetTo - p._resetFrom) * e;
|
|
p.group.rotation.y = p.angle;
|
|
});
|
|
if (k >= 1) {
|
|
this.resetTween = null;
|
|
this._restack(true);
|
|
}
|
|
}
|
|
|
|
if (this.flip) {
|
|
const f = this.flip;
|
|
f.t += dt / f.duration;
|
|
const k = clamp(f.t, 0, 1);
|
|
const e = easeOutCubic(k);
|
|
const angle = f.from + (f.to - f.from) * e;
|
|
|
|
const p = this.pages[f.index];
|
|
p.angle = angle;
|
|
p.group.rotation.y = angle;
|
|
// 翻页时 z 随进度同步起伏：起止停在顶层高度，中途抬得更高，不归零不瞬跳
|
|
p.z = TOP_LIFT + (FLIP_LIFT - TOP_LIFT) * Math.sin(Math.PI * k);
|
|
p.group.position.z = p.z;
|
|
this._updateCurvature(f.index);
|
|
|
|
if (k >= 1) {
|
|
this.current = f.nextCurrent;
|
|
this.flip = null;
|
|
this._updateCurvature();
|
|
this._ensureTextures();
|
|
}
|
|
}
|
|
|
|
// 页面堆叠进退动画：z 平滑过渡到目标（翻页中的那一页由上面进度直接驱动）
|
|
const lerpK = Math.min(1, dt * 14);
|
|
this.pages.forEach((p, i) => {
|
|
if (this.flip && i === this.flip.index) return;
|
|
p.z += (p.targetZ - p.z) * lerpK;
|
|
p.group.position.z = p.z;
|
|
});
|
|
}
|
|
|
|
dispose() {
|
|
if (this.loGeo) this.loGeo.dispose();
|
|
this.pages.forEach((p) => {
|
|
if (p.hiGeo) p.hiGeo.dispose();
|
|
p.material.dispose();
|
|
});
|
|
}
|
|
}
|