<![CDATA[10-22 提示词挑战： 魔方演示网页]]># 任务：单文件网页 —— 3D 魔方 + 实时六面展开图 交付一个双击即可打开的 index.html。验收标准是"普通用户第一次打开就能看懂、玩转"，因此以下交互细节均为硬性需求，请逐条实现，不要自行简化或重新设计交互流程。 ## 0. 工程约束 - 单个 HTML 文件，CSS/JS 全部内联。唯一外部依赖是 three.js：用 ES Module + importmap 从 CDN 引入（three@0.160 或更新；勿用已移除的非模块版构建）。不得引用任何图片、字体、音频文件——音效必须用 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) 首次点击后声音是否可闻？拖动限频是否有效？静音开关是否生效？

{9398607F-06A6-4186-92F1-42EE9B7D2923}.jpeg

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

]]>https://lcz.me/topic/2501RSS for NodeFri, 23 Oct 2026 00:28:26 GMTThu, 22 Oct 2026 08:23:54 GMT60<![CDATA[Reply to 10-22 提示词挑战： 魔方演示网页 on Thu, 22 Oct 2026 14:21:23 GMT]]>@Tony-Wang 是的，我现在就切换到Qwen3.8-27B-FP8来测试对比一下。

]]>https://lcz.me/post/26773https://lcz.me/post/26773Thu, 22 Oct 2026 14:21:23 GMT<![CDATA[Reply to 10-22 提示词挑战： 魔方演示网页 on Thu, 22 Oct 2026 14:19:12 GMT]]>@Magic629

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

]]>https://lcz.me/post/26771https://lcz.me/post/26771Thu, 22 Oct 2026 14:19:12 GMT<![CDATA[Reply to 10-22 提示词挑战： 魔方演示网页 on Thu, 22 Oct 2026 14:15:14 GMT]]>

@terry 说:

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

俺是真会 😉

]]>https://lcz.me/post/26770https://lcz.me/post/26770Thu, 22 Oct 2026 14:15:14 GMT<![CDATA[Reply to 10-22 提示词挑战： 魔方演示网页 on Thu, 22 Oct 2026 14:13:36 GMT]]>哈哈,应该让他的AGENT写一个JS脚本来自动玩.

]]>https://lcz.me/post/26769https://lcz.me/post/26769Thu, 22 Oct 2026 14:13:36 GMT<![CDATA[Reply to 10-22 提示词挑战： 魔方演示网页 on Thu, 22 Oct 2026 14:12:37 GMT]]>@Tony-Wang 我哥你还是真闲的蛋疼，你居然真玩

]]>https://lcz.me/post/26768https://lcz.me/post/26768Thu, 22 Oct 2026 14:12:37 GMT<![CDATA[Reply to 10-22 提示词挑战： 魔方演示网页 on Thu, 22 Oct 2026 14:11:00 GMT]]>花了46分钟，感觉这个模型还没怎么降智

屏幕截图 2026-10-22 220807.png

index.html

]]>https://lcz.me/post/26767https://lcz.me/post/26767Thu, 22 Oct 2026 14:11:00 GMT<![CDATA[Reply to 10-22 提示词挑战： 魔方演示网页 on Thu, 22 Oct 2026 12:32:56 GMT]]>

@applejuice 说:

rubiks-single.html

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

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

]]>https://lcz.me/post/26738https://lcz.me/post/26738Thu, 22 Oct 2026 12:32:56 GMT<![CDATA[Reply to 10-22 提示词挑战： 魔方演示网页 on Thu, 22 Oct 2026 12:30:38 GMT]]>

@marsempire 说:

index.html

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

20分钟

不会魔方，看不懂……

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

Screenshot 2026-10-22 at 8.29.15 PM.png

]]>https://lcz.me/post/26737https://lcz.me/post/26737Thu, 22 Oct 2026 12:30:38 GMT<![CDATA[Reply to 10-22 提示词挑战： 魔方演示网页 on Thu, 22 Oct 2026 11:19:24 GMT]]>index.html

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

20分钟

不会魔方，看不懂……

]]>https://lcz.me/post/26731https://lcz.me/post/26731Thu, 22 Oct 2026 11:19:24 GMT<![CDATA[Reply to 10-22 提示词挑战： 魔方演示网页 on Thu, 22 Oct 2026 10:49:51 GMT]]>@stxpnet K_XL + 27b 的成果
不看细节还可以
如果正经工作多调几次就应该可以用了

]]>https://lcz.me/post/26729https://lcz.me/post/26729Thu, 22 Oct 2026 10:49:51 GMT<![CDATA[Reply to 10-22 提示词挑战： 魔方演示网页 on Thu, 22 Oct 2026 10:27:58 GMT]]>是的，旧的那个很难一次性做好，我发现那些简单的提示词想一次做好可能必须要opus 5.5那样的前沿模型才可以。

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

]]>https://lcz.me/post/26725https://lcz.me/post/26725Thu, 22 Oct 2026 10:27:58 GMT<![CDATA[Reply to 10-22 提示词挑战： 魔方演示网页 on Thu, 22 Oct 2026 09:50:32 GMT]]>rubiks-single.html

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

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

目标:用HTML及three.js 写一个经典魔方的3D展开图，要求：魔方的每一面一种颜色：红，黄，绿，蓝，白，橙。
上方的魔方是3D可动组件，用户可随意用鼠标拖动让它的一面旋转。
下方为魔方六面展开图，每一面一个圆，圆心中间大圆点是该面的中间方块颜色，周边8个点则对应魔方上周边8个点的颜色。
如果可以再增加拖动时的音效。
验收标准:人类可以通过该网页了解魔方的玩法。能通过多个步骤将魔方还原为初始状态。
]]>https://lcz.me/post/26723https://lcz.me/post/26723Thu, 22 Oct 2026 09:50:32 GMT<![CDATA[Reply to 10-22 提示词挑战： 魔方演示网页 on Thu, 22 Oct 2026 09:06:02 GMT]]>{1B336A7B-8502-43A6-A538-8A4A2910EF44}.jpeg
在我的环境实测，OMP + goal driven插件，10分钟就写好了(主编排花费40Ktoken)，但是第一次运行失败。第二次让它修复 花了非常久也写不好。

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

]]>https://lcz.me/post/26719https://lcz.me/post/26719Thu, 22 Oct 2026 09:06:02 GMT