你是一名精通图形学算法与 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（重置）功能按钮。
以上是提示词，glm5.1也能做出来，但是有点小瑕疵，我用gemini3.5flash尝试着做了一下
一点问题没有，完成度特别高，旋转时的ui，逻辑都没问题，这个看完了之后真是瘫坐在椅子上了
3 个帖子 - 2 位参与者