fukunee/Hist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tune camera and timeline controls, add globe fly-to

Browse Source 
- 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
This commit is contained in:
fukunee
2026-09-18 22:46:26 +08:00
parent 94fde7942f
commit 9a1a3685ce
6 changed files with 286 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scene/binder.js
+107 -88
View File
@@ -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);
}
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 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);
}
}
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() {