Tune camera and timeline controls, add globe fly-to

- Clamp binder/timeline zoom ranges and disable OrbitControls zoom,
  using custom smooth zoom instead
- Disable middle/right mouse buttons; reduce rotate speed
- Fly camera to picked marker on globe click
- Rebuild leather surfaces with a regular grid for smooth curvature
- Refine suede and kraft paper textures, punch real page holes
- Reposition axis, time labels, and detail card; speed up iris fade

src/core/App.js

@@ -8,8 +8,8 @@ import { Overlay } from '../ui/overlay.js';
 import { clamp, easeInOutCubic } from '../utils/easing.js';
 
 const CAMERA_POSES = {
-  binder: { pos: new THREE.Vector3(0.2, 0.75, 2.95), target: new THREE.Vector3(0, 0.02, 0), max: 6, min: 1.6 },
-  timeline: { pos: new THREE.Vector3(0, 1.4, 7.9), target: new THREE.Vector3(0, 0, 0), max: 13, min: 1.5 },
+  binder: { pos: new THREE.Vector3(0.2, 0.75, 2.95), target: new THREE.Vector3(0, 0.02, 0), max: 4.4, min: 2.4 },
+  timeline: { pos: new THREE.Vector3(0, 1.4, 6.86), target: new THREE.Vector3(0, 0, 0), max: 8, min: 6 },
   globe: { pos: new THREE.Vector3(0, 0.35, 3.7), target: new THREE.Vector3(0, 0, 0), max: 8, min: 2.2 },
 };
 
