使用Three.js+Vue编写的3D前端魔方游戏
同济大学2019年春季学期Web课程课程项目
魔方，经典的智力游戏，既可作为孩子的玩具，也可作为专业选手竞速的项目。对于绝大多数人来说，魔方十分困难，仅仅只能拼出一面。很多情况下，家庭中购买的魔方，一旦打乱，就再也无法还原了。由此，我萌生了编写一个Web网页，帮助人们解决魔方问题的念头。
- 前端交互部分：Vue.js
- 魔方的创建、运动和交互：Three.js
- 魔方的自动还原解法：Cube.js
同时支持PC端和手机端访问（请使用Chrome浏览器）
在项目文件夹下，执行：
npm install安装完必要的依赖包之后，执行：
npm run dev即可运行项目（开发环境下）
如果需要打包，执行：
npm run build生成的静态文件保存在./dist目录下
https://pancerzh.github.io/I-cannot-deal-with-Rubiks-cube/
- 鼠标或手指滑动屏幕，自由转动魔方或转换视角
- 一键随机打乱魔方
- 一键自动还原魔方
- 逐步还原魔方
- 输入真实魔方的颜色序列，并在屏幕上构建与现实世界魔方同步的魔方
- 滑动滑动条，调整魔方转动速度
- 转动次数记录
- 选择预设的魔方花样进行学习和操作
在通勤路上，在排队途中，人们可以随时随地掏出手机转动魔方，同时避免了携带现实魔方的麻烦。
录入显示魔方的颜色序列，然后使用逐步还原魔方功能，四十步内即可还原整个魔方。
提供了多种魔方花样供用户研究学习。
在魔方随机旋转和自动还原的过程中，用户仍然可以自动转换视角。搭配黑色背景上绿色的代码流，可以起到舒缓压力的效果。
对于专业选手，也可以通过计数器功能记录比较自己还原魔方消耗的转动次数，并可参考算法给出的还原步骤，以起到提升自己技术的效果。
- 确定用户输入的方向，使用滑动产生的向量与六个方向的法向量进行比较，夹角最小的那个即是转动的方向。
- 确定旋转的部分，模拟一束光沿着摄像机方向发射，首先射中的物体即是选中的物体。
- 确定旋转的方向，通过以上两者，借助六个面的法向量，确定旋转的具体方向。由于组成模仿的小立方块在转动后，其原始的法向量会发生变化，所以加入了一个透明的固定立方块，用于进行法向量检测。
魔方面的旋转不能绕着小立方体自身的轴旋转，必须绕着世界轴旋转，这样才能实现旋转的效果。如此，每次渲染（即渲染帧）时，都会绕着世界XYZ轴之一旋转一个小角度，这反映在物体的坐标改变上。例如，绕着世界X轴旋转时，改变的就是物体的Y坐标和Z坐标。
-
按顺序扫描小立方体在各个方向上的面，组成魔方的当前序列
/** |************| |*U1**U2**U3*| |************| |*U4**U5**U6*| |************| |*U7**U8**U9*| |************| ************|************|************|************ *L1**L2**L3*|*F1**F2**F3*|*R1**R2**R3*|*B1**B2**B3* ************|************|************|************ *L4**L5**L6*|*F4**F5**F6*|*R4**R5**R6*|*B4**B5**B6* ************|************|************|************ *L7**L8**L9*|*F7**F8**F9*|*R7**R8**R9*|*B7**B8**B9* ************|************|************|************ |************| |*D1**D2**D3*| |************| |*D4**D5**D6*| |************| |*D7**D8**D9*| |************| */
这样获取到的魔方序列形式如下：
UUUUUUUUURRRRRRRRRFFFFFFFFFDDDDDDDDDLLLLLLLLLBBBBBBBBB
-
将序列输入Cube.js提供的接口，初始化Solver，获取到还原步骤。步骤形式如下：
D F U F U2 R2 L2 U2 D2 R2 L2 D2
具体含义可以参考：
-
解析还原步骤，调用旋转动画。
魔方花样是在魔方处于复原状态下，执行一串预设好的操作命令得到的。按键在不同模式下提供的功能不同，需要进行判断和分流。