xAI: Grok 4.1 Fast 在「SVG 伪 3D 旋转魔方动画」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：xAI: Grok 4.1 Fast
  • 用例名称：SVG 伪 3D 旋转魔方动画
  • 测试类型：网页生成
  • 评测维度：SVG 矢量动画

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名前端开发工程师，擅长 SVG 图形与动画开发。 代码要求： 1. 生成完整的单页 HTML 应用 2. CSS 和 JavaScript 内联在 HTML 文件中 3. 仅使用原生 SVG 元素，不依赖第三方库 4. 代码结构清晰，有适当注释

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

使用纯 SVG 实现一个静态伪 3D 魔方，并添加自动旋转动画。 功能要求： 1. 用 SVG 多边形路径绘制一个 3×3×3 魔方的可见三个面（顶面、左面、右面），每个面用 9 个小格子填充对应颜色 2. 魔方整体绕 Y 轴（或组合轴）持续自动旋转，通过 JavaScript 逐帧更新各顶点坐标模拟 3D 旋转效果 3. 六个面使用标准魔方配色（白、黄、红、橙、蓝、绿） 4. 画面居中展示，背景简洁

任务要求

AI 模型需要满足以下要求：

  1. SVG 中可见三个面均正确绘制，每面包含 9 个小格子
  2. 魔方持续自动旋转，视觉上呈现伪 3D 效果
  3. 六个面使用标准魔方配色且颜色正确对应各面
  4. 旋转动画流畅，无明显卡顿
  5. 仅使用 SVG 元素实现，代码在单个 HTML 文件中

评测结果

综合得分

该模型在此用例的得分为：65.7 分（满分 100 分），已通过

基础难度评测结果

  • 得分：65.7 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html Pure SVG Pseudo 3D 3x3x3 Rubik's Cube with Auto Rotation /* 简洁背景，画面居中 */ body { margin: 0; padding: 0; background: linear-gradient(135deg, #1a1a1a, #333); display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; font-family: Arial, sans-serif; } svg { border: 1px solid #444; box-shadow: 0 0 20px rgba(0,0,0,0.5); } /** * 纯 SVG 伪 3D 3x3x3 魔方实现 * - 仅绘制可见三个面：顶面(白)、左面(绿)、右面(蓝) * - 每个面 3x3=9 个小格子，使用 polygon 绘制 * - 通过 JS 逐帧旋转 (绕 Y 轴) + 透视投影模拟 3D 效果 * - 画家算法排序绘制 (远到近) * - 标准魔方配色 (仅使用三个面的颜色) */ // SVG 命名空间 const NS = 'http://www.w3.org/2000/svg'; // 获取元素 const svg = document.getElementById('cubeSvg'); const group = document.getElementById('cubeGroup'); // 魔方参数 const CUBE_SIZE = 1; // 小立方体边长 const HALF_GAP = 0.5; // 网格线间距 (实际为1，但定义清晰) const GRID_POS = [-1.5, -0.5, 0.5, 1.5]; // 网格线位置 (3x3 格子边界) // 标准魔方颜色 (十六进制，便于视觉) const COLORS = { top: '#FFFFFF', // 顶面 (U: White) left: '#00FF00', // 左面 (L: Green) right: '#0000FF' // 右面 (R: Blue) }; // 预定义 27 个小面 (3 面 x 9 小格子) const facelets = []; // 生成左面 (x = -1.5) 的 9 个小格子 for (let row = 0; row [ x * cos + z * sin, y, -x * sin + z * cos ]); } // 透视投影: 3D -> 2D (z 轴正向远离相机) function project(x, y, z) { const factor = CAMERA_DISTANCE / (CAMERA_DISTANCE + z); return { sx: x * factor * SCALE + CENTER_X, sy: -y * factor * SCALE + CENTER_Y }; } // 创建 polygon 元素 function createPolygon(verts2d, color) { const points = verts2d.map(p => `${p.sx.toFixed(1)},${p.sy.toFixed(1)}`).join(' '); const poly = document.createElementNS(NS, 'polygon'); poly.setAttribute('points', points); poly.setAttribute('fill', color); poly.setAttribute('stroke', '#000'); poly.setAttribute('stroke-width', '1.8'); poly.setAttribute('stroke-linejoin', 'round'); return poly; } // 动画循环 function animate() { // 更新旋转角度 rotationAngle += 0.012; // 旋转并计算每个小面的平均 Z (用于深度排序) const rotatedFacelets = facelets.map(facelet => { const rotatedVerts = rotateY(facelet.verts, rotationAngle); const avgZ = rotatedVerts.reduce((sum, v) => sum + v[2], 0)...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该实现完成了基本的伪3D魔方动画效果，具备透视投影、画家算法深度排序和requestAnimationFrame流畅动画等核心技术要素，代码结构清晰注释完整。主要不足在于：1）仅绕Y轴单轴旋转，缺少倾斜视角，立体感不够充分；2）配色未完全体现六种标准魔方颜色，且固定颜色-面绑定在旋转过程中存在视觉错误风险；3）旋转效果较为简单，未实现组合轴旋转。整体属于基础可用的实现，达到了任务的基本要求但在视觉还原度和3D效果的细腻程度上有提升空间。 【GEMINI】该模型出色地完成了任务，不仅实现了功能要求，还在数学实现（透视投影与深度排序）上展现了极高的专业度。代码简洁、高效且易于维护，生成的伪 3D 旋转效果非常平滑，是高质量的前端开发示例。 【KIMI】该实现是一个功能完整的纯SVG伪3D魔方，核心3D旋转与透视投影逻辑正确，动画流畅。主要扣分点在于：未完整实现六个面的标准配色定义（仅三个面），绿色配色偏差，以及旋转轴单一未实现组合轴旋转。代码质量较高，结构清晰易维护，适合作为基础演示，但距离生产级视觉效果还有提升空间。

