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

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

基本信息

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

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

SVG 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 100%); overflow: hidden; } .container { text-align: center; } h1 { color: #fff; margin-bottom: 30px; font-family: 'Arial', sans-serif; text-shadow: 0 0 10px rgba(255,255,255,0.3); } svg { filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5)); } SVG 3D 魔方 // 魔方标准配色 const COLORS = { white: '#FFFFFF', // 顶面 yellow: '#FFFF00', // 底面 red: '#FF0000', // 右面 orange: '#FF8C00', // 左面 blue: '#0000FF', // 前面 green: '#00FF00' // 后面 }; // 魔方配置 const CUBE_SIZE = 60; // 单个小立方体大小 const GAP = 3; // 小立方体之间的间隙 const TOTAL_SIZE = CUBE_SIZE * 3 + GAP * 2; // 整体大小 // SVG 画布中心 const CENTER_X = 0; const CENTER_Y = 0; // 旋转角度 let angleY = 0; let angleX = 0.3; // 轻微的 X 轴倾斜，增强 3D 效果 // 3D 点旋转函数 function rotatePoint(x, y, z, ay, ax) { // 绕 Y 轴旋转 let cosY = Math.cos(ay); let sinY = Math.sin(ay); let x1 = x * cosY - z * sinY; let z1 = x * sinY + z * cosY; // 绕 X 轴旋转 let cosX = Math.cos(ax); let sinX = Math.sin(ax); let y1 = y * cosX - z1 * sinX; let z2 = y * sinX + z1 * cosX; return { x: x1, y: y1, z: z2 }; } // 3D 到 2D 等距投影 function project(x, y, z) { // 等距投影参数 const scale = 1; return { x: CENTER_X + (x - z) * scale * 0.866, // cos(30°) ≈ 0.866 y: CENTER_Y + (x + z) * scale * 0.5 - y // sin(30°) = 0.5 }; } // 创建单个小立方体的面 function createFacePoints(cx, cy, cz, face) { const half = CUBE_SIZE / 2; let points3d = []; switch(face) { case 'top': // 顶面 (y 最大面) points3d = [ { x: cx - half, y: cy + half, z: cz - half }, { x: cx + half, y: cy + half, z: cz - half }, { x: cx + half, y: cy + half, z: cz + half }, { x: cx - half, y: cy + half, z: cz + half } ]; break; case 'front': // 前面 (z 最大面) points3d = [ { x: cx - half, y: cy - half, z: cz + half }, { x: cx + half, y: cy - half, z: cz + half }, { x: cx + half, y: cy + half, z: cz + half }, { x: cx - half, y: cy + half, z: cz + half } ]; break; case...

AI 评审点评

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

【CLAUDE】该实现整体框架思路正确，具备3D旋转的基本逻辑（坐标变换、深度排序、逐帧动画），代码结构清晰。但存在几个关键缺陷：一是左面、底面、后面的顶点生成函数错误地复用了其他面的函数，导致这些面在空间中的位置不正确；二是使用等距投影而非透视投影，缺乏真实的近大远小效果；三是旋转过程中可能出现面穿插的视觉问题。这些问题影响了最终的视觉还原度和3D效果真实感，属于中等水平的实现。 【GEMINI】这是一个非常优秀的实现。模型不仅完成了基础的 2D 绘图，还深入底层通过 JavaScript 模拟了 3D 渲染管线的核心步骤（坐标转换、投影、深度排序）。生成的魔方旋转平滑，遮挡逻辑正确，充分展示了在受限环境下处理复杂空间几何的能力。 【KIMI】该实现尝试用纯SVG和JavaScript实现3D魔方，基本框架正确但核心3D算法存在缺陷。主要问题：1) 面剔除机制缺失，导致所有6个面始终显示，旋转时出现严重视觉混乱；2) 等距投影替代透视投影，3D真实感不足；3) 面的朝向处理错误，复用顶点生成函数导致法向量方向问题。代码结构尚可但关键算法实现不当，未能达到「静态伪3D魔方显示三个可见面」的基本要求，旋转效果因面穿插而显得混乱。建议补充正确的面剔除判断（基于法向量与视线方向的点积）和透视投影，修复各面顶点朝向问题。

进阶难度评测结果

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

模型生成产物

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

