Claude-Fable-5-Max Three.js魔方测试

源：Claude-Fable-5天气卡片测试 - #22，来自 Lumia

耗时 36m 19s

预览

自建：Claude-Fable-5-Max Three.js 魔方/upfile.ai

Cloudflare Pages：rubiks-cube-4ci.pages.dev

提示词：

你是一名精通图形学算法与 Web 交互的前端专家。请仅用一个 HTML 文件，基于 Three.js (ES Modules) 实现一个物理级高保真、支持自然手势的 3x3 魔方。

一、 交付规范

单文件架构：HTML/CSS/JS 必须合并在一个文件中。

依赖管理：必须通过 importmap 从 unpkg 或 cdn.skypack 引入 Three.js 及其 OrbitControls、Tween.js。

零素材依赖：禁止加载任何外部图片/贴图，所有材质纹理必须使用 HTML5 Canvas API 程序化动态生成。

二、 视觉与物理标准

模型构建：

场景需包含 27 个独立的小方块（Cubies）。

物理间隙：小方块之间必须保留微小的物理间距（Spacing），不可紧贴。

倒角质感：通过 Canvas 绘制带有圆角矩形（Rounded Rect）的贴纸纹理，模拟真实魔方的塑料黑边与贴纸高光效果。

光影环境：

必须开启 ShadowMap。

配置环境光（Ambient）与平行光（Directional），确保魔方有清晰的立体感和阴影投射。

三、 核心逻辑考点（数据结构与变换）

禁止维护复杂的 3D 状态数组，请使用基于"空间位置"的动态计算方案：

动态层级筛选：

不要写死索引。当需要旋转某一层时，遍历所有方块，根据其在世界坐标系（World Position）下的 x, y, z 值与阈值（Epsilon）来判断它是否属于当前旋转层。

Pivot 变换机制（关键考点）：

实现旋转时，必须创建一个临时的 Pivot（轴心对象）。

核心API：使用 pivot.attach(object) 将选中的方块挂载到轴心，旋转轴心，动画结束后使用 scene.attach(object) 将方块放回场景。

作用：利用 attach 自动计算世界矩阵变换，避免手动处理复杂的四元数乘法。

坐标清洗：

每次旋转结束后，必须对所有方块的位置（Position）和旋转（Rotation）进行 Math.round() 取整处理，消除浮点数累积误差，防止魔方"散架"。

四、 交互系统考点（算法重难点）

这是区分初级与高级开发者的核心点，请实现类似原生 App 的自然手势体验：

操作分离：

左键拖拽：旋转魔方的某一层。

右键拖拽：旋转视角（OrbitControls）。

基于投影向量的手势识别算法：

射线检测：点击时获取被点击方块的"表面法线（Face Normal）“。

意图判断：

根据法线，锁定潜在的两个旋转轴（例如点击前面，潜在轴为 X 或 Y）。

将这两个 3D 轴的向量**投影（Project）**到 2D 屏幕空间。

计算用户鼠标滑动的 2D 向量与这两个投影向量的点积（Dot Product），选择匹配度最高的轴作为旋转轴。

方向修正与实时跟随：

实现1:1 实时跟手：鼠标移动多少像素，魔方层转动对应角度。

符号修正：通过叉乘（Cross Product）或投影符号判断，确保无论从魔方正面、背面还是顶面操作，鼠标向右划动始终对应"向右转"的视觉逻辑（解决方向反转 bug）。

磁吸效果：

松开鼠标后，自动计算最近的 90 度倍数，使用 Tween.js 播放回弹动画并对齐网格。

五、 代码质量

代码需包含清晰的注释，解释"手势投影算法"和"Pivot 挂载逻辑”。

具备 Scramble（打乱）和 Reset（重置）功能按钮。