GLM-5.1 在「SVG 伪 3D 旋转魔方动画」的评测结果
这是该 AI 模型在此测试用例上的详细评测结果。
基本信息
- 模型名称：GLM-5.1
- 用例名称：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 模型需要满足以下要求：
- SVG 中可见三个面均正确绘制，每面包含 9 个小格子
- 魔方持续自动旋转，视觉上呈现伪 3D 效果
- 六个面使用标准魔方配色且颜色正确对应各面
- 旋转动画流畅，无明显卡顿
- 仅使用 SVG 元素实现，代码在单个 HTML 文件中
评测结果
综合得分
该模型在此用例的得分为：94.8 分（满分 100 分），已通过
基础难度评测结果
- 得分：94.8 分
- 通过状态：已通过
模型生成产物
以下是该模型针对此任务的实际生成内容：
```html 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: #07070d; font-family: 'Rajdhani', sans-serif; overflow: hidden; color: #999; user-select: none; -webkit-user-select: none; } /* 背景层：微妙径向光晕 */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 38% 28%, rgba(0,80,180,0.06) 0%, transparent 50%), radial-gradient(ellipse at 62% 72%, rgba(196,30,58,0.04) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, #0e0e18 0%, #07070d 80%); pointer-events: none; z-index: 0; } /* 背景层：缓慢旋转的锥形渐变 */ body::after { content: ''; position: fixed; inset: -60%; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(0,80,180,0.025) 60deg, transparent 120deg, rgba(196,30,58,0.018) 180deg, transparent 240deg, rgba(0,158,96,0.018) 300deg, transparent 360deg); animation: bgSpin 80s linear infinite; pointer-events: none; z-index: 0; } @keyframes bgSpin { to { transform: rotate(360deg); } } /* 背景网格 */ .bg-grid { position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.013) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.013) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; z-index: 0; } .header { text-align: center; margin-bottom: 1rem; position: relative; z-index: 1; animation: fadeUp 1s ease-out both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .title { font-size: clamp(1.3rem, 3.2vw, 1.9rem); font-weight: 700; letter-spacing: 0.5em; text-transform: uppercase; color: #d4d4d4; text-indent: 0.5em; } .header-line { display: block; width: 56px; height: 1px; margin: 0.7rem auto 0; background: linear-gradient(90deg, transparent, #3a3a3a, transparent); } .subtitle { font-size: clamp(0.58rem, 1.4vw, 0.72rem); font-weight: 300; letter-spacing: 0.28em; color:...
AI 评审点评
以下是 AI 评审对该模型输出的点评：
【CLAUDE】这是一个高质量的纯 SVG 伪 3D 魔方实现。候选输出完整实现了所有功能要求：正确绘制 3×3×3 魔方的三个可见面（每面 9 格），使用标准配色，通过 JavaScript 逐帧计算坐标实现流畅的 Y 轴自动旋转动画。技术实现上采用了完整的 3D 图形学管线（旋转变换、透视投影、背面剔除、深度排序、光照计算），视觉效果逼真自然。代码结构清晰，注释详尽，还额外提供了交互功能（拖拽旋转、暂停控制）和精美的 UI 设计。整体表现超出基本要求，达到了专业级水准。 【GEMINI】这是一份极其优秀的实现。模型没有简单地使用 CSS 3D 变换，而是通过纯 SVG 坐标变换和 JS 逐帧计算构建了一个轻量级的 3D 引擎。它不仅满足了所有功能要求（3x3x3 结构、标准配色、自动旋转、纯 SVG 实现），还在交互性、视觉表现（光照阴影）和代码健壮性方面表现出色。整体表现远超基础评测标准。 【KIMI】该实现是一个高质量的纯SVG 3D魔方渲染方案，完整实现了3D旋转、透视投影、背面剔除、画家算法和光照模型，交互功能丰富（拖拽、触摸、暂停）。视觉还原度和3D效果均达到优秀水平，代码结构专业。主要偏差在于题目要求'可见三个面'的静态展示被扩展为可旋转查看任意面的完整魔方，且引入了外部字体资源。整体而言，这是一个技术实现扎实、视觉效果出色的作品，在功能完整性和技术深度上超越了基础要求。
进阶难度评测结果
- 得分：92.1 分
- 通过状态：已通过
模型生成产物
以下是该模型针对此任务的实际生成内容：
```html 伪3D魔方 :root { --bg: #08080d; --fg: #e8e6e3; --muted: #5a5a6e; --accent: #e8a838; --card: #12121a; --border: #28283a; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Space Grotesk', sans-serif; background: var(--bg); color: var(--fg); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; user-select: none; -webkit-user-select: none; } /* 背景氛围层 */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(232,168,56,0.05) 0%, transparent 55%), radial-gradient(ellipse at 20% 70%, rgba(196,30,58,0.03) 0%, transparent 45%), radial-gradient(ellipse at 80% 60%, rgba(0,81,186,0.03) 0%, transparent 45%); pointer-events: none; } /* 微妙网格 */ body::after { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; } .title-area { text-align: center; animation: fadeUp 0.8s ease-out both; } h1 { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; } h1 span { color: var(--accent); } .subtitle { color: var(--muted); font-size: 0.88rem; font-weight: 300; margin-top: 6px; animation: fadeUp 0.8s ease-out 0.15s both; } .svg-wrap { position: relative; transition: filter 0.4s ease; } .svg-wrap:hover { filter: drop-shadow(0 0 50px rgba(232,168,56,0.07)); } #cube-svg { width: min(84vw, 540px); height: min(84vw, 540px); cursor: grab; touch-action: none; display: block; } #cube-svg:active { cursor: grabbing; } .controls { display: flex; gap: 20px; align-items: center; animation: fadeUp 0.8s ease-out 0.3s both; } .btn { font-family: 'Space Grotesk', sans-serif; font-size: 0.88rem; font-weight: 600; padding: 10px 28px;...
AI 评审点评
以下是 AI 评审对该模型输出的点评：
【CLAUDE】这是一个高质量的 SVG 伪 3D 魔方实现。候选输出完整满足所有功能要求：六个面均正确绘制且配色标准，透视投影和旋转矩阵实现准确，画家算法正确处理面的遮挡关系，鼠标拖拽交互流畅，重置视角功能带有平滑动画。特别值得称赞的是额外实现了实时漫反射光照、可见面标签高亮、初始入场动画等增强功能，显著提升了视觉效果和用户体验。界面设计精美，深色主题配合渐变背景和微妙网格营造出现代科技感。代码结构清晰，向量运算模块化良好，预计算优化了性能。主要改进空间在于：部分变量命名可更具描述性，render 函数可进一步拆分，动画进行时可增加视觉反馈。整体而言，这是一个超出基本要求、具有专业水准的实现。 【GEMINI】这是一个极其优秀的实现。模型不仅完全满足了所有功能要求，还在视觉表现、交互细节和代码健壮性上超出了预期。它通过纯原生技术（SVG + JS）在 2D 平面上完美模拟了 3D 空间感，并引入了实时光照和缓动动画等高级特性，展现了极高水平的前端开发能力。 【KIMI】该实现是一个高质量的伪3D魔方SVG应用，完整满足了所有功能要求。旋转投影、背面剔除、交互响应和视觉设计均达到较高水准，尤其在细节打磨（光照、阴影、标签高亮、缓动动画）上超出基础要求。主要改进空间在于增强透视深度感、优化万向锁问题，以及采用更现代的JavaScript语法。整体可作为SVG 3D图形编程的优秀参考实现。
相关链接
您可以通过以下链接查看更多相关内容：
