├── .github └── workflows │ └── gh-pages.deploy.yml ├── .gitignore ├── LICENSE ├── index.html ├── package-lock.json ├── package.json ├── readme.md ├── rollup.config.js ├── src ├── index.ts └── rubiks │ ├── components │ ├── camera.ts │ ├── renderer.ts │ └── scene.ts │ ├── core │ ├── control.ts │ ├── cube.ts │ ├── cubeData.ts │ ├── cubeState.ts │ ├── square.ts │ └── statusbar.ts │ ├── index.ts │ └── util │ ├── math.ts │ └── transform.ts ├── tsconfig.json └── web-dev-server.config.js /.github/workflows/gh-pages.deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | 11 | strategy: 12 | matrix: 13 | node-version: [14.x] 14 | 15 | steps: 16 | - name: Get files 17 | uses: actions/checkout@v2 18 | - name: Use Node.js ${{ matrix.node-version }} 19 | uses: actions/setup-node@v2 20 | with: 21 | node-version: ${{ matrix.node-version }} 22 | - name: Install packages 23 | run: npm ci 24 | - name: Build project 25 | run: npm run build 26 | - name: Deploy 27 | uses: JamesIves/github-pages-deploy-action@4.1.1 28 | with: 29 | branch: gh-pages 30 | folder: dist 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | out-tsc 3 | dist 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2021-present, Pengfei Wang 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 魔方游戏 online | Rubik cube 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 64 | 65 | 66 | 67 |
68 |
69 |

魔方

70 |
71 | 72 | 73 |
74 |
75 | 76 | 87 |
88 |
89 | 90 |
91 | 92 |
93 | 94 |
95 |
96 | 查看源码 97 |
98 |
99 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rubik-cube", 3 | "version": "1.0.0", 4 | "description": "使用 ThreeJs 制作的魔方游戏，支持切换魔方阶数。", 5 | "main": "index.js", 6 | "scripts": { 7 | "tsc:watch": "tsc --watch", 8 | "start": "concurrently --kill-others --names tsc,web-dev-server \"npm run tsc:watch\" \"web-dev-server --config web-dev-server.config.js\"", 9 | "build": "rimraf dist && tsc && rollup -c rollup.config.js" 10 | }, 11 | "keywords": ["rubik-cube", "rubik", "threejs", "webgl", "game"], 12 | "author": "Wang Pengfei (https://pengfeixc.com)", 13 | "license": "MIT", 14 | "devDependencies": { 15 | "@open-wc/building-rollup": "^2.0.1", 16 | "@types/three": "^0.134.0", 17 | "@web/dev-server": "^0.1.28", 18 | "concurrently": "^6.4.0", 19 | "deepmerge": "^4.2.2", 20 | "rimraf": "^3.0.2", 21 | "rollup": "^2.60.2", 22 | "typescript": "^4.5.2" 23 | }, 24 | "dependencies": { 25 | "three": "^0.135.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Rubik Cube 2 | 3 | ThreeJs 制作的魔方游戏，支持自定义魔方阶级（目前界面上只开放 2 - 10 阶魔方）。 4 | 5 | ## Demo 6 | 7 | 试玩地址：[Rubiks Cube - 魔方](https://pengfeiw.github.io/minicode/threejs-rubik) 8 | 9 | ## 运行项目 10 | 11 | 1. 安装 12 | 13 | ```shell 14 | npm install 15 | ``` 16 | 17 | 2. 运行 18 | 19 | ```shell 20 | npm run start 21 | ``` 22 | 23 | 3. 打开浏览器 24 | 25 | 浏览器输入 `http://localhost:8000`。 26 | 27 | ## more 28 | 29 | 更多内容请关注 [Minicode](https://pengfeiw.github.io/minicode)。 30 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import merge from 'deepmerge'; 2 | import {createSpaConfig} from '@open-wc/building-rollup'; 3 | 4 | const baseConfig = createSpaConfig({ 5 | developmentMode: process.env.ROLLUP_WATCH === 'true', 6 | injectServiceWorker: false 7 | }); 8 | 9 | export default merge(baseConfig, { 10 | // any