Canvas 绘制旋转的 3D 魔方：透视变换与 2D 实现-H5教程-PHP中文网

canvas绘制3d魔方可行，核心是三维建模、逐帧变换、透视投影与深度排序：建模26个可见块，每块8顶点并预设面颜色；每帧对顶点先绕y再绕x旋转，再用透视公式投影并适配画布坐标；按面平均z值降序排序后逐面绘制，剔除背向面；辅以交互与性能优化。

canvas 绘制旋转的 3d 魔方：透视变换与 2d 实现

Canvas 本身不支持 3D 渲染，但绘制旋转的 3D 魔方完全可行——关键不是“画 3D”，而是用数学把三维结构准确投射到二维画布上，并按空间顺序正确绘制。核心在于三点：三维建模、逐帧变换、透视投影 + 深度排序。

魔方的三维结构建模

标准三阶魔方共 27 个小立方体（3×3×3），其中中心块固定、棱块和角块可动。实际渲染只需处理 26 个可见块（中心轴不可见）。每个小立方体由 8 个顶点定义，例如单位边长、中心在原点的立方体顶点为：

[-0.5, -0.5, -0.5] 到 [0.5, 0.5, 0.5] 的所有组合
每个块再按所属面预设颜色（如前→红、上→黄、右→蓝）
所有坐标统一以魔方整体中心为世界原点，便于统一旋转

旋转与投影的数学流程

每帧动画需对全部顶点依次执行：

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

绕轴旋转：先绕 Y 轴（水平旋转），再绕 X 轴（俯仰），可用欧拉角或矩阵相乘；注意旋转必须在三维空间中进行，不能在投影后操作
透视投影：用公式 x' = x × d / (z + d)、y' = y × d / (z + d)，其中 d 是观察距离（如 5～10），确保 z > -d，否则分母趋零导致坐标爆炸
坐标适配画布：Canvas 原点在左上角，y 向下为正，需将投影结果平移并翻转 y： canvasX = x' + width/2，canvasY = height/2 - y'

深度排序与面级渲染

Canvas 没有 Z 缓冲，必须手动保证远的面先画、近的面后画：

对每个小立方体的 6 个面，计算其 4 个顶点的平均 z 值（投影前的原始 z）作为深度参考
将所有面按平均 z 从大到小排序（z 越大越靠近观察者）
逐个面绘制：用 beginPath() → moveTo() → lineTo() 连接四个投影后的角点，再 fill() 或 stroke()
为避免穿帮，只绘制法向量朝向相机的面（即 n·cameraDir > 0），可省去背面填充