10-22 提示词挑战： 魔方演示网页

[stxpnet]

# 任务：单文件网页 —— 3D 魔方 + 实时六面展开图

交付一个双击即可打开的 index.html。验收标准是"普通用户第一次打开就能看懂、玩转"，因此以下交互细节均为硬性需求，请逐条实现，不要自行简化或重新设计交互流程。

## 0. 工程约束
- 单个 HTML 文件，CSS/JS 全部内联。唯一外部依赖是 three.js：用 ES Module + importmap 从 CDN 引入（[email protected] 或更新；勿用已移除的非模块版构建）。不得引用任何图片、字体、音频文件——音效必须用 WebAudio 实时合成。
- 交互用 Pointer 事件实现（顺带兼容触摸）。
- 布局：上方 3D 魔方区（约 60% 高），下方六面展开图区（约 40%），顶部工具栏。深色背景。窗口 resize 自适应，控制台无报错。
- 初始为复原状态，加载后缓慢自转展示；任何用户交互后停止自转。

## 1. 魔方本体
- 3×3×3 共 27 个小方块：块体黑色（#111 附近），每块外露面贴彩色圆角贴纸，块间留 2%~4% 缝隙，整体是经典魔方外观，而非 27 个实心纯色方块。
- 固定配色（用给定 hex，不许自创近似色）：
  U 上=白 #FFFFFF，D 下=黄 #FFD500，F 前=绿 #009B48，B 后=蓝 #0046AD，R 右=红 #B71234，L 左=橙 #FF5800。

## 2. 面的选中与紫色标定（核心体验，重点验收）
交互为"点选 → 指示 → 拖转"三段式：
1) 悬停预览：指针悬停在任意贴纸上时，该贴纸立即出现细的浅紫色描边，移开消失。让用户点下去之前就知道会选中哪个面。
2) 单击选中：在贴纸上"单击"（pointerdown→pointerup 位移 < 6px 且时长 < 500ms；超过阈值按拖拽处理，见第 3 节）即选中该贴纸所属的面——垂直于该贴纸法线、由 9 个小方块组成的那一层。注意：环绕视角后松手也会触发 click，必须用上述阈值区分，禁止轻点误触发。
3) 选中后（颜色统一 #A855F7）必须同时呈现四组视觉元素，共同回答用户三个问题——选中的是哪个面、绕哪个中心转、往哪边拖：
   - 面外框：沿该面 3×3 贴纸区域外缘一圈紫色描边；需沿面法线向外做极小偏移或使用 polygonOffset，避免与贴纸共面产生 z-fighting 闪烁。
   - 面蒙层：该面 9 张贴纸覆盖 15%~25% 透明度的紫色。
   - 中心块标记：该面正中的小方块（旋转轴穿过的那一块）用明显区别于其余 8 块的紫色标记（如实心圆点或粗环），标示旋转的"轴心"。
   - 双向旋转指示：围绕中心块的两条弧形箭头，分别指示顺时针与逆时针两种拖动方向（旋向以"从该面外侧看"为准）。箭头必须带清晰的箭头头部——只有弧线没有箭头的视为未实现；两条箭头不得互相遮挡、不得遮住中心块标记；颜色须在六种贴纸底色上都清晰可辨（可加对比描边）；同样需做共面偏移防 z-fighting。
4) 选中状态三处同步：3D 上的标定、下方展开图对应圆盘外圈的紫色描边、工具栏文字（如"当前选中：F（绿）——沿箭头方向拖动即可旋转"）。
5) 蒙层、外框、箭头等一切辅助视觉元素自身不得参与射线拾取（否则会挡住后续点击）。
6) 选中与取消：
   - 单击其他贴纸 = 切换选中；单击背景空白处或按 Esc = 取消选中。
   - 一次拖转完成并落格后保留选中（方便连续转动同一面）。此时中心块标记、外框、蒙层必须正确出现在旋转后的新状态上——禁止标定悬空、残留或贴到错误位置；这同时考验落格时辅助节点的重新挂载。
7) 拖转进行中（拖动跟手阶段 + 松手后的吸附动画阶段）可暂时隐藏箭头与蒙层，动画结束后按第 6 条恢复。

