OpenAI: GPT-5.4 在「SVG 伪 3D 旋转魔方动画」的评测结果

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

基本信息

  • 模型名称：OpenAI: GPT-5.4
  • 用例名称：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 文件中

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 纯 SVG 伪 3D 魔方自动旋转 :root { --bg1: #f7f8fb; --bg2: #e9edf5; --line: rgba(0, 0, 0, 0.25); --shadow: rgba(0, 0, 0, 0.12); } html, body { margin: 0; height: 100%; overflow: hidden; background: radial-gradient(circle at 50% 35%, var(--bg1), var(--bg2)); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .stage { width: 100vw; height: 100vh; display: grid; place-items: center; } svg { width: min(82vw, 820px); height: min(82vh, 820px); display: block; } .tile { stroke: var(--line); stroke-width: 1.3; stroke-linejoin: round; } .face-border { fill: none; stroke: rgba(0, 0, 0, 0.18); stroke-width: 2.2; stroke-linejoin: round; pointer-events: none; } .shadow { fill: var(--shadow); filter: blur(12px); opacity: 0.45; } .hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(0,0,0,0.45); font-size: 13px; letter-spacing: 0.5px; user-select: none; } 纯 SVG + 原生 JavaScript 逐帧投影 (() => { const svg = document.getElementById('svg'); const cubeGroup = document.getElementById('cube'); const shadow = document.getElementById('shadow'); // 视图中心 const CX = 400; const CY = 395; // 单位尺寸：魔方总边长为 2*SIZE const SIZE = 135; // 透视参数 const CAMERA_Z = 700; const FOCAL = 620; // 旋转角速度 let angleY = -0.7; let angleX = -0.5; let angleZ = 0.08; // 标准魔方六面配色 // U 白, D 黄, F 绿, B 蓝, R 红, L 橙 const COLORS = { U: '#ffffff', D: '#ffd500', F: '#009b48', B: '#0046ad', R: '#b71234', L: '#ff5800' }; // 可见三个面：顶面、左面、右面 // 为了匹配常见等轴视觉，这里使用： // 顶面 U(+Y), 左面 L(-X), 右面 F(+Z) const faces = [ { key: 'U', color: COLORS.U, border: document.createElementNS('http://www.w3.org/2000/svg', 'path'), tiles: [], getTileCorners: (r, c) => { const step = (SIZE * 2) / 3; const x0 = -SIZE + c * step; const x1 = x0 + step; const z0 = -SIZE + r * step; const z1 = z0 + step; const y = SIZE; return [ { x: x0, y, z: z0 }, { x: x1, y, z: z0 }, { x: x1, y, z: z1 }, { x: x0, y, z: z1 } ]; }, getFaceOutline: () => ([ { x: -SIZE, y: SIZE, z: -SIZE }, { x: SIZE, y: SIZE, z:...

AI 评审点评

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

【CLAUDE】该实现展示了扎实的3D图形编程能力，透视投影、深度排序、背面剔除等核心算法均正确实现，代码结构清晰规范。主要不足是只定义了U/L/F三个面，当魔方旋转到其他角度时缺少D/B/R三个面的渲染，导致旋转动画在某些角度下视觉不完整。如果补全六个面的定义，整体效果将大幅提升。在已实现的范围内，3D旋转效果和代码质量均表现良好。 【GEMINI】该模型完美完成了任务要求。不仅在视觉上精准还原了魔方结构，更在技术实现上展示了极高的专业水准，通过纯数学计算实现了高质量的 3D 投影与渲染，是 SVG 动画开发的优秀范例。 【KIMI】该实现是一个高质量的纯SVG伪3D魔方，完整满足了核心功能要求。通过数学矩阵运算实现3D到2D的透视投影，配合背面剔除和深度排序，呈现出流畅自然的旋转效果。代码工程化程度高，结构清晰可维护。 minor不足在于面选择（F而非R）与题目字面要求略有偏差，以及部分参数缺乏说明文档。整体而言是一个优秀的技术实现。

进阶难度评测结果

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

模型生成产物

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

```html 纯 SVG 伪 3D 魔方 :root{ --bg1:#0f1220; --bg2:#1c2238; --panel:rgba(255,255,255,.08); --panel-border:rgba(255,255,255,.12); --text:#eef3ff; --muted:#aab6d3; --accent:#7cc7ff; --shadow:rgba(0,0,0,.35); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; color:var(--text); background: radial-gradient(circle at 20% 20%, #27304f 0%, transparent 35%), radial-gradient(circle at 80% 30%, #1f4966 0%, transparent 28%), linear-gradient(135deg, var(--bg1), var(--bg2)); overflow:hidden; } .app{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:20px; } .toolbar{ position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:10; display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--panel-border); background:var(--panel); backdrop-filter: blur(12px); border-radius:14px; box-shadow:0 10px 30px var(--shadow); user-select:none; } .toolbar button{ appearance:none; border:none; outline:none; cursor:pointer; color:#0e1830; background:linear-gradient(180deg, #d8ecff, #95cbff); padding:10px 16px; border-radius:10px; font-weight:700; font-size:14px; box-shadow:0 6px 18px rgba(124,199,255,.35); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; } .toolbar button:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(124,199,255,.42); filter:brightness(1.03); } .toolbar button:active{ transform:translateY(0); } .toolbar .hint{ color:var(--muted); font-size:13px; white-space:nowrap; } .stage{ width:min(92vw, 920px); height:min(78vh, 760px); position:relative; border-radius:22px; border:1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), radial-gradient(circle at 50% 35%, rgba(255,255,255,.06), rgba(255,255,255,0) 50%); box-shadow: inset 0 1px 0...

AI 评审点评

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

【CLAUDE】该实现完整地完成了题目要求的所有功能：六面魔方绘制、3D旋转矩阵投影、鼠标拖拽交互、背面剔除与画家算法、重置视角平滑动画。界面设计美观，有渐变背景、阴影、工具栏等细节。技术实现上透视投影和旋转矩阵正确，交互响应灵敏。主要不足在于画家算法的排序依据不够精确（应使用面中心点深度而非法向量z分量），以及每帧重建DOM的性能问题。总体而言是一个功能完整、视觉效果良好的实现。 【GEMINI】该模型完美完成了任务要求，不仅实现了复杂的 3D 投影与交互逻辑，还在代码的可读性、性能优化（如使用 pointer 事件、合理的渲染循环）以及视觉美感上表现卓越，是一个高质量的单页应用示例。 【KIMI】该实现是一个高质量的纯SVG伪3D魔方，完整满足了所有核心功能要求。3D透视投影准确，背面剔除和画家算法实现正确，交互体验流畅，界面设计专业美观。代码结构合理，无第三方依赖，展现了扎实的前端图形编程能力。主要改进空间在于增加Z轴旋转自由度、完善注释文档，以及考虑添加惯性效果提升交互质感。整体达到生产可用水平，作为技术演示和学习范例均具有较高价值。

困难难度评测结果

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

模型生成产物

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

```html SVG 伪 3D 魔方 :root{ --bg1:#0f1220; --bg2:#1b2238; --panel:rgba(255,255,255,.08); --panel-border:rgba(255,255,255,.14); --text:#eaf0ff; --muted:#aab6d6; --accent:#6ea8ff; --shadow:rgba(0,0,0,.35); } *{box-sizing:border-box} html,body{margin:0;height:100%;background:radial-gradient(circle at 30% 20%, #26304f 0%, var(--bg1) 35%, #090b14 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;overflow:hidden} .app{ height:100%; display:grid; grid-template-rows:auto 1fr auto; gap:10px; padding:12px; } .toolbar,.footer{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 12px; border:1px solid var(--panel-border); background:var(--panel); border-radius:14px; backdrop-filter:blur(10px); box-shadow:0 10px 30px var(--shadow); } .toolbar .group,.footer .group{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .sep{ width:1px;height:24px;background:rgba(255,255,255,.12);margin:0 2px; } button{ appearance:none;border:none;outline:none;cursor:pointer; color:var(--text); background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:8px 12px; font-weight:700; letter-spacing:.2px; transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease; box-shadow:0 4px 10px rgba(0,0,0,.2); min-width:44px; } button:hover{transform:translateY(-1px);background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08))} button:active{transform:translateY(0) scale(.98)} button.active{ background:linear-gradient(180deg, rgba(110,168,255,.35), rgba(110,168,255,.18)); border-color:rgba(110,168,255,.55); box-shadow:0 0 0 1px rgba(110,168,255,.18) inset, 0 8px 20px rgba(31,102,255,.18); } button:disabled{opacity:.45;cursor:not-allowed} .label{font-size:13px;color:var(--muted);font-weight:700} .stage{...

AI 评审点评

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

【CLAUDE】该实现是一个功能相当完整的SVG伪3D魔方，涵盖了所有核心需求：透视投影、画家算法深度排序、背面剔除、鼠标拖拽惯性、六种单层转动动画、视角预设切换和自动旋转。代码架构清晰，数学模块封装良好，DOM池优化性能。主要不足在于：格子间隙的视觉表现依赖gap参数而非显式黑色底座，视觉上不如真实魔方清晰；深度排序在极端视角下可能有轻微错误；单层转动的颜色状态更新依赖浮点取整，存在潜在精度风险。整体而言是一个高质量的实现，达到了题目要求的大部分功能点。 【GEMINI】该模型出色地完成了任务要求，不仅实现了高质量的伪 3D 魔方渲染，还在复杂的 3D 数学变换、深度排序算法以及流畅的交互动画方面表现出了极高的专业水准。代码实现简洁高效，完全符合资深前端开发工程师的编码规范。 【KIMI】该实现是一个高质量的纯SVG 3D魔方项目，完整实现了所有核心功能要求。数学基础扎实，3D变换、投影、旋转算法正确；交互体验流畅，惯性效果和动画过渡自然；代码架构清晰，模块化程度高且注重性能优化。主要改进空间在于视觉细节的打磨（如更精确的配色、魔方边框）和极端视角下的深度排序精度。整体达到生产可用水平，展现了扎实的前端图形学开发能力。

相关链接

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

加载中...
100%