I-cannot-deal-with-Rubiks-cube

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

I-cannot-deal-with-Rubiks-cube

(★ 69)

使用Three.js+Vue编写的3D前端魔方游戏

I-cannot-deal-with-Rubiks-cube Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# I-cannot-deal-with-Rubiks-cube
使用Three.js+Vue编写的3D前端魔方游戏

同济大学2019年春季学期Web课程课程项目

## 1. 背景

魔方，经典的智力游戏，既可作为孩子的玩具，也可作为专业选手竞速的项目。对于绝大多数人来说，魔方十分困难，仅仅只能拼出一面。很多情况下，家庭中购买的魔方，一旦打乱，就再也无法还原了。由此，我萌生了编写一个Web网页，帮助人们解决魔方问题的念头。

## 2. 使用框架

- 前端交互部分：Vue.js
- 魔方的创建、运动和交互：Three.js
- 魔方的自动还原解法：Cube.js

同时支持PC端和手机端访问（请使用Chrome浏览器）

## 3. 搭建项目

在项目文件夹下，执行：

```shell
npm install
```

安装完必要的依赖包之后，执行：

```shell
npm run dev
```

即可运行项目（开发环境下）

如果需要打包，执行：

```shell
npm run build
```

生成的静态文件保存在./dist目录下

## 4. Demo访问地址

https://pancerzh.github.io/I-cannot-deal-with-Rubiks-cube/

## 5. 主要操作

1. 鼠标或手指滑动屏幕，自由转动魔方或转换视角
2. 一键随机打乱魔方
3. 一键自动还原魔方
4. 逐步还原魔方
5. 输入真实魔方的颜色序列，并在屏幕上构建与现实世界魔方同步的魔方
6. 滑动滑动条，调整魔方转动速度
7. 转动次数记录
8. 选择预设的魔方花样进行学习和操作

## 6. 主打功能

### 1. 消磨时间

在通勤路上，在排队途中，人们可以随时随地掏出手机转动魔方，同时避免了携带现实魔方的麻烦。

### 2. 还原魔方

录入显示魔方的颜色序列，然后使用逐步还原魔方功能，四十步内即可还原整个魔方。

### 3. 娱乐

提供了多种魔方花样供用户研究学习。

### 4. 减压

在魔方随机旋转和自动还原的过程中，用户仍然可以自动转换视角。搭配黑色背景上绿色的代码流，可以起到舒缓压力的效果。

### 5. 锻炼自我

对于专业选手，也可以通过计数器功能记录比较自己还原魔方消耗的转动次数，并可参考算法给出的还原步骤，以起到提升自己技术的效果。

## 7. 实现难点

### 1. 确定旋转位置和方向

1. 确定用户输入的方向，使用滑动产生的向量与六个方向的法向量进行比较，夹角最小的那个即是转动的方向。
2. 确定旋转的部分，模拟一束光沿着摄像机方向发射，首先射中的物体即是选中的物体。
3. 确定旋转的方向，通过以上两者，借助六个面的法向量，确定旋转的具体方向。由于组成模仿的小立方块在转动后，其原始的法向量会发生变化，所以加入了一个透明的固定立方块，用于进行法向量检测。

### 2. 实现旋转动画

魔方面的旋转不能绕着小立方体自身的轴旋转，必须绕着世界轴旋转，这样才能实现旋转的效果。如此，每次渲染（即渲染帧）时，都会绕着世界XYZ轴之一旋转一个小角度，这反映在物体的坐标改变上。例如，绕着世界X轴旋转时，改变的就是物体的Y坐标和Z坐标。

### 3. 解析魔方颜色序列

1. 按顺序扫描小立方体在各个方向上的面，组成魔方的当前序列

```javascript
       /**
         |************|
         |*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

2. 将序列输入Cube.js提供的接口，初始化Solver，获取到还原步骤。步骤形式如下：

D F U F U2 R2 L2 U2 D2 R2 L2 D2

具体含义可以参考：

https://zhinan.sogou.com/guide/detail/?id=1610014901

3. 解析还原步骤，调用旋转动画。

### 4. 使用预设魔方花样

魔方花样是在魔方处于复原状态下，执行一串预设好的操作命令得到的。按键在不同模式下提供的功能不同，需要进行判断和分流。

I-cannot-deal-with-Rubiks-cube

I-cannot-deal-with-Rubiks-cube Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

I-cannot-deal-with-Rubiks-cube

I-cannot-deal-with-Rubiks-cube Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README