## 3. 拖转交互（"拨号盘"手感，重点验收）
- 手势：某面处于选中状态时，在该面任意贴纸上按住并沿箭头指示方向拖动，该层即随指针连续旋转，整体形似拨动旋钮：
  - 方向映射：旋转方向与指针绕"面中心的屏幕投影"的移动方向一致——用户在屏幕上看到指针沿顺时针箭头方向绕中心移动，该层就顺时针转（从该面外侧看），反之亦然；拖动中途反向，旋转须实时反向。
  - 跟手：旋转角随拖动量连续、成比例变化（比例系数自定，保证手感自然），实时刷新渲染，不得只在松手后才转动。
- 拖转鲁棒性（硬性要求）：
  - 使用 setPointerCapture：指针拖出魔方甚至画布之外，旋转仍持续跟手，不得中断或丢失。
  - 指针扫过面中心附近时，旋转角不得出现 180° 跳变或疯转（须对单次增量钳制）。
  - 近似指向/背离中心的纯径向拖动应几乎不产生旋转，松手后回弹吸附到 0°，不计步数。
  - 相机处于斜视角、该面近乎侧对相机时，方向判定仍须正确。
- 松手：从当前角度动画吸附到最近的 90° 整数倍（250~350ms，easeOutCubic 类缓动），配"咔"声；最终相对位移为 0（含转满整圈）时不计步数，否则按每 90° 计 1 步。
- 拖转期间该层锁输入，不叠加第二次旋转（丢弃或排队自选）；相机仍可从背景处环绕。
- 相机与转面互不干扰：背景空白处左键拖动、未选中面的贴纸上拖动、或魔方上右键拖动 = 环绕视角；滚轮 = 缩放。
- 【正确性硬指标】每次旋转结束必须"落格"：拖动与吸附动画用临时 pivot 组驱动 9 个方块，结束后将它们重新挂回魔方根节点，position 四舍五入回整数格点、旋转对齐最近的 90° 朝向，随后按新状态恢复选中标记（见第 2 节第 6 条）。禁止把浮点插值的中间姿态留作最终状态，否则连续几十次旋转后魔方会逐渐散架。
- 数据结构：维护独立于 3D 场景的逻辑状态（每面 9 个贴纸颜色数组，U/D/L/R/F/B 记号）。逻辑状态仅在落格完成时更新；展开图一律由逻辑状态驱动渲染，禁止从 3D 网格采样颜色反推。

## 4. 下方六面展开图
- 6 个圆盘按标准十字展开摆放并加标签：上排 U；中间一行 L、F、R、B；下排 D（可附中文）。
- 每个圆盘：中心 1 个大圆点（直径约为圆盘的 40%）显示该面中心块颜色；外圈 8 个小圆点按 45° 均匀呈时钟方位：12 点=上中块，1:30=右上块，3 点=右中块，4:30=右下块，6 点=下中块，7:30=左下块，9 点=左中块，10:30=左上块。
- 朝向约定（标准展开图）：U 面上边邻 B 面；L/F/R/B 上边邻 U 面；D 面上边邻 F 面。
- 每次转面、打乱、复原完成后，展开图立即由逻辑状态重绘。展开图与 3D 实物必须严格一致，这是验收重点。
- 联动：点击圆盘 = 在 3D 中选中对应面（与第 2 节双向同步）。

## 5. 音效（必需，WebAudio 合成）
- 选中：短促轻"嗒"（三角波 1~2kHz，30~60ms）。
- 拖转中：该层每转过约 30° 播放一声轻微"嗒"（棘轮手感），且须限频（两次间隔 ≥ 40ms），避免快速拖动时连成爆音。
- 落格吸附：清脆"咔"。
- 工具栏提供静音开关（图标用内联 SVG）。注意自动播放策略：AudioContext 须在首次用户手势中创建/resume。

## 6. 工具栏与状态
- 按钮：打乱（随机 20 步、快速动画依次执行）、复原（回到初始状态、步数清零、取消选中）、撤销（加分项）。
- 状态栏实时显示：累计步数、当前选中面、是否已复原（每次动作后检测）。
- 其他加分项：拖转跟手过程中展开图实时同步。

## 7. 代码质量
- 关键算法配中文注释，至少覆盖：拖转方向的屏幕空间判定与角度累积、层旋转的 pivot 与落格、贴纸与展开图的映射、单击/拖拽判定。
- 代码按初始化 / 魔方模型 / 交互 / 渲染循环 / 音效分区块组织。