进阶难度评测结果

  • 得分：75.2 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html Interactive SVG 3D Rubik's Cube SVG Pseudo-3D Rubik's Cube Drag with mouse to rotate • Click "Reset" for smooth return to initial view 🔄 Reset View body { margin: 0; padding: 20px; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%); color: #fff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: hidden; } #cubeSvg:active { cursor: grabbing !important; } #reset:hover { background: linear-gradient(#00ff00, #00cc00); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,200,0,0.6); } #reset:active { transform: translateY(0); } // Core variables const svg = document.getElementById('cubeSvg'); const cubeG = document.getElementById('cube'); const resetBtn = document.getElementById('reset'); const focal = 240; const grid = [-1.5, -0.5, 0.5, 1.5]; let stickers = []; let rotX = 0.55; let rotY = 0.35; let targetX = 0.55; let targetY = 0.35; let isAnimating = false; let isDragging = false; let prevMouseX = 0; let prevMouseY = 0; const sensitivity = 0.008; // Colors (standard Rubik's Cube) const colors = { front: '#00D400', // Green back: '#0050D4', // Blue left: '#FF8C00', // Orange right: '#D40000', // Red up: '#FFFFFF', // White down: '#FFD500' // Yellow }; // Matrix functions function rotateX(theta) { const c = Math.cos(theta), s = Math.sin(theta); return [ [1, 0, 0], [0, c, -s], [0, s, c] ]; } function rotateY(phi) { const c = Math.cos(phi), s = Math.sin(phi); return [ [c, 0, s], [0, 1, 0], [-s, 0, c] ]; } function matMulMat(a, b) { const c = Array.from({length: 3}, () => [0, 0, 0]); for (let i = 0; i { let i = Math.floor(idx / 3), j = idx % 3; let y1 = grid[i], y2 = grid[i + 1]; let z1 = grid[j], z2 = grid[j + 1]; let verts = [[-1.5, y2, z1], [-1.5, y2, z2], [-1.5, y1, z2], [-1.5, y1, z1]]; return [{ color: colors.left, vertices: verts, normal: [-1, 0, 0] }]; })); // Up (Y+) addSideFace([0, 1.5, 0], 'up', [0, 1, 0], 'x', 'z'); // Down (Y-) stickers.push(...Array(9).fill().flatMap((_, idx) => { let i =...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该实现整体思路正确，覆盖了任务要求的主要功能：SVG魔方绘制、3D旋转矩阵投影、鼠标拖拽交互、背面剔除与画家算法、平滑重置动画。界面美观，核心3D数学逻辑（旋转矩阵、透视投影、法向量可见性判断）实现正确。主要缺陷集中在addSideFace函数存在明显bug（参数未正确使用导致Right和Up面的贴纸几何错误），以及Left/Down面生成逻辑不一致。这些bug会影响实际渲染效果，但基本的魔方视觉呈现和交互功能仍可工作，属于中等质量的实现。 【GEMINI】该模型出色地完成了任务要求，不仅在数学层面准确实现了 3D 投影与旋转矩阵运算，还在前端交互与视觉呈现上达到了极高的水准。代码逻辑严谨，通过画家算法和背面剔除完美解决了 SVG 渲染中的遮挡难题，是一个高质量的单页应用实现。 【KIMI】该实现整体完成了伪3D魔方的核心功能，视觉还原度和交互体验表现良好，3D投影与背面剔除算法正确。但代码存在结构性缺陷：addSideFace函数设计不当导致部分面实现方式不一致，存在维护隐患。矩阵运算和投影逻辑正确， painter算法实现合理。建议优化网格可见度、统一面生成逻辑、增加代码注释以提升可维护性。总体而言是一个功能完整、体验流畅的实现，但代码质量有提升空间。