@@ -18,6 +18,9 @@ export class App {
     this.view = 'binder';
     this.selected = 0;
     this.timelineOffset = 0;
+    this.timelineSlide = null;
+    this.zoomTarget = null;
+    this.cameraMemory = {};
 
     this._initRenderer();
     this._initLights();
@@ -32,6 +35,7 @@ export class App {
     this.overlay.setTotal(ENTRIES.length);
 
     this._initEvents();
+    this._applyRotationLimits(CAMERA_POSES.binder);
     this._select(0, { syncBinder: false });
     this.binder.syncTo(0);
 
@@ -62,9 +66,14 @@ export class App {
     this.controls.target.copy(CAMERA_POSES.binder.target);
     this.controls.enableDamping = true;
     this.controls.dampingFactor = 0.06;
+    this.controls.enableZoom = false; // 关闭 OrbitControls 自带缩放，使用自定义平滑缩放
     this.controls.minDistance = CAMERA_POSES.binder.min;
     this.controls.maxDistance = CAMERA_POSES.binder.max;
     this.controls.maxPolarAngle = Math.PI * 0.82;
+    // 禁用中键（缩放）与右键（平移），仅左键旋转 + 滚轮缩放
+    this.controls.mouseButtons.MIDDLE = -1;
+    this.controls.mouseButtons.RIGHT = -1;
+    this.controls.rotateSpeed = 0.4; // 整体降速（无边缘减速）
     this.controls.update();
   }
 
@@ -75,7 +84,7 @@ export class App {
     const key = new THREE.DirectionalLight(0xffe6c0, 2.4);
     key.position.set(3.2, 4.4, 3.6);
     key.castShadow = true;
-    key.shadow.mapSize.set(2048, 2048);
+    key.shadow.mapSize.set(1024, 1024);
     key.shadow.camera.near = 0.5;
     key.shadow.camera.far = 30;
     key.shadow.camera.left = -5;
@@ -176,6 +185,7 @@ export class App {
       setPointer(e);
       if (this.view === 'timeline') {
         // 时间轴：按下开始拖拽左右滑动；未移动的抬起才视为点击选中
+        this.timelineSlide = null; // 手动拖拽时取消居中动画
         this._drag = { active: true, startX: e.clientX, startY: e.clientY, moved: false, offset: this.timelineOffset };
         canvas.setPointerCapture(e.pointerId);
       } else {
@@ -226,6 +236,16 @@ export class App {
       else if (e.key === '2') this.switchView('timeline');
       else if (e.key === '3') this.switchView('globe');
     });
+
+    // 滚轮缩放：目标累积（连续滚动合并为一次平滑过渡）
+    canvas.addEventListener('wheel', (e) => {
+      if (this.view === 'globe') return;
+      e.preventDefault();
+      const dist = this.camera.position.distanceTo(this.controls.target);
+      const base = this.zoomTarget !== null ? this.zoomTarget : dist;
+      const factor = Math.pow(0.9, -e.deltaY * 0.01);
+      this.zoomTarget = clamp(base * factor, this.controls.minDistance, this.controls.maxDistance);
+    }, { passive: false });
   }
 
   // 当前相机视野下，1 像素对应的世界宽度（拖拽跟手）
@@ -257,15 +277,31 @@ export class App {
     if (!hit) return;
     const { view, index } = hit.object.userData;
     if (view === 'binder') {
+      const cur = this.binder.current;
+      if (index === cur) {
+        this.binder.flipForward();   // 点击当前右页：翻到下一页
+      } else if (index === cur - 1) {
+        this.binder.flipBackward();  // 点击左页：翻回上一页
+      } else {
         this._select(index, { syncBinder: true });
+      }
     } else {
       this._select(index, { syncBinder: false });
       // 点击时间轴卡片 / 地理标记时，显示右下角登记卡详情
       document.getElementById('detail-card').classList.remove('hidden');
       this.binder.syncTo(index);
+      // 时间轴：点击后滑动使该卡片居中
+      if (view === 'timeline') this._centerTimeline(index);
     }
   }
 
+  // 时间轴：点击卡片后横向滑动，使其居中
+  _centerTimeline(index) {
+    const limit = TIMELINE_SPREAD + 0.6;
+    const target = clamp(-this.timeline.getCardX(index), -limit, limit);
+    this.timelineSlide = { from: this.timelineOffset, to: target, t: 0, dur: 0.55 };
+  }
+
   _step(dir) {
     if (dir > 0) this.binder.flipForward();
     else this.binder.flipBackward();
@@ -282,13 +318,23 @@ export class App {
 
   switchView(view) {
     if (view === this.view || !CAMERA_POSES[view]) return;
+    // 离开当前视图前，记住它的相机位置
+    if (this.view !== 'globe') {
+      this.cameraMemory[this.view] = {
+        pos: this.camera.position.clone(),
+        target: this.controls.target.clone(),
+      };
+    }
     const iris = document.getElementById('iris');
     iris.style.opacity = '1';
     const doSwap = () => {
       this._setView(view);
-      setTimeout(() => { iris.style.opacity = '0'; }, 180);
+      // 等新视图渲染一两帧后再淡出，避免半透明时看到切换瞬间
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => { iris.style.opacity = '0'; });
+      });
     };
-    setTimeout(doSwap, 240);
+    setTimeout(doSwap, 200); // 与 0.18s 的淡入匹配，完全变黑后再切换
   }
 
   _setView(view) {
@@ -309,13 +355,15 @@ export class App {
       this.globe.setVisible(true);
       this.globe.setSelected(this.selected);
       this.globe.resize();
+      // 进入地理视图时，自动对准当前导航条选中的标记
+      this.globe.flyToEntry(this.selected);
     } else {
       this.globe.setVisible(false);
       this.renderer.setSize(window.innerWidth, window.innerHeight);
     }
 
-    // 登记卡详情仅在活页本视图展示，避免遮挡时间轴/地理内容
-    document.getElementById('detail-card').classList.toggle('hidden', view !== 'binder');
+    // 登记卡详情在视图切换时保持显示，不隐藏
+    document.getElementById('detail-card').classList.remove('hidden');
 
     const pose = CAMERA_POSES[view];
     this.controls.minDistance = pose.min;
@@ -324,16 +372,49 @@ export class App {
     const locked = view === 'timeline';
     this.controls.enableRotate = !locked;
     this.controls.enablePan = !locked;
-    this.controls.enableZoom = true;
+    this.controls.enableZoom = false; // 滚轮缩放改为自定义渐变动画
     this.controls.autoRotate = false;
 
-    // 进入时间轴时复位横向偏移
+    // 左键旋转限制：以各视图初始视角为中心，各方向 ±10°
+    this._applyRotationLimits(pose);
+
+    // 进入时间轴时：自动定位到当前选中的活页居中
     if (view === 'timeline') {
-      this.timelineOffset = 0;
-      this.timeline.group.position.x = 0;
+      const limit = TIMELINE_SPREAD + 0.6;
+      this.timelineOffset = clamp(-this.timeline.getCardX(this.selected), -limit, limit);
+      this.timeline.group.position.x = this.timelineOffset;
     }
 
-    if (!isGlobe) this._tweenCamera(pose.pos, pose.target);
+    if (!isGlobe) {
+      // 切换视图：直接定位（有记忆则恢复上次的相机位置）
+      this.cameraTween = null;
+      this.zoomTarget = null;
+      const mem = this.cameraMemory[view];
+      if (mem) {
+        this.camera.position.copy(mem.pos);
+        this.controls.target.copy(mem.target);
+      } else {
+        this.camera.position.copy(pose.pos);
+        this.controls.target.copy(pose.target);
+      }
+    }
+  }
+
+  _applyRotationLimits(pose) {
+    const LIMIT = (20 * Math.PI) / 180; // ±20°
+    const dx = pose.pos.x - pose.target.x;
+    const dy = pose.pos.y - pose.target.y;
+    const dz = pose.pos.z - pose.target.z;
+    const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) || 1;
+    const polar = Math.acos(Math.max(-1, Math.min(1, dy / dist)));
+    const azimuth = Math.atan2(dx, dz);
+    this.controls.minPolarAngle = Math.max(0, polar - LIMIT);
+    this.controls.maxPolarAngle = Math.min(Math.PI - 0.01, polar + LIMIT);
+    this.controls.minAzimuthAngle = azimuth - LIMIT;
+    this.controls.maxAzimuthAngle = azimuth + LIMIT;
+    // 保存中心与限度，供边缘减速使用
+    this._rotCenter = { polar, azimuth };
+    this._rotLimit = LIMIT;
   }
 
   _tweenCamera(toPos, toTarget) {
@@ -368,6 +449,28 @@ export class App {
       if (k >= 1) this.cameraTween = null;
     }
 
+    // 滚轮缩放渐变动画：相机距离平滑趋近目标（指数平滑，更平顺）
+    if (this.zoomTarget !== null && !this.cameraTween) {
+      const offset = this.camera.position.clone().sub(this.controls.target);
+      const dist = offset.length();
+      const k = 1 - Math.exp(-dt * 2.2);
+      const newDist = dist + (this.zoomTarget - dist) * k;
+      offset.normalize().multiplyScalar(newDist);
+      this.camera.position.copy(this.controls.target).add(offset);
+      if (Math.abs(newDist - this.zoomTarget) < 0.002) this.zoomTarget = null;
+    }
+
+    // 时间轴点击居中：横向滑动动画
+    if (this.timelineSlide) {
+      const s = this.timelineSlide;
+      s.t += dt / s.dur;
+      const k = clamp(s.t, 0, 1);
+      const e = easeInOutCubic(k);
+      this.timelineOffset = s.from + (s.to - s.from) * e;
+      this.timeline.group.position.x = this.timelineOffset;
+      if (k >= 1) this.timelineSlide = null;
+    }
+
     this.controls.update();
     this.renderer.render(this.scene, this.camera);
   }

src/scene/CesiumGlobe.js

@@ -7,6 +7,9 @@ const IMAGERY_URL =
 const TERRAIN_URL =
   'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer';
 
+// 点击标记后相机飞到的目标高度（米，约 1500 km 区域尺度）
+const FLY_TO_HEIGHT = 1.5e6;
+
 export class CesiumGlobe {
   constructor({ onPick } = {}) {
     this.onPick = onPick;
@@ -70,6 +73,9 @@ export class CesiumGlobe {
       },
     ];
 
+    // 阻止右键弹出浏览器菜单
+    scene.canvas.addEventListener('contextmenu', (e) => e.preventDefault());
+
     // 精细化渲染：质量与性能的平衡
     scene.globe.maximumScreenSpaceError = 2.0; // 默认细分，最省性能
     scene.globe.tileCacheSize = 600; // 更大的瓦片缓存，减少细节刷新
@@ -146,12 +152,29 @@ export class CesiumGlobe {
     handler.setInputAction((movement) => {
       const picked = this.viewer.scene.pick(movement.position);
       if (Cesium.defined(picked) && picked.id && picked.id.entryIndex !== undefined) {
-        this.onPick?.(picked.id.entryIndex);
+        const index = picked.id.entryIndex;
+        this.onPick?.(index);
+        this.flyToEntry(index);
       }
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     this._handler = handler;
   }
 
+  // 相机平滑飞至某个标记上空，并将其居中（正俯视，北朝上）
+  flyToEntry(index) {
+    const entry = ENTRIES[index];
+    if (!entry || !this.viewer) return;
+    this.viewer.camera.flyTo({
+      destination: Cesium.Cartesian3.fromDegrees(entry.lng, entry.lat, FLY_TO_HEIGHT),
+      orientation: {
+        heading: 0,
+        pitch: Cesium.Math.toRadians(-90),
+        roll: 0,
+      },
+      duration: 1.2,
+    });
+  }
+
   setSelected(index) {
     this.selected = index;
     if (!this.viewer) return;

src/scene/binder.js

@@ -50,7 +50,7 @@ function makeLeatherTexture({ emblem = false } = {}) {
 
 // 内侧绒面（粗糙、哑光、模糊绒毛）
 function makeSuedeTexture() {
-  const w = 512, h = 640;
+  const w = 1024, h = 1280;
   const c = document.createElement('canvas');
   c.width = w; c.height = h;
   const ctx = c.getContext('2d');
@@ -60,15 +60,17 @@ function makeSuedeTexture() {
   g.addColorStop(1, '#866244');
   ctx.fillStyle = g;
   ctx.fillRect(0, 0, w, h);
-  for (let i = 0; i < 90000; i++) {
+  // 密集绒毛噪点（更细更密）
+  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.6 + 0.3, Math.random() * 1.6 + 0.3);
+    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.8;
-  for (let i = 0; i < 16000; i++) {
-    const x = Math.random() * w, y = Math.random() * h, a = Math.random() * Math.PI, l = Math.random() * 5 + 1;
+  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);
@@ -78,7 +80,7 @@ function makeSuedeTexture() {
   ctx.fillRect(0, 0, w, h);
   const tex = new THREE.CanvasTexture(c);
   tex.colorSpace = THREE.SRGBColorSpace;
-  tex.anisotropy = 8;
+  tex.anisotropy = 16;
   return tex;
 }
 
@@ -107,46 +109,53 @@ function roundedRectShape(w, h, r, edgeSeg = 40, arcSeg = 12) {
   return s;
 }
 
-// 随机牛皮弯曲：低频平滑起伏（更柔和、更自然），正反面/皮边共用同一函数保证一致
-function leatherWarp(x, y) {
-  const s = Math.sin(x * 1.3 + 0.7) * Math.cos(y * 1.1 + 0.9)
-    + Math.sin(x * 0.8 + y * 1.5 + 0.4) * 0.6
-    + Math.sin(x * 2.1 + 1.6) * Math.sin(y * 1.7 + 0.5) * 0.3;
-  return s * 0.002;
-}
-
 // 软皮曲面：ShapeGeometry 三角化（圆角正确、无缺口）+ 书脊处弧度弯曲
 function makeLeatherSurface(w, h, crXY, curve, flip) {
-  const shape = roundedRectShape(w, h, crXY);
-  const geo = new THREE.ShapeGeometry(shape);
-  const pos = geo.attributes.position;
-  // ShapeGeometry 的 UV 是原始坐标，需归一化到 [0,1]
-  const uv0 = geo.attributes.uv;
-  for (let i = 0; i < uv0.count; i++) {
-    uv0.setXY(i, (uv0.getX(i) + w / 2) / w, (uv0.getY(i) + h / 2) / h);
+  // 规则网格（含内部顶点，曲面平滑无对角褶痕）+ 角区收缩到圆弧
+  const segX = 128, segY = 96;
+  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);
         }
-  uv0.needsUpdate = true;
-  const hh = h / 2, sigma = 0.5;
-  for (let i = 0; i < pos.count; i++) {
-    const x = pos.getX(i), y = pos.getY(i);
-    const v = y / hh;
-    const z = -curve * Math.exp(-(x * x) / (2 * sigma * sigma)) * (1 - 0.25 * v * v) + leatherWarp(x, y);
-    pos.setZ(i, z);
       }
-  pos.needsUpdate = true;
-  if (flip) {
-    // 背面：反转索引绕向（法线朝 -z），并镜像 UV
-    const idx = geo.index;
-    for (let i = 0; i < idx.count; i += 3) {
-      const t = idx.getX(i + 1);
-      idx.setX(i + 1, idx.getX(i + 2));
-      idx.setX(i + 2, t);
+      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);
     }
-    idx.needsUpdate = true;
-    const uv = geo.attributes.uv;
-    for (let i = 0; i < uv.count; i++) uv.setX(i, 1 - uv.getX(i));
-    uv.needsUpdate = true;
   }
+
+  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;
 }
@@ -160,7 +169,7 @@ function makeSideRim(w, h, crXY, thick, curve) {
   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) + leatherWarp(px, py);
+    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;
@@ -223,7 +232,7 @@ function makeLeatherNormalMap() {
 
 // 内侧绒面法线：密集细绒毛（高频噪点）
 function makeSuedeNormalMap() {
-  const w = 512, h = 640;
+  const w = 1024, h = 1280;
   const c = document.createElement('canvas');
   c.width = w; c.height = h;
   const ctx = c.getContext('2d', { willReadFrequently: true });
@@ -240,7 +249,7 @@ function makeSuedeNormalMap() {
   // 高度 → 法线
   const src = ctx.getImageData(0, 0, w, h);
   const out = ctx.createImageData(w, h);
-  const S = 4.5;
+  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++) {
@@ -257,7 +266,7 @@ function makeSuedeNormalMap() {
   ctx.putImageData(out, 0, 0);
   const tex = new THREE.CanvasTexture(c);
   tex.colorSpace = THREE.NoColorSpace;
-  tex.anisotropy = 8;
+  tex.anisotropy = 16;
   return tex;
 }
 
@@ -269,8 +278,6 @@ export class Binder {
     this.flip = null; // { index, from, to, t, duration }
     this.onChange = null;
 
-    this.coverTex = makeLeatherTexture({ emblem: true });
-    this.leatherNormalTex = makeLeatherNormalMap();
     this.suedeTex = makeSuedeTexture();
     this.suedeNormalTex = makeSuedeNormalMap();
     this._buildCovers();
@@ -286,17 +293,9 @@ export class Binder {
     const coverW = PAGE_W + 0.2;
     const coverH = PAGE_H + 0.2;
     const spineW = 0.12;
-    const thick = 0.017;  // 牛皮厚度（减 1/3）
+    const thick = 0.017;  // 牛皮厚度
 
-    // 外侧：光滑深棕小牛皮（纯色，微光泽）
-    const outerMat = new THREE.MeshStandardMaterial({
-      map: this.coverTex,
-      normalMap: this.leatherNormalTex,
-      normalScale: new THREE.Vector2(0.3, 0.3),
-      roughness: 0.25,
-      metalness: 0.0,
-    });
-    // 内侧：粗糙绒面（哑光）
+    // 内侧：粗糙绒面（哑光）——外皮不渲染，只保留内侧
     const innerMat = new THREE.MeshStandardMaterial({
       map: this.suedeTex,
       normalMap: this.suedeNormalTex,
@@ -305,24 +304,21 @@ export class Binder {
       metalness: 0.0,
     });
 
-    // 一张牛皮：正反两张弯曲曲面 + 封闭皮边（UV 正确无拉伸）
+    // 一张牛皮：仅内侧曲面 + 封闭皮边
     const totalW = coverW * 2 + spineW;
     const frontGeo = makeLeatherSurface(totalW, coverH, 0.06, 0.07, false);
-    const backGeo = makeLeatherSurface(totalW, coverH, 0.06, 0.07, true);
     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 back = new THREE.Mesh(backGeo, outerMat);    // -z 朝外（光滑）
-    back.position.z = -thick / 2;
     const rim = new THREE.Mesh(rimGeo, rimMat);
 
     this.cover = new THREE.Group();
-    this.cover.add(front, back, rim);
+    this.cover.add(front, rim);
     this.cover.position.set(0, 0, -0.095);
-    front.receiveShadow = back.receiveShadow = rim.receiveShadow = true;
-    front.castShadow = back.castShadow = rim.castShadow = true;
+    front.receiveShadow = rim.receiveShadow = true;
+    front.castShadow = rim.castShadow = true;
 
     this.group.add(this.cover);
   }
@@ -332,18 +328,18 @@ export class Binder {
     const mat = new THREE.MeshStandardMaterial({
       color: 0xd8d2c6, metalness: 0.95, roughness: 0.25,
     });
-    // 薄片（有可见厚度的金属条），贴在牛皮内面（书脊处曲面 z≈-0.122）上
-    const plate = new THREE.Mesh(new THREE.BoxGeometry(0.09, 1.85, 0.04), mat);
-    plate.position.set(0, 0.07, -0.135);
+    // 薄片（有可见厚度的金属条），贴在牛皮内面（书脊处曲面 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, 12, 10);
     const rivets = [];
-    for (const ry of [-0.72, -0.36, 0, 0.36, 0.72]) {
+    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.114);
+      rivet.position.set(0, ry, -0.116);
       rivet.scale.z = 0.5;
       rivet.castShadow = true;
       rivets.push(rivet);
@@ -356,7 +352,7 @@ export class Binder {
 
   _buildRings() {
     const mat = new THREE.MeshStandardMaterial({
-      color: 0xd8d2c6, metalness: 0.95, roughness: 0.22,
+      color: 0xd4d7dc, metalness: 0.95, roughness: 0.2,
     });
     // 更平滑的活页环
     const geo = new THREE.TorusGeometry(RING_R, RING_TUBE, 18, 56);
@@ -393,9 +389,11 @@ export class Binder {
 
       const frontMat = new THREE.MeshStandardMaterial({
         map: front, roughness: 0.88, metalness: 0.0, side: THREE.FrontSide,
+        transparent: true, alphaTest: 0.5,
       });
       const backMat = new THREE.MeshStandardMaterial({
         map: back, roughness: 0.88, metalness: 0.0, side: THREE.BackSide,
+        transparent: true, alphaTest: 0.5,
       });
 
       const frontMesh = new THREE.Mesh(geo, frontMat);
@@ -418,23 +416,28 @@ export class Binder {
         backMat,
         angle: 0,
         y: 0,
+        z: 0,
+        targetZ: 0,
       });
 
       this.group.add(g);
     });
 
-    this._restack();
+    this._restack(true);
   }
 
-  // 各页休息位置：角度 + 世界 z（堆叠深度）
-  _restack() {
+  // 各页休息位置：角度 + 目标 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;
       const depth = j < this.current ? (this.current - 1 - j) : (j - this.current);
-      const z = -depth * STACK_GAP;
-      p.group.position.z = z;
+      p.targetZ = -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;
       // 下层页略暗
@@ -445,9 +448,10 @@ export class Binder {
     this._updateCurvature();
   }
 
-  _updateCurvature() {
+  _updateCurvature(index = null) {
     // 翻页时整页柔软弧弯：自由边最高、中段有“腹”、书脊侧贴环；顶边略强于底边；静止时完全平整
-    this.pages.forEach((p) => {
+    const pages = index === null ? this.pages : [this.pages[index]];
+    pages.forEach((p) => {
       const pos = p.geometry.attributes.position;
       const arr = pos.array;
       const theta = Math.abs(p.angle); // 0..π
@@ -472,23 +476,29 @@ export class Binder {
   syncTo(index) {
     this.current = clamp(index, 0, this.pages.length - 1);
     this.flip = null;
-    this._restack();
+    this._restack(true);
     if (this.onChange) this.onChange(this.current);
   }
 
-  canFlipForward() { return !this.flip && this.current < this.pages.length - 1; }
+  canFlipForward() { return !this.flip; }
   canFlipBackward() { return !this.flip && this.current > 0; }
 
   flipForward() {
     if (!this.canFlipForward()) return;
     this.flip = { index: this.current, from: 0, to: -Math.PI, t: 0, duration: 0.6 };
-    this.pages[this.current].group.position.z = 0.006;
+    const p = this.pages[this.current];
+    p.z = 0.006; p.targetZ = 0.006; p.group.position.z = 0.006;
+    // 优先更新底部导航与信息卡（翻页开始即切换目标页）
+    if (this.onChange) this.onChange((this.current + 1) % this.pages.length);
   }
 
   flipBackward() {
     if (!this.canFlipBackward()) return;
     this.flip = { index: this.current - 1, from: -Math.PI, to: 0, t: 0, duration: 0.6 };
-    this.pages[this.current - 1].group.position.z = 0.006;
+    const p = this.pages[this.current - 1];
+    p.z = 0.006; p.targetZ = 0.006; p.group.position.z = 0.006;
+    // 优先更新底部导航与信息卡
+    if (this.onChange) this.onChange(this.current - 1);
   }
 
   update(dt) {
@@ -502,15 +512,24 @@ export class Binder {
       const p = this.pages[f.index];
       p.angle = angle;
       p.group.rotation.y = angle;
-      this._updateCurvature();
+      this._updateCurvature(f.index);
 
       if (k >= 1) {
-        if (f.to === -Math.PI) this.current += 1; else this.current -= 1;
+        if (f.to === -Math.PI) {
+          // 最后一页翻完后循环回第一页
+          this.current = (this.current + 1) % this.pages.length;
+        } else this.current -= 1;
         this.flip = null;
-        this._restack();
-        if (this.onChange) this.onChange(this.current);
+        this._restack(false);
       }
     }
+
+    // 页面堆叠进退动画：z 平滑过渡到目标
+    const lerpK = Math.min(1, dt * 14);
+    this.pages.forEach((p) => {
+      p.z += (p.targetZ - p.z) * lerpK;
+      p.group.position.z = p.z;
+    });
   }
 
   dispose() {

src/scene/timeline.js

@@ -7,6 +7,8 @@ export const TIMELINE_SPREAD = 6.2; // 横轴范围 ±6.2（超出视口，可
 
 const CARD_FLOAT = 0.14; // 选中时上浮高度
 const NAME_Y = 0.42;     // 主题标签基准高度（活页上方）
+const AXIS_Y = -0.40;    // 时间轴基线高度
+const TIME_Y = -0.56;    // 时间标签高度（轴下方）
 
 function cardX(i, n) {
   return (i / (n - 1)) * 2 * TIMELINE_SPREAD - TIMELINE_SPREAD;
@@ -24,27 +26,21 @@ export class Timeline {
 
   _buildLine() {
     const n = ENTRIES.length;
-    const min = cardX(0, n) - 0.4;
-    const max = cardX(n - 1, n) + 0.4;
+    // 轴线向两侧延伸足够远（并关闭雾化），滚动到边缘也不见端点，视觉上无限长
+    const extent = 50;
 
-    const lineMat = new THREE.LineBasicMaterial({ color: 0xc9a227, transparent: true, opacity: 0.7 });
+    const lineMat = new THREE.LineBasicMaterial({ color: 0xc9a227, transparent: true, opacity: 0.7, fog: false });
     const lineGeo = new THREE.BufferGeometry().setFromPoints([
-      new THREE.Vector3(min, -0.85, 0), new THREE.Vector3(max, -0.85, 0),
+      new THREE.Vector3(-extent, AXIS_Y, 0), new THREE.Vector3(extent, AXIS_Y, 0),
     ]);
     this.group.add(new THREE.Line(lineGeo, lineMat));
 
-    const glowMat = new THREE.LineBasicMaterial({ color: 0xe0c46a, transparent: true, opacity: 0.22 });
-    const glowGeo = new THREE.BufferGeometry().setFromPoints([
-      new THREE.Vector3(min, -0.855, -0.03), new THREE.Vector3(max, -0.855, -0.03),
-    ]);
-    this.group.add(new THREE.Line(glowGeo, glowMat));
-
     // 刻度：向上指向卡片、向下指向时间标签
     const tickMat = new THREE.LineBasicMaterial({ color: 0xc9a227, transparent: true, opacity: 0.5 });
     ENTRIES.forEach((e, i) => {
       const x = cardX(i, n);
       const g = new THREE.BufferGeometry().setFromPoints([
-        new THREE.Vector3(x, -0.98, 0), new THREE.Vector3(x, -0.7, 0),
+        new THREE.Vector3(x, AXIS_Y - 0.14, 0), new THREE.Vector3(x, AXIS_Y + 0.12, 0),
       ]);
       this.group.add(new THREE.Line(g, tickMat));
     });
@@ -73,12 +69,12 @@ export class Timeline {
       card.add(outline);
 
       // 活页上方：主题（常显，随选中上浮，超宽居中换行）
-      const name = makeTextSprite(entry.name, { fontSize: 17, color: '#e8d9b4', scale: 0.13, maxWidth: 1.0 });
+      const name = makeTextSprite(entry.name, { fontSize: 17, color: '#e8d9b4', scale: 0.12, maxWidth: 0.9 });
       name.position.set(x, NAME_Y, 0);
 
       // 轴下方：时间（常显，固定不动）
       const time = makeTextSprite(entry.time, { fontSize: 13, color: '#c9a227', scale: 0.11 });
-      time.position.set(x, -1.06, 0);
+      time.position.set(x, TIME_Y, 0);
 
       this.group.add(card, name, time);
       this.cards.push({ card, outline, name, nameBaseY: NAME_Y, index: i });
@@ -94,4 +90,9 @@ export class Timeline {
       c.name.position.y = c.nameBaseY + (on ? CARD_FLOAT : 0);
     });
   }
+
+  // 返回某张卡片在时间轴组内的横向坐标（用于点击后居中）
+  getCardX(index) {
+    return cardX(index, ENTRIES.length);
+  }
 }

src/styles.css

@@ -48,7 +48,7 @@ html, body {
 }
 #iris {
   position: absolute; inset: 0; pointer-events: none;
-  background: #0c0906; opacity: 0; transition: opacity 0.45s ease;
+  background: #0c0906; opacity: 0; transition: opacity 0.18s ease;
 }
 
 /* 顶部标题 */
@@ -107,7 +107,7 @@ html, body {
 
 /* 登记卡详情 */
 .detail-card {
-  right: 24px; bottom: 96px; width: min(320px, 82vw);
+  right: 24px; bottom: 22px; width: min(320px, 82vw);
   padding: 18px 20px; border-radius: 4px;
   background: linear-gradient(180deg, rgba(232,216,182,0.96), rgba(214,196,156,0.96));
   color: var(--ink); box-shadow: 0 18px 50px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(90,61,43,0.4);

src/textures/pages.js

@@ -7,9 +7,9 @@ export const PAGE_W = 1.6;          // 世界单位：页宽
 export const PAGE_H = 2.24;         // 世界单位：页高
 export const TEX_W = 768;
 export const TEX_H = 1075;
-export const HOLE_U = [0.085, 0.24, 0.4, 0.56, 0.72, 0.855]; // 活页孔（自顶部归一化）
+export const HOLE_U = [0.1, 0.26, 0.42, 0.58, 0.74, 0.9]; // 活页孔（自顶部归一化，6孔等距）
 export const HOLE_X = 0.065;         // 孔中心相对页内缘（环前交点 0.085 − 页缘空隙 0.02）
-export const HOLE_R = 0.03;         // 孔半径（世界，略大于环丝，留出穿环空隙）
+export const HOLE_R = 0.029;         // 孔半径 ≈5.5mm 直径（真实活页本孔径）
 
 const SERIF = '"Noto Serif SC","Songti SC","STSong","SimSun",Georgia,serif';
 const KAI = '"Kaiti SC","STKaiti","KaiTi","Noto Serif SC",serif';
@@ -21,34 +21,34 @@ const CONTENT_L = MARGIN.left + 18;          // 内容左界
 const CONTENT_R = TEX_W - MARGIN.right - 18; // 内容右界
 const CONTENT_W = CONTENT_R - CONTENT_L;     // 内容宽度
 
-// —— 基础纸张 ——
+// —— 基础纸张（牛皮纸）——
 export function makePaper(w, h, { tone = 0, ruled = false, margin = false, seed = 0 } = {}) {
   const c = document.createElement('canvas');
   c.width = w; c.height = h;
   const ctx = c.getContext('2d');
 
-  // 底色（暖黄纸）
-  const base = [232 - tone, 216 - tone, 182 - tone];
+  // 底色（牛皮纸棕黄）
+  const base = [201 - tone, 169 - tone, 126 - tone];
   const g = ctx.createLinearGradient(0, 0, 0, h);
-  g.addColorStop(0, `rgb(${base[0] + 6},${base[1] + 5},${base[2] + 4})`);
+  g.addColorStop(0, `rgb(${base[0] + 7},${base[1] + 6},${base[2] + 5})`);
   g.addColorStop(0.5, `rgb(${base[0]},${base[1]},${base[2]})`);
-  g.addColorStop(1, `rgb(${base[0] - 8},${base[1] - 7},${base[2] - 6})`);
+  g.addColorStop(1, `rgb(${base[0] - 9},${base[1] - 8},${base[2] - 7})`);
   ctx.fillStyle = g;
   ctx.fillRect(0, 0, w, h);
 
-  // 随机纤维与斑点
+  // 纤维斑点（更粗粝）
   const rand = mulberry(seed + 1);
-  for (let i = 0; i < w * h / 90; i++) {
+  for (let i = 0; i < w * h / 70; i++) {
     const x = rand() * w, y = rand() * h;
     const dark = rand() > 0.5;
-    ctx.fillStyle = dark ? 'rgba(120,95,60,0.10)' : 'rgba(255,250,230,0.14)';
-    ctx.fillRect(x, y, rand() * 2 + 0.4, rand() * 2 + 0.4);
+    ctx.fillStyle = dark ? 'rgba(110,80,48,0.14)' : 'rgba(240,220,185,0.13)';
+    ctx.fillRect(x, y, rand() * 2.4 + 0.5, rand() * 2.4 + 0.5);
   }
-  // 纤维线条
-  ctx.strokeStyle = 'rgba(140,110,70,0.07)';
-  ctx.lineWidth = 0.7;
-  for (let i = 0; i < w * h / 2600; i++) {
-    const x = rand() * w, y = rand() * h, a = rand() * Math.PI, l = rand() * 22 + 6;
+  // 长纤维线条（牛皮纸特征）
+  ctx.strokeStyle = 'rgba(120,85,50,0.13)';
+  ctx.lineWidth = 0.8;
+  for (let i = 0; i < w * h / 1400; i++) {
+    const x = rand() * w, y = rand() * h, a = rand() * Math.PI, l = rand() * 50 + 12;
     ctx.beginPath();
     ctx.moveTo(x, y);
     ctx.lineTo(x + Math.cos(a) * l, y + Math.sin(a) * l);
@@ -59,7 +59,7 @@ export function makePaper(w, h, { tone = 0, ruled = false, margin = false, seed
     const x = rand() * w, y = rand() * h, r = rand() * 140 + 40;
     const gr = ctx.createRadialGradient(x, y, 0, x, y, r);
     const warm = rand() > 0.5;
-    gr.addColorStop(0, warm ? 'rgba(180,150,95,0.05)' : 'rgba(120,100,70,0.05)');
+    gr.addColorStop(0, warm ? 'rgba(170,135,90,0.06)' : 'rgba(110,80,50,0.06)');
     gr.addColorStop(1, 'rgba(0,0,0,0)');
     ctx.fillStyle = gr;
     ctx.fillRect(0, 0, w, h);
@@ -103,24 +103,16 @@ function mulberry(seed) {
 function drawHoles(ctx, w, h) {
   const hx = (HOLE_X / PAGE_W) * w;
   const hr = (HOLE_R / PAGE_W) * w;
+  ctx.save();
+  ctx.fillStyle = '#000'; // 确保不透明，destination-out 才能完全抠掉
   for (const u of HOLE_U) {
     const y = u * h;
-    // 孔内阴影（穿过去的感觉）
-    const g = ctx.createRadialGradient(hx, y, 0, hx, y, hr);
-    g.addColorStop(0, '#2b1f13');
-    g.addColorStop(0.62, '#4a3826');
-    g.addColorStop(0.82, '#6b5740');
-    g.addColorStop(1, '#8a735a');
-    ctx.fillStyle = g;
+    // 真实打孔：抠出透明孔洞（配合材质 alphaTest 成为真洞）
+    ctx.globalCompositeOperation = 'destination-out';
     ctx.beginPath(); ctx.arc(hx, y, hr, 0, Math.PI * 2); ctx.fill();
-    // 孔缘
-    ctx.strokeStyle = 'rgba(70,50,32,0.85)';
-    ctx.lineWidth = 2.2;
-    ctx.beginPath(); ctx.arc(hx, y, hr, 0, Math.PI * 2); ctx.stroke();
-    ctx.strokeStyle = 'rgba(255,244,214,0.35)';
-    ctx.lineWidth = 1;
-    ctx.beginPath(); ctx.arc(hx, y, hr - 2, Math.PI * 0.15, Math.PI * 0.85); ctx.stroke();
+    ctx.globalCompositeOperation = 'source-over';
   }
+  ctx.restore();
 }
 
 // 描边 + 填充的通用文字