## 8. 交付与自检（必做）
- 输出完整代码，不得出现"此处省略""同上"等占位。
- 代码之后附自检清单，逐条如实标注【已实现 / 未实现 / 不确定】，严禁虚报：
  1) 选中任意一面：中心块标记与两条方向箭头是否出现且清晰可辨？箭头是否带箭头头部？
  2) 沿箭头方向拖动：该层是否实时跟手同向旋转？中途反向拖动是否实时反转？
  3) 指针拖到画布外再拖回：旋转是否连续未中断？
  4) 拖动轨迹故意扫过面中心：旋转角有无跳变或疯转？
  5) 松手是否总吸附到 90° 整数倍？未产生实际位移时是否回 0 且不计步？
  6) 落格后选中标记是否仍正确贴合该面（无悬空、错位、残影）？
  7) 打乱 20 步后再手动转 10 步：相机对准任意一面，逐点与展开图对应圆盘比对，是否 9/9 颜色一致？
  8) 连续拖转 50 次后：有无错位、缝隙漂移、贴纸闪烁？
  9) 快速轻点贴纸 20 次：是否每次都准确选中、从不误触发转面或环绕？
  10) 首次点击后声音是否可闻？拖动限频是否有效？静音开关是否生效？

图片是这个提示词的灵感来源， 各位 可以测试一下这个提示词，看看多久可以完成，成品效果如何。它应该可以综合考验本地LLM的 空间感知，网页设计，编程等实力。

[stxpnet]

在我的环境实测，OMP + goal driven插件，10分钟就写好了(主编排花费40Ktoken)，但是第一次运行失败。第二次让它修复 花了非常久也写不好。

同时我用GLM5.3 FLASH在另一台电脑上，使用goal interview的方式，模型问了我一些问题。 15分钟就写好并交付了。 不过 在拖曳 魔方的某一面时，用户体验还是差强人意。

[applejuice]

rubiks-single.html

花了36分钟
感觉是玩不了的

弄完了才发现提示词不同了

目标:用HTML及three.js 写一个经典魔方的3D展开图，要求：魔方的每一面一种颜色：红，黄，绿，蓝，白，橙。
上方的魔方是3D可动组件，用户可随意用鼠标拖动让它的一面旋转。
下方为魔方六面展开图，每一面一个圆，圆心中间大圆点是该面的中间方块颜色，周边8个点则对应魔方上周边8个点的颜色。
如果可以再增加拖动时的音效。
验收标准:人类可以通过该网页了解魔方的玩法。能通过多个步骤将魔方还原为初始状态。

[stxpnet]

是的，旧的那个很难一次性做好，我发现那些简单的提示词想一次做好可能必须要opus 5.5那样的前沿模型才可以。

你这个效果很好啊，交互不行是因为提示词没有明确给需求。

[applejuice]

@stxpnet K_XL + 27b 的成果
不看细节还可以
如果正经工作多调几次就应该可以用了

[marsempire]

index.html

strata Swift-Qwen3.8-Flash-Next-GSQ-RCO-IQ3_S

20分钟

不会魔方，看不懂……

[Tony Wang]

@marsempire 说:

index.html

strata Swift-Qwen3.8-Flash-Next-GSQ-RCO-IQ3_S

20分钟

不会魔方，看不懂……

你这个没问题, 就是操作有点儿麻烦. 130步复原.

[Tony Wang]

@applejuice 说:

rubiks-single.html

花了36分钟
感觉是玩不了的

你这个操作不清晰, 玩不了

[Magic629]

花了46分钟，感觉这个模型还没怎么降智

index.html

[terry]

@Tony-Wang 我哥你还是真闲的蛋疼，你居然真玩

[stxpnet]

哈哈,应该让他的AGENT写一个JS脚本来自动玩.

[Tony Wang]

@terry 说:

@Tony-Wang 我哥你还是真闲的蛋疼，你居然真玩

俺是真会

[Tony Wang]

@Magic629

你这个也能玩, 但是操作不便, 在魔方上直接点击, 选不中. 只能点击下方的不同面. 这个操作不直观.

[Magic629]

@Tony-Wang 是的，我现在就切换到Qwen3.8-27B-FP8来测试对比一下。