3×3×3魔方旋转状态更新及建模优化技术咨询

一、旋转动画结束后如何更新魔方状态？ #

1. 层的位置置换 #

旋转一个面的核心是该层小方块（Cubie）在层内的位置循环置换。以3阶魔方右层（x=2的层）顺时针旋转90度为例：

• 提取目标层的所有Cubie（比如this.cubies[2][j][k]）
• 记录这些Cubie的原始位置索引
• 根据旋转方向生成位置映射规则，比如顺时针旋转时，原位置(j,k)会移动到(k, 2-j)（j、k范围0-2）
• 将提取的Cubie按新位置重新赋值到this.cubies数组中

2. 小方块的朝向更新 #

仅置换位置不够，旋转后每个小方块的自身朝向会改变（比如原前面会变为上面）。如果直接存储顶点坐标，旋转后需重新计算顶点；更高效的方式是给Cubie添加方向属性（如旋转矩阵或三维方向向量），渲染时通过基础顶点+方向矩阵计算实际显示的顶点，旋转后只需更新方向属性即可。

示例代码（给Cubie添加方向管理）：

class Cubie {
  constructor(x, y, z, len) {
    this.len = len;
    this.position = { x, y, z }; // 存储自身中心位置
    this.orientation = [1, 0, 0, 0, 1, 0, 0, 0, 1]; // 初始单位旋转矩阵
    this.baseVertices = this.getBaseVertices(); // 以自身中心为原点的基础顶点
  }

  getBaseVertices() {
    const half = this.len / 2;
    return [
      new Vertex(-half, -half, -half),
      new Vertex(half, -half, -half),
      new Vertex(half, -half, half),
      new Vertex(-half, -half, half),
      new Vertex(-half, half, -half),
      new Vertex(half, half, -half),
      new Vertex(half, half, half),
      new Vertex(-half, half, half),
    ];
  }

  // 根据位置和朝向计算当前顶点
  getCurrentVertices() {
    return this.baseVertices.map(v => {
      // 应用旋转矩阵
      const x = v.x * this.orientation[0] + v.y * this.orientation[1] + v.z * this.orientation[2];
      const y = v.x * this.orientation[3] + v.y * this.orientation[4] + v.z * this.orientation[5];
      const z = v.x * this.orientation[6] + v.y * this.orientation[7] + v.z * this.orientation[8];
      // 叠加位置偏移
      return new Vertex(x + this.position.x, y + this.position.y, z + this.position.z);
    });
  }
}

旋转结束后，除了置换Cubie位置，还要更新每个Cubie的orientation矩阵，比如右层顺时针旋转对应绕x轴转90度的预定义矩阵。

二、更简便的魔方建模方式 #

1. 分离「状态数据」与「渲染数据」 #

当前建模将渲染用的顶点与状态绑定，导致更新复杂。优化方案：

• 用纯数据结构存储魔方状态：比如3x3x3数组，每个元素存储小方块的位置索引和面颜色映射（如{ faces: { front: 'red', top: 'white' } }）
• 渲染时根据状态数据生成Cubie的显示内容，而非直接修改顶点数组

2. 用「预定义置换规则」简化更新 #

魔方所有旋转操作都可拆解为预定义的层置换规则，无需操作每个Cubie的顶点。比如预定义12种基础旋转（R/R'、L/L'、U/U'、D/D'、F/F'、B/B'），每个操作对应一套位置置换表和朝向变化表。

示例：3阶魔方右层顺时针旋转（R）的位置映射

// 右层(x=2)的原位置(j,k) → 新位置(k, 2-j)
const R_PERMUTATION = [
  [2,0], [2,1], [2,2],
  [1,0], [1,1], [1,2],
  [0,0], [0,1], [0,2],
].map(([j,k]) => [k, 2-j]);

3. 简化Cubie类职责 #

让Cubie只负责渲染，不存储状态。所有状态由RubikCube类管理，Cubie仅接收位置、朝向、颜色数据完成绘制。

你的代码修正点 #

原代码存在两处关键问题：

1. Cubie.getFaces参数错误，且downFace顶点顺序有误，修正后：

getFaces() {
  const [A, B, C, D, E, F, G, H] = this.vertices;
  const backFace = [A, E, F, B];
  const leftFace = [B, F, G, C];
  const frontFace = [C, G, H, D];
  const rightFace = [D, H, E, A];
  const downFace = [D, A, B, C]; // 修正四边形顶点顺序
  const upFace = [E, H, G, F];
  return [backFace, leftFace, frontFace, rightFace, downFace, upFace];
}

2. RubikCube.getCubies坐标计算偏移逻辑不合理，修正为以魔方中心为原点：

getCubies(x, y, z) {
  let cubies = [];
  const cubieLen = this.len / 3;
  for (let i = 0; i < this.dim; i++) {
    let layer = [];
    for (let j = 0; j < this.dim; j++) {
      let row = [];
      for (let k = 0; k < this.dim; k++) {
        // 以魔方中心(x,y,z)为基准，计算每个Cubie的中心位置
        const cubieX = x + (i - 1) * cubieLen;
        const cubieY = y + (j - 1) * cubieLen;
        const cubieZ = z + (k - 1) * cubieLen;
        row.push(new Cubie(cubieX, cubieY, cubieZ, cubieLen));
      }
      layer.push(row);
    }
    cubies.push(layer);
  }
  return cubies;
}

内容的提问来源于stack exchange，提问作者Abdel Majid Kansoussi