困难难度评测结果

  • 得分：76.5 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 伪 3D SVG 魔方 body { font-family: 'Segoe UI', Arial, sans-serif; text-align: center; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); margin: 0; padding: 20px; } h1 { color: #333; margin-bottom: 10px; } #controls { margin: 20px 0; } #controls > div { margin: 15px 0; } button { margin: 5px; padding: 12px 20px; font-size: 16px; border: none; border-radius: 8px; background: #4CAF50; color: white; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } button:hover { background: #45a049; transform: translateY(-2px); } button:active { transform: translateY(0); } #toggle-auto { background: #2196F3; } #toggle-auto.active { background: #f44336; } #cube-svg { display: block; margin: 20px auto; border: 3px solid #ddd; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); cursor: grab; background: #f0f0f0; } #cube-svg:active { cursor: grabbing; } .info { font-size: 14px; color: #666; margin-top: 10px; } 🧊 伪 3D SVG 魔方 🖱️ 拖拽旋转魔方 | 🔄 开启自动旋转 👁️ 视角: 正视 俯视 等轴测 🔄 标准转动 (顺时针 90°): U ↑ D ↓ L ← R → F 前 B 后 使用纯 SVG + 原生 JS 实现，支持透视投影、深度排序、惯性拖拽、层转动画等。无第三方库。 // ==================== 数学变换模块 ==================== const Math3D = { mat3_identity: () => [1,0,0, 0,1,0, 0,0,1], mat3_from_axis_angle: (axis, angle) => { const c = Math.cos(angle), s = Math.sin(angle), t = 1 - c; const x = axis[0], y = axis[1], z = axis[2]; const len = Math.hypot(x, y, z); const nx = x / len, ny = y / len, nz = z / len; return [ c + nx*nx*t, nx*ny*t - nz*s, nx*nz*t + ny*s, nx*ny*t + nz*s, c + ny*ny*t, ny*nz*t - nx*s, nx*nz*t - ny*s, ny*nz*t + nx*s, c + nz*nz*t ]; }, mat3_mul: (a, b) => [ a[0]*b[0] + a[1]*b[3] + a[2]*b[6], a[0]*b[1] + a[1]*b[4] + a[2]*b[7], a[0]*b[2] + a[1]*b[5] + a[2]*b[8], a[3]*b[0] + a[4]*b[3] + a[5]*b[6], a[3]*b[1] + a[4]*b[4] + a[5]*b[7], a[3]*b[2] + a[4]*b[5] + a[5]*b[8], a[6]*b[0] + a[7]*b[3] + a[8]*b[6], a[6]*b[1] + a[7]*b[4] + a[8]*b[7], a[6]*b[2] + a[7]*b[5] + a[8]*b[8] ], mat3_mul_vec: (m, v) => [ m[0]*v[0] + m[1]*v[1] + m[2]*v[2],...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该实现展示了较扎实的 3D 数学基础，框架结构完整，涵盖了透视投影、画家算法排序、惯性拖拽、层转动画、视角切换和自动旋转等核心功能。代码模块化程度较好，交互响应总体流畅。主要缺陷集中在两点：一是缺少背面剔除导致不应显示的贴纸面参与渲染，可能在某些视角出现视觉穿插；二是单层转动后贴纸颜色状态未按魔方规则更新（只更新了 cubie 的几何位置和旋转矩阵，没有实现颜色的置换逻辑），这是魔方模拟的核心功能缺失。此外，autoRotate 中存在一处明显 bug 导致自动旋转实际上不工作。整体是一个有良好基础但关键功能不完整的实现。 【GEMINI】该模型出色地完成了任务，在纯 SVG 环境下通过原生 JavaScript 实现了复杂的 3D 魔方逻辑。代码架构严谨，数学实现准确，交互功能完整且流畅，展现了极高的前端图形学开发水平。 【KIMI】该实现是一个功能较为完整的伪3D SVG魔方，核心功能基本达标。透视投影和惯性拖拽体验良好，单层转动动画流畅。主要短板在于3D渲染的背面剔除缺失导致特定视角下视觉错误，以及深度排序的精度限制。代码架构清晰，数学模块封装得当，适合作为教学示例。建议补充背面朝向判断（通过叉积计算面法向量与视线点积）以消除渲染错误，并优化拖拽的pitch角度限制逻辑。

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%