我真的有在认真念书

一次转动做了什么#

每个面在 FACE_INFO 里登记了三个事实：转动轴、所在层（轴坐标 ±1）、顺时针对应的转角方向：

1
export const FACE_INFO: Record<Face, { axis: Axis; layer: 1 | -1; theta: 1 | -1 }> = {
2
  R: { axis: 'x', layer: 1,  theta: -1 },
3
  L: { axis: 'x', layer: -1, theta:  1 },
4
  U: { axis: 'y', layer: 1,  theta: -1 },
5
  D: { axis: 'y', layer: -1, theta:  1 },
6
  F: { axis: 'z', layer: 1,  theta: -1 },
7
  B: { axis: 'z', layer: -1, theta:  1 },
8
};

applyMove 只筛选出位于该层的 cubie，对每个做「位置旋转 + 贴纸置换」两步：

1
applyMove(m: Move): void {
2
  // ...整体旋转（x/y/z）分支省略
3
  const { axis, layer, theta } = FACE_INFO[m.face];
4
  const t = (theta * m.dir) as 1 | -1;
5
  const ai = axis === 'x' ? 0 : axis === 'y' ? 1 : 2;
6
  for (const cb of this.cubies) {
7
    if (cb.position[ai] !== layer) continue;
8
    cb.position = rotatePos(cb.position, axis, t);
9
    cb.colors = rotateColors(cb.colors, axis, t);
10
  }
11
}

rotatePos 是整数坐标旋转（(x,y,z) 绕 x 轴转 90° 变成 (x,-z,y)），全程没有浮点误差——状态模型天然精确，这也是求解器可以放心在它之上做 BFS 的原因。rotateColors 则是把 6 个贴纸槽位按法向量旋转做置换，保证「贴纸始终与世界坐标轴对齐」这个不变量。

IMPORTANT

状态（cubie 的位置 + 贴纸）是唯一事实来源。渲染层只是把这个状态「投影」到屏幕上，动画期间状态不变、动画结束才提交——逻辑与表现彻底分离，这是后面测试能跑得那么快的前提。

判定已解：一张展开图#

isSolved() 不比较 cubie 数组，而是用 FACE_GRID 把每个面的 3×3 网格映射回世界坐标，逐格检查贴纸颜色是否符合预期。展开图（U 在上、F 居中、D 在 F 下、B 在 D 下、L/R 分居两侧）保证 12 条共享边的世界坐标两两一致、无镜像——这个不变量有专门的单元测试守护。

场景搭建#

27 个 RoundedBox（共享同一份几何体），间距 1.08、边长 0.94，留出约 0.14 的缝隙露出深色内部；每个 cubie 按 colors 组合贴 6 面独立材质，材质按颜色组合缓存复用。视角用 OrbitControls，只允许旋转、禁用缩放和平移。

拖拽转面的几何#

转面的核心问题是：如何把一个 2D 指针拖拽翻译成「哪一层、朝哪个方向转一次」。实现分三步：

1. 命中定面：pointerdown 命中某个 mesh 时，从 e.face.normal（对象空间法线）直接映射到面。空闲时 mesh 恒为零旋转，所以对象空间法线就是世界法线，可以放心映射。
2. 平面投影：以命中点和该法线构造一个无限平面，把指针位置沿视线投射到平面上，得到 hit 点。
3. 切线累积：转动方向就是角速度方向 cross(轴, 点)（ω×r），把指针位移在切线方向上投影并累加，超过阈值（0.2）触发一次转动：

1
// 切线 = 正转方向（ω×r）；归一化后累加，消除面中心处幅值为 0 的死区
2
const tangent = new THREE.Vector3().crossVectors(AXIS_VEC[FACE_INFO[drag.face].axis], drag.point);
3
if (tangent.lengthSq() > 1e-8) tangent.normalize();
4
drag.accum += hit.clone().sub(drag.prev).dot(tangent);
5
drag.prev.copy(hit);
6
if (Math.abs(drag.accum) > 0.2) {
7
  const dir = ((drag.accum > 0 ? 1 : -1) * FACE_INFO[drag.face].theta) as 1 | -1;
8
  useCubeStore.getState().enqueueMove({ kind: 'face', face: drag.face, dir });
9
  dragRef.current = null; // 一次拖拽只触发一次
10
}

几个细节值得一提：

• move/up 用 window 原生监听，指针拖出 mesh、甚至拖出画布后拖拽仍然持续；配合 setPointerCapture 保证指针移出浏览器窗口也能收到 pointerup。
• 归一化切线是为了消除面中心处的死区：面中心到轴的距离为 0，ω×r 幅值为 0，直接用它当方向会在中心附近出现「拖不动」的体验。
• 拖拽期间禁用 OrbitControls，避免转层时视角被误旋转；多指按下时忽略新指针，防止两个手势打架。
• 一次拖拽只触发一次转动（触发后清空 dragRef），方向由累积位移的符号决定。