SVG 3D 魔方 * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .container { text-align: center; } h1 { color: #fff; margin-bottom: 20px; text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } .svg-container { width: 500px; height: 500px; margin: 0 auto; cursor: grab; } .svg-container:active { cursor: grabbing; } button { margin-top: 20px; padding: 12px 24px; font-size: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 30px; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); } button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); } button:active { transform: translateY(0); } .instructions { color: #aaa; margin-top: 20px; font-size: 14px; } SVG 3D 魔方 重置视角 按住并拖动鼠标来旋转魔方 // 魔方配置 const CONFIG = { size: 150, // 魔方大小 gap: 3, // 格子间距 perspective: 400, // 透视距离 colors: { // 标准魔方配色 front: '#FF0000', // 红 back: '#FF8C00', // 橙 right: '#0000FF', // 蓝 left: '#00FF00', // 绿 top: '#FFFFFF', // 白 bottom: '#FFFF00' // 黄 } }; // 3D 变换工具类 class Math3D { // 旋转矩阵 - 绕X轴 static rotateX(theta) { const cos = Math.cos(theta); const sin = Math.sin(theta); return [ [1, 0, 0], [0, cos, -sin], [0, sin, cos] ]; } // 旋转矩阵 - 绕Y轴 static rotateY(theta) { const cos = Math.cos(theta); const sin = Math.sin(theta); return [ [cos, 0, sin], [0, 1, 0], [-sin, 0, cos] ]; } // 矩阵乘法 static multiplyMatrixVector(matrix, vector) { return [ matrix[0][0] * vector[0] + matrix[0][1] * vector[1] + matrix[0][2] * vector[2], matrix[1][0] * vector[0] + matrix[1][1] * vector[1] + matrix[1][2] * vector[2], matrix[2][0] * vector[0] + matrix[2][1] * vector[1] + matrix[2][2] * vector[2] ]; } // 透视投影 static project(point, perspective) {...

AI 评审点评

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

【CLAUDE】该实现在架构设计和数学逻辑上思路正确，涵盖了3D旋转矩阵、透视投影、画家算法、背面剔除等核心技术点，代码模块化程度较好。然而最致命的问题是代码在`addDecorations`方法中被截断，导致整个HTML文件不完整、无法正常运行。这是一个根本性的缺陷，使得所有功能均无法实际验证。若代码完整，预计可达到中等偏上的实现水平，但当前状态下实际可用性为零，各维度评分均受到较大影响。 【GEMINI】这是一个高质量的 SVG 3D 模拟实现。模型不仅完成了基础的坐标变换，还深入考虑了 3D 渲染中的核心问题，如法向量剔除、画家算法排序以及光影处理。交互设计优雅，重置视角的平滑过渡体现了良好的前端开发素养。尽管受限于输出长度导致末尾少量装饰性代码截断，但核心逻辑完整且可直接运行。

困难难度评测结果

  • 得分：44.9 分
  • 通过状态：未通过

模型生成产物

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

伪3D SVG魔方 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 20px; color: #fff; } h1 { margin-bottom: 20px; text-align: center; text-shadow: 0 0 10px rgba(100, 200, 255, 0.5); } .container { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 1000px; width: 100%; } .svg-container { background: rgba(0, 0, 0, 0.3); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); padding: 20px; cursor: grab; transition: box-shadow 0.3s; } .svg-container:active { cursor: grabbing; } .svg-container:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(100, 200, 255, 0.2); } .controls { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; background: rgba(0, 0, 0, 0.4); padding: 20px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .control-group { display: flex; flex-direction: column; gap: 10px; align-items: center; } .control-group h3 { font-size: 14px; color: #aaa; text-transform: uppercase; letter-spacing: 1px; } .buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } button { background: linear-gradient(135deg, #4a6fa5 0%, #166088 100%); border: none; color: white; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); background: linear-gradient(135deg, #5a8fc5 0%, #267098 100%); } button:active { transform: translateY(0); } button.toggle.active { background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%); box-shadow: 0 0 15px rgba(79, 195, 247, 0.5); } .face-buttons button { width: 45px; height: 45px; padding: 0; font-size: 16px; } .view-buttons button {...

AI 评审点评

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

【CLAUDE】该生成结果存在严重的代码截断问题——JavaScript 在 eulerToQuaternion 函数定义中途被切断，导致整个应用完全无法运行。已完成的部分包括精美的 CSS 样式、合理的 HTML 结构和质量较高的数学工具库（MathUtils），体现了开发者对 3D 数学的理解。然而，魔方的核心功能——渲染、交互、动画——均未实现。这是一个「只有骨架没有肉」的失败输出，无法满足任何功能性需求。建议重新生成并确保代码完整性。 【GEMINI】这是一个极高水平的 SVG 3D 实现方案。模型不仅完成了基础的魔方建模，还深入到了 3D 图形学的核心，如四元数旋转、透视投影矩阵和画家算法排序。尽管受限于输出长度导致 JavaScript 后半部分逻辑缺失，但其展现出的数学功底和工程结构非常出色，完全满足「伪 3D」的视觉与交互需求。 【KIMI】该实现展示了扎实的3D数学基础和良好的代码模块化设计，使用四元数进行旋转表示较为专业。但代码在关键功能处被截断，导致无法完整验证所有需求是否实现。已实现的数学工具库质量较高，UI界面设计完整，但核心交互逻辑（单层转动动画、拖拽惯性、视角过渡）的完整性存疑。建议在完整代码基础上重新评估，当前基于可见代码给出中等偏上评分。

相关链接

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

加载中...
100%