魔方求解器

一个可以直接在浏览器里使用的交互式 3D 魔方求解器。可以点击或滑动 3D 魔方完成转层，同时保留自由视角控制；也支持二维展开图输入、随机打乱、撤销与重做、Kociemba 自动求解和逐步执行解法，并且可以在手机上作为 PWA 添加到主屏幕。

在线体验

打开魔方求解器

手机和电脑都可以直接打开使用。手机浏览器可通过“添加到主屏幕”把它当作应用启动。

项目预览

功能亮点

• 3D 魔方实时渲染，并带有真实的分层旋转动画
• 点击贴纸可选中对应面，再选择逆时针、180° 或顺时针旋转
• 在非中心贴纸上滑动可直接转层；拖动空白区域或中心贴纸可改变视角
• 兼容鼠标与触摸操作；桌面端还可按住空格拖动视角
• 手势、按钮、打乱和求解步骤共用同一份历史记录，支持撤销、重做和点击历史跳转
• 二维展开图输入窗口会同步显示当前魔方状态，适合从真实魔方录入或检查操作结果
• Kociemba 算法自动求解复杂局面
• 简单局面优先搜索短解，减少多余步骤
• 支持随机打乱、逐步执行和一键执行
• 支持 GitHub Pages HTTPS 部署和 PWA 离线缓存
• 纯前端运行，不需要后端服务

使用方式

1. 打开在线体验网址。
2. 直接操作 3D 魔方：
   • 点击贴纸选择一个面，再使用浮动按钮旋转该面。
   • 在非中心贴纸上滑动，直接旋转对应层。
   • 拖动空白区域或中心贴纸改变视角；桌面端也可以按住空格后拖动。
3. 如需录入真实魔方，点击“输入”，按二维展开图设置六个面的颜色。
4. 点击“打乱”开始练习，或点击“求解魔方”生成还原步骤。
5. 使用“下一步”逐步观察还原过程，或点击“全部执行”自动还原。
6. 使用撤销、重做或历史记录，回到任意操作节点。

技术栈

• React
• TypeScript
• Vite
• Three.js
• Tailwind CSS
• cubejs
• GitHub Actions
• GitHub Pages

English

A browser-based interactive 3D Rubik's Cube solver built with React, Three.js and the Kociemba algorithm. Turn layers by clicking a sticker and choosing a direction, or swipe directly across a non-center sticker. Drag the background or a center sticker to orbit the camera. Gesture moves, buttons, scrambles and solver steps share one undoable history, while the existing 2D cube-net input stays synchronized with the current state. Mobile browsers and PWA installation are supported.

Live demo: https://1708293266.github.io/cube---solver/

开源协议

MIT