动画：pivot 分组旋转#

每次 90° 转动是 250ms 的 ease-in-out。实现上把该层的 mesh 临时挂到一个 THREE.Group（pivot）下，只旋转 pivot；动画结束时把 mesh 挂回根节点、并把动画后的状态同步给渲染（syncMeshes），与 store 提交的状态保持一致。动画由 useFrame 逐帧驱动，不经过 React 渲染循环——动画期间没有 React 重渲染，性能开销极小。

关键技巧一：观测帧 vs 物理状态#

经典入门法默认「白面在底」做 F2L。实现的做法是：白十字完成后整体 x2 翻转（白面转下），用经典公式做底层角块和第二层；顶层阶段结束后再 x2 翻回、补一个 y 旋转做帧规范化。x2/y 只改变观测帧，不扰动任何块——物理上魔方已经还原，只是我们看它的角度变了。

翻转带来的坑：x2 之后侧面中心的顺序是镜像序（红在右、蓝在前、绿在后、橙在左），所以顶层阶段的谓词全部「帧相关」——按中心色现算 home 位置，而不是查固定坐标表：

1
function yellowCornerHome(cube: Cube, colors: Color[]): Vec3 {
2
  for (const h of TOP_CORNER_POSITIONS) {
3
    const [x, , z] = h;
4
    const xc = centerColorAt(cube, [x, 0, 0]);
5
    const zc = centerColorAt(cube, [0, 0, z]);
6
    if ((colors[1] === xc && colors[2] === zc) || (colors[1] === zc && colors[2] === xc)) return h;
7
  }
8
  ...
9
}

关键技巧二：阶段 4-6 用「保层」公式 + BFS#

阶段 4 是确定性公式：F R U R' U' F'，配合 U-setup 把当前形态转到规范形（dot / L / line），循环直到黄十字完成。

阶段 5/6 是本项目最有意思的部分。它们的移动集是 13 个经实测验证「对 F2L 与黄十字零影响」的经典公式（含 Sune 系、角三循环等，不含 R'D'RD——实测会破坏 F2L）。在这个受限移动集上做 BFS，搜索把顶层角块带到目标态的最短公式组合：

• 状态编码：每个角块 = 位置（0..7）× 贴纸排列（0..5），共 48 态；4 个角块打包成一个 48⁴ 的数值 key；
• 每个公式的作用被预计算成 48 态置换表（CORNER_MOVE_TABLES），模块级惰性缓存——BFS 里查表代替逐 move 模拟；
• 深度上限 16、节点数上限 30 万，保证最坏情况可终止。

用 BFS 而不是背公式的好处：目标态可以精确表达。阶段 5 的目标是「位置归位、朝向任意」，阶段 6 是「完全正确」，两者在同一个搜索框架下只是目标态集合不同。

NOTE

设计文档原稿的阶段 6 用的是 R'D'RD 反复转角块的经典教法，实测发现它会把角块停在「黄朝上但侧面贴纸对调」的扭转类，最终魔方无法还原；改用 BFS 直接搜索到完全正确终态后，100 个随机打乱全部通过。这是「教学直觉」被「可验证正确性」纠正的一个例子。

关键技巧三：阶段 7 用整体旋转代替 U-setup#

阶段 7 用经典三循环公式 F2 U L R' F2 L' R U F2（作用在 (UL,UR,UF) 上）。标准教法是先 U-setup 把正确棱转到合适位置——但实测 U 会把已归位的角块整体挪走，导致最后魔方不还原。实现改为整体 y 旋转把正确棱转到后面（y 旋转不扰动任何块），循环结束后再转回来，最后统一做 x2 翻回 + y 帧规范化收尾。

求解入口#

1
export function solveCube(start: Cube): SolveStep[] {
2
  if (start.isSolved()) return [];
3
  const cube = start.clone();
4
  const steps: SolveStep[] = [];
5
  const record = (alg: Move[] | string, stage: number, description: string) => {
6
    const moves = typeof alg === 'string' ? parseAlg(alg) : alg;
7
    for (const m of moves) {
8
      steps.push({ move: m, stage, stageTitle: STAGES[stage], description });
9
    }
10
  };
11
  solveFirstTwoLayers(cube, record);
12
  solveYellowCross(cube, record);
13
  solveYellowCornerPosition(cube, record);
14
  solveYellowCornerOrientation(cube, record);
15
  solveYellowEdgePosition(cube, record);
16
  return steps;
17
}

已解魔方直接返回空数组（避免白十字阶段记录的 x2 翻面噪音）；record 是纯记录回调，各阶段函数在传入的克隆上自行 applyMove，收集和改动互不干扰。