doubao-seed-2-1-pro 在「SVG 伪 3D 旋转魔方动画」的评测结果

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

基本信息

  • 模型名称：doubao-seed-2-1-pro
  • 用例名称：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 文件中

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

这是一个使用纯 SVG 和原生 JavaScript 实现的 3D 旋转魔方，包含了完整的 3D 变换、透视投影和动画效果： ```html 3D 旋转魔方 * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); overflow: hidden; } svg { width: 100%; max-width: 600px; height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4)); } (function() { // ==================== 魔方参数配置 ==================== const CUBE_SIZE = 180; // 魔方整体边长 const HALF_SIZE = CUBE_SIZE / 2; // 半边长，用于坐标计算 const GRID_COUNT = 3; // 3x3x3 魔方 const CELL_SIZE = CUBE_SIZE / GRID_COUNT; // 每个小方块的边长 const CENTER_X = 300; // SVG画布中心X坐标 const CENTER_Y = 300; // SVG画布中心Y坐标 const FOCAL_LENGTH = 600; // 透视投影焦距 const TILT_ANGLE_X = 25 * Math.PI / 180; // 固定X轴倾斜角度（弧度） const ROTATION_SPEED = 0.008; // Y轴旋转速度 // 标准魔方配色（国际通用WCA配色） const FACE_COLORS = { top: '#FFFFFF', // 白色 - 顶面 (U) bottom: '#FFD500', // 黄色 - 底面 (D) front: '#009B48', // 绿色 - 前面 (F) back: '#0046AD', // 蓝色 - 后面 (B) left: '#FF8C00', // 橙色 - 左面 (L) right: '#FF0000' // 红色 - 右面 (R) }; // 存储所有小方块面的数据 let cubeFaces = []; const facesGroup = document.getElementById('faces-container'); // ==================== 初始化魔方几何数据 ==================== function initCube() { cubeFaces = []; // 1. 生成顶面 (Y轴正方向，法向量向上) for (let x = 0; x 0表示面朝向观察者 if (rotatedNormal.z { // 先应用X轴倾斜，再应用Y轴旋转 let transformed = rotateX(v, TILT_ANGLE_X); transformed = rotateY(transformed, rotationY); // 透视投影到2D return project(transformed); }); // 3. 计算面的平均深度，用于深度排序 const avgZ = projectedVerts.reduce((sum, v) => sum + v.z, 0) / projectedVerts.length; // 4. 准备SVG多边形数据 visibleFaces.push({ points: projectedVerts.map(v => `${v.x.toFixed(2)},${v.y.toFixed(2)}`).join(' '), color: face.color, depth: avgZ, strokeWidth: Math.max(1, 2.5 * (FOCAL_LENGTH / (FOCAL_LENGTH - avgZ))) }); } // 5. 按深度排序（画家算法：先远后近绘制） visibleFaces.sort((a, b) => a.depth - b.depth); // 6. 更新SVG DOM facesGroup.innerHTML = ''; for (const face of...

AI 评审点评

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

【CLAUDE】该实现完整地完成了任务要求：纯SVG+原生JS实现3D旋转魔方，包含正确的透视投影、背面剔除、深度排序和标准配色。代码质量高，注释完善，动画流畅。主要亮点是完整的3D渲染管线实现和清晰的代码组织。不足之处在于视觉上缺乏面间凹槽/边框的立体分层感，以及旋转轴较为单一（固定X倾角+Y轴旋转），但整体已达到较高水准。 【GEMINI】这是一份极高质量的回答。模型不仅完全满足了用户的所有功能要求，还超预期地提供了一个完整的 3D 渲染引擎逻辑，而非简单的视觉欺骗。魔方在 2D SVG 空间内通过数学变换呈现出了极佳的立体感和透视效果，代码规范，注释专业，是此类任务的典范实现。 【KIMI】该实现是一个高质量的纯SVG 3D魔方动画，完整满足了题目所有功能要求。采用经典的3D图形管线：模型定义→矩阵旋转→透视投影→背面剔除→画家算法排序→SVG渲染。配色标准，结构清晰，动画流畅。主要优化空间在于DOM操作效率和增加更多旋转轴自由度，但整体已远超基础难度要求，是一个优秀的教学级实现。

困难难度评测结果

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

模型生成产物

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

这是一个完整的纯SVG伪3D魔方实现，包含了所有要求的功能： ```html 纯SVG伪3D魔方 * { margin: 0; padding: 0; box-sizing: border-box; } body { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #eee; overflow: hidden; user-select: none; } h1 { margin-bottom: 10px; font-size: 22px; font-weight: 300; letter-spacing: 3px; color: #fff; text-shadow: 0 0 20px rgba(100,200,255,0.5); } #container { position: relative; } svg { display: block; cursor: grab; } svg:active { cursor: grabbing; } .controls { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 500px; } button { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.2s; backdrop-filter: blur(10px); } button:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.4); transform: translateY(-1px); } button:active { transform: translateY(0); } button.active { background: rgba(100,200,255,0.3); border-color: rgba(100,200,255,0.6); } .group { display: flex; gap: 4px; padding: 4px; background: rgba(0,0,0,0.2); border-radius: 8px; } .hint { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.5); } SVG 3D RUBIK'S CUBE U D L R F B 正视 俯视 等轴测 自动旋转 重置 拖拽旋转魔方 · 点击按钮转动单层 // ============ 3D 数学库 ============ const Vec3 = { create: (x=0,y=0,z=0) => [x,y,z], add: (a,b) => [a[0]+b[0], a[1]+b[1], a[2]+b[2]], sub: (a,b) => [a[0]-b[0], a[1]-b[1], a[2]-b[2]], scale: (v,s) => [v[0]*s, v[1]*s, v[2]*s], dot: (a,b) => a[0]*b[0]+a[1]*b[1]+a[2]*b[2], cross: (a,b) => [a[1]*b[2]-a[2]*b[1], a[2]*b[0]-a[0]*b[2], a[0]*b[1]-a[1]*b[0]], length: v => Math.sqrt(v[0]*v[0]+v[1]*v[1]+v[2]*v[2]), normalize: v => { const l=Vec3.length(v); return l [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1], multiply:...

AI 评审点评

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

【CLAUDE】该实现是一个功能较为完整的纯SVG伪3D魔方，覆盖了题目要求的所有核心功能：完整的3×3×3渲染、透视投影、拖拽旋转惯性、画家算法深度排序、六种单层转动动画、三个预设视角平滑切换和自动旋转开关。代码结构模块化，数学库封装清晰。主要风险点在于矩阵行列主序的一致性和单层转动后颜色状态更新的准确性，这些在实际运行中可能导致视觉错误。惯性效果的实现方式略显粗糙。整体而言是一个有较高完成度的实现，但部分3D数学细节需要进一步验证。 【GEMINI】这是一个极其优秀且完整的纯 SVG 3D 魔方实现。模型不仅在数学变换和投影算法上表现精确，更在交互细节（如惯性滑动、平滑视角切换、状态更新逻辑）上展现了深厚的前端功底。代码组织严密，完全符合甚至超出了任务描述中的所有技术要求，是 2D 环境模拟 3D 效果的典范案例。 【KIMI】该实现基本覆盖了所有功能需求，但在3D渲染正确性上存在关键缺陷：背面剔除算法因坐标系混淆会导致可见面判断错误，实际运行中会出现面片穿插或消失的问题。视觉还原度受限于硬编码的透视参数和简单的光照模型。交互体验整体流畅但并发控制过于保守。代码结构模块化程度尚可，但数学库的严谨性和状态管理有提升空间。综合评估为及格偏上水平，核心功能可用但3D渲染正确性不达标。

相关链接

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

加载中...
100%