3D 三阶魔方模拟器：拖拽旋转、逐层还原，烧脑又解压

不需要写代码，用自然语言描述需求，华为云码道（CodeArts）TUI 几分钟就交出一个能在浏览器里直接玩的 3D 三阶魔方模拟器。

开篇

三阶魔方诞生 50 多年，依然是全球最经典的益智玩具：标准配色、6 个面、54 个色块，看似简单却藏着无数种打乱与还原的组合。可惜不是每个人都有实体魔方——现在，用浏览器就能随时玩转它。

这次我们用华为云码道 TUI 生成一个 3D 三阶魔方模拟器：把需求用一句话描述清楚，码道自动完成 Three.js 场景搭建、魔方建模、层旋转动画和还原检测，输出一个单文件 HTML，双击就能在浏览器里拖拽旋转、打乱还原。

码道 TUI 安装

码道 TUI 是华为云推出的 AI 编程助手，支持终端交互模式，用自然语言生成可运行的项目代码。安装方式如下（Windows 与 macOS/Linux 均支持）：

Windows（仅支持在 PowerShell 执行）

# 1. 一键安装
irm https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.ps1 | iex

# 2. 配置环境变量
$env:CODEARTS_CLI_AK="你的AK"
$env:CODEARTS_CLI_SK="你的SK"

# 3. 启动 TUI
codearts

macOS / Linux（终端）

# 1. 一键安装
sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"

# 2. 配置环境变量
export PATH=~/.codeartsdoer/installers:$PATH
export CODEARTS_CLI_AK=你的AK
export CODEARTS_CLI_SK=你的SK

# 3. 启动 TUI
codearts

如果正常回显码道 CLI 的版本号，代表安装成功。首次使用需要开通码道服务并获取 AK/SK：

开通码道：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz
获取 AK/SK：https://codearts.huaweicloud.com/portal/settings/cli-auth

码道能力

码道 TUI 具备以下核心能力：

自然语言编程：用中文描述需求，自动生成完整可运行的代码
3D 场景构建：自动引入 Three.js、搭建场景、相机、光照与轨道控制器
复杂交互设计：能理解「选中层 → 旋转 → 动画 → 状态检测」的完整流程
数学与几何逻辑：处理魔方 27 个方块的世界变换、旋转取整与还原判定
开箱即用：输出单文件 HTML，双击即可在浏览器运行

任务描述

本次要用码道生成一个 3D 三阶魔方模拟器，需求如下（与上方案例截图中的输入原文一致，可直接复制到码道 TUI 复现）：

请开发一个3D三阶魔方模拟器，使用HTML+CSS+Three.js实现，输出单个index.html文件，浏览器打开即可运行。魔方由54个小方块组成，六面标准配色，支持鼠标拖拽旋转视角、点击选中层后转动指定层、一键打乱与还原，记录步数与计时，界面简洁美观，适配桌面浏览器。

把这段需求原样输入码道 TUI，它就开始工作了。

开发过程

第一步：输入需求

在码道 TUI 的输入框中粘贴需求，界面会自动识别并开始规划任务：

第二步：码道自动开发

码道进入 Build 模式，自动设计魔方结构、UI 布局与层旋转方案，并在界面中实时展示思考过程：

第三步：生成完成并运行

约 7 分钟后，码道完成代码生成，输出单文件应用。双击 index.html 用浏览器打开，点击「打乱」后魔方随机执行 25 步打乱并开始计时：

第四步：应用运行效果

双击生成的 HTML 文件在浏览器中打开，3D 魔方正常渲染，拖拽、旋转、打乱、还原全部可用：

代码解析

码道生成的核心逻辑非常清晰，全部集中在一个 HTML 文件中。下面是几个关键片段。

Three.js 引入：通过 importmap 直接使用 CDN 上的 Three.js r160，无需任何构建工具：

<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
    "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
  }
}
</script>

转动定义：用一张映射表把 U/D/L/R/F/B 六个面和正逆方向统一成「轴 + 层 + 方向」三要素：

