来自 - WWW.YOUINFO.SITE - WWW.YOUINFO.SITE

LinuxDo 最新话题 · 2026-06-10 15:11:24+08:00 · tech

源： Claude-Fable-5天气卡片测试 - #22，来自 Lumia 耗时 36m 19s 预览： Claude-Fable-5-Max Three.js 魔方/upfile.ai 提示词：你是一名精通图形学算法与 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（重置）功能按钮。 2 个帖子 - 2 位参与者阅读完整话题

/tag/来自