const MOVE_MAP = {
  'U':  { axis: 'y', layer: 1,  dir: -1 },
  "U'": { axis: 'y', layer: 1,  dir: 1  },
  'D':  { axis: 'y', layer: -1, dir: 1  },
  "D'": { axis: 'y', layer: -1, dir: -1 },
  'R':  { axis: 'x', layer: 1,  dir: -1 },
  "R'": { axis: 'x', layer: 1,  dir: 1  },
  'L':  { axis: 'x', layer: -1, dir: 1  },
  "L'": { axis: 'x', layer: -1, dir: -1 },
  'F':  { axis: 'z', layer: 1,  dir: -1 },
  "F'": { axis: 'z', layer: 1,  dir: 1  },
  'B':  { axis: 'z', layer: -1, dir: 1  },
  "B'": { axis: 'z', layer: -1, dir: -1 },
};

层旋转动画：把目标层的方块临时挂到旋转 Group 上，动画结束后再挂回魔方整体，并对坐标取整消除浮点误差：

const { axis, layer, dir } = MOVE_MAP[move];
const layerCubies = cubies.filter(c => Math.round(c.position[axis]) === layer);
const tempGroup = new THREE.Group();
scene.add(tempGroup);
layerCubies.forEach(c => tempGroup.attach(c));
const targetAngle = dir * Math.PI / 2;
// ... requestAnimationFrame 缓动旋转 ...
layerCubies.forEach(c => {
  cubeGroup.attach(c);
  c.position.x = Math.round(c.position.x);
  c.position.y = Math.round(c.position.y);
  c.position.z = Math.round(c.position.z);
});

还原检测：所有小方块的旋转四元数都归零，就说明魔方已经还原：

function checkSolved() {
  for (const c of cubies) {
    const q = c.quaternion;
    if (Math.abs(q.x) > 0.02 || Math.abs(q.y) > 0.02 || Math.abs(q.z) > 0.02) {
      return false;
    }
  }
  return true;
}

打乱与还原：打乱随机执行 25 步（相邻步不重复同一轴），还原则按历史记录反向回放每一步的逆操作：

for (let i = 0; i < 25; i++) {
  let move;
  do { move = moves[Math.floor(Math.random() * moves.length)]; }
  while (MOVE_MAP[move].axis === lastAxis);
  lastAxis = MOVE_MAP[move].axis;
  sequence.push(move);
}

const history = [...moveHistory].reverse();
for (const m of history) {
  await rotateLayer(inverseMove(m), { addToHistory: false, countStep: false, speed: 90 });
}

整个应用共 443 行，没有任何多余依赖，逻辑紧凑。

真实运行效果

应用在浏览器中正常渲染：深蓝色渐变背景、毛玻璃质感面板，左侧实时显示步数、用时与还原状态，右侧 12 个按钮可以精确操作每一层。鼠标左键拖拽旋转视角、滚轮缩放，点击魔方某一面即可顺时针转动该层，Shift+点击逆时针转动。点击「打乱」随机执行 25 步并启动计时，点击「还原」按历史反向回放，几秒钟就回到初始状态，体验非常流畅。

能力总结

通过这个案例可以看到，码道 TUI 的价值不只是「生成代码」：

交付速度快：从需求到可运行应用只要几分钟
3D 能力强：自动完成 Three.js 场景、光照、贴纸贴图和轨道控制
逻辑严谨：层旋转动画、浮点误差修正、还原检测一个不少
零配置：单文件 HTML 应用，不需要 Node、构建工具或任何依赖
可复现：同样一段需求，随时可以重新生成、修改、迭代

直接下载试玩

这个 Demo 已经完整开源（源代码、本文档、全部截图），托管在公开仓库，可直接下载来玩：

Demo Park 仓库：https://atomgit.com/deli007/demo_park
本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-rubik-cube

打开上面的链接，进入 codearts-rubik-cube 文件夹，把 index.html 下载到本地，用浏览器打开即可运行，无需安装任何依赖。

总结

3D 三阶魔方模拟器只是一个开始。像这样的网页小游戏、小工具、小应用，用码道 TUI 都能快速生成并直接运行——你只需要把想法描述清楚。如果你想亲手试试，现在就开通码道：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

posted @ 2026-08-14 18:34 新科技观察员阅读(10) 评论(0) 收藏举报

刷新页面返回顶部