glm-4.5-air 在「SVG 伪 3D 旋转魔方动画」的评测结果

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

基本信息

  • 模型名称：glm-4.5-air
  • 用例名称：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 文件中

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

我来为您创建一个伪3D魔方的SVG实现，包含自动旋转动画效果。 ```html 3D魔方动画 body { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; font-family: Arial, sans-serif; overflow: hidden; } #cube-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } #cube-svg { filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2)); } // 魔方配置 const CUBE_SIZE = 50; // 每个小格子的尺寸 const CUBE_SPACING = 2; // 格子之间的间距 const CENTER_X = 300; // SVG中心X坐标 const CENTER_Y = 300; // SVG中心Y坐标 // 魔方颜色配置 const COLORS = { top: '#ffffff', // 白色 - 顶面 bottom: '#ffff00', // 黄色 - 底面 front: '#0000ff', // 蓝色 - 前面 back: '#00ff00', // 绿色 - 后面 left: '#ff8c00', // 橙色 - 左面 right: '#ff0000' // 红色 - 右面 }; // 旋转角度 let rotationX = -30; // X轴初始角度 let rotationY = 45; // Y轴初始角度 let rotationZ = 0; // Z轴初始角度 // 动画速度 const ROTATION_SPEED = { x: 0.3, y: 0.5, z: 0.2 }; // 3D点转换为2D投影 function project3DTo2D(x, y, z) { // 应用旋转变换 const cosX = Math.cos(rotationX * Math.PI / 180); const sinX = Math.sin(rotationX * Math.PI / 180); const cosY = Math.cos(rotationY * Math.PI / 180); const sinY = Math.sin(rotationY * Math.PI / 180); const cosZ = Math.cos(rotationZ * Math.PI / 180); const sinZ = Math.sin(rotationZ * Math.PI / 180); // 绕X轴旋转 let y1 = y * cosX - z * sinX; let z1 = y * sinX + z * cosX; // 绕Y轴旋转 let x2 = x * cosY + z1 * sinY; let z2 = -x * sinY + z1 * cosY; // 绕Z轴旋转 let x3 = x2 * cosZ - y1 * sinZ; let y3 = x2 * sinZ + y1 * cosZ; // 透视投影 const perspective = 300; const scale = perspective / (perspective + z2); return { x: CENTER_X + x3 * scale, y: CENTER_Y - y3 * scale }; } // 创建魔方的一个面 function createFace(faceName, faceColor, positions) { const face = document.createElementNS('http://www.w3.org/2000/svg', 'g'); face.setAttribute('class', `face ${faceName}`); positions.forEach((pos, index) => { const rect = document.createElementNS('http://www.w3.org/2000/svg', 'path'); // 计算每个小格子的四个顶点 const x = pos.x * (CUBE_SIZE + CUBE_SPACING); const...

AI 评审点评

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

【CLAUDE】该实现具备基本的3D旋转数学框架和SVG动态绘制思路，代码结构尚可。但核心几何实现存在根本性缺陷：三个面的顶点坐标均在同一平面内构建，未正确建立各面在3D空间中的朝向，导致投影后无法呈现真实的魔方三面立体效果。同时缺乏动态面排序机制，每帧重建大量DOM元素导致性能问题，渐变效果也形同虚设。整体距离「通过坐标变换模拟3D空间旋转视觉效果」的要求仍有较大差距，需要重新设计面顶点的3D坐标构建逻辑并补充深度排序算法。 【GEMINI】这是一个高质量的实现。模型展示了深厚的数学基础，通过手动实现 3D 到 2D 的投影算法解决了 SVG 缺乏原生 3D 支持的问题。虽然在极端旋转角度下的面排序（深度检测）存在微小瑕疵，但作为伪 3D 模拟，其视觉效果和代码规范性均表现出色。 【KIMI】该实现尝试通过纯SVG和JavaScript实现伪3D魔方，具备基本的3D投影和动画框架，但在核心几何结构、面排序算法和性能优化方面存在严重缺陷。三个面的空间位置设置错误导致无法形成正确的立方体形状，缺少painter's algorithm使得遮挡关系处理失败，每帧重建DOM的做法性能极差。建议修正：1）正确设置六个面的空间坐标形成完整立方体；2）实现基于Z深度的面排序；3）优化渲染逻辑避免每帧重建元素；4）调整旋转逻辑以Y轴为主展示典型魔方视角。

进阶难度评测结果

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

模型生成产物

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

我来为您创建一个可拖拽旋转的伪3D魔方。这个实现将包含完整的3D变换、交互和可见性判断功能。 ```html 3D魔方 - 可拖拽旋转 body { margin: 0; padding: 0; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Arial', sans-serif; overflow: hidden; } .container { display: flex; flex-direction: column; align-items: center; gap: 20px; } .cube-container { position: relative; cursor: grab; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3)); } .cube-container:active { cursor: grabbing; } .controls { display: flex; gap: 15px; } button { padding: 12px 24px; font-size: 16px; font-weight: 600; color: white; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } button:active { transform: translateY(0); } .info { color: white; text-align: center; opacity: 0.8; font-size: 14px; } 重置视角 按住并拖动鼠标来旋转魔方 // 魔方配置 const CUBE_SIZE = 90; // 魔方大小 const CELL_SIZE = 30; // 每个小格子大小 const CENTER_X = 200; // SVG中心X const CENTER_Y = 200; // SVG中心Y const PERSPECTIVE = 500; // 透视距离 // 旋转角度 let rotationX = -30; // 初始X轴旋转角度 let rotationY = 45; // 初始Y轴旋转角度 let targetRotationX = rotationX; let targetRotationY = rotationY; // 鼠标交互状态 let isDragging = false; let lastMouseX = 0; let lastMouseY = 0; // 魔方六个面的颜色 const faceColors = { front: 'url(#frontGradient)', back: 'url(#backGradient)', left: 'url(#leftGradient)', right: 'url(#rightGradient)', top: 'url(#topGradient)', bottom: 'url(#bottomGradient)' }; // 3D点类 class Point3D { constructor(x, y, z) { this.x = x; this.y = y; this.z = z; } } // 旋转矩阵函数 function rotateX(point, angle) { const rad = angle * Math.PI / 180; const cos = Math.cos(rad); const sin = Math.sin(rad); return new Point3D( point.x, point.y * cos - point.z * sin, point.y * sin + point.z * cos ); } function rotateY(point,...

AI 评审点评

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

【CLAUDE】该实现完成了魔方伪3D旋转的基本框架，包含旋转矩阵、透视投影、背面剔除、画家算法和交互控制等核心模块，代码结构清晰。然而存在几个关键缺陷：①小格子渲染顺序错误（格子被面背景遮挡），导致3×3网格实际上不可见；②法向量可见性判断的符号逻辑存疑，可能在某些旋转角度下出现错误；③小格子未参与透视变换，仅做简单2D位置插值，视觉效果与真实3D魔方差距较大。整体来看，框架思路正确但细节实现存在较多问题，实际运行效果与预期有明显差距，属于「能跑但效果不佳」的水平。 【GEMINI】这是一个高质量的实现。模型不仅完成了复杂的 3D 坐标变换和透视投影，还通过算法解决了 2D 环境下的遮挡排序问题。虽然在 3x3 格子的几何分割上采用了简化的叠加贴图方式，但整体视觉效果、交互流畅度以及平滑的重置动画均达到了专业前端开发的水平。 【KIMI】该实现完成了3D魔方的核心功能框架，旋转矩阵、透视投影和背面剔除等关键技术点正确，交互响应流畅。但视觉还原度存在明显缺陷——小格子的实现方式完全偏离了3×3网格的结构要求，导致魔方外观失真，这是最主要的失分点。建议重构格子渲染逻辑，使用预计算的3×9个独立小面片而非面内插值，并赋予正确的颜色。代码层面需要加强注释和现代化改造。

困难难度评测结果

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

模型生成产物

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

我将为您创建一个功能完善的伪 3D 魔方应用。这个实现将包含所有您要求的功能，使用纯 SVG 和原生 JavaScript。 ```html 3D 魔方 - 纯 SVG 实现 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: #fff; overflow: hidden; height: 100vh; display: flex; flex-direction: column; } .header { padding: 20px; text-align: center; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); } .header h1 { font-size: 28px; font-weight: 300; letter-spacing: 2px; margin-bottom: 10px; } .main-container { flex: 1; display: flex; position: relative; } .canvas-container { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; } #cube-svg { filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3)); cursor: grab; } #cube-svg:active { cursor: grabbing; } .controls { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); padding: 20px; border-radius: 15px; width: 200px; } .control-section { margin-bottom: 25px; } .control-section h3 { font-size: 14px; font-weight: 500; margin-bottom: 10px; opacity: 0.8; text-transform: uppercase; letter-spacing: 1px; } .button-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; } .control-button { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; padding: 10px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; font-size: 14px; font-weight: 500; } .control-button:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .control-button:active { transform: translateY(0); } .view-buttons { display: flex; gap: 8px; margin-bottom: 10px; } .view-button { flex: 1; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; padding: 8px; border-radius: 8px;...

AI 评审点评

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

【CLAUDE】该实现搭建了一个完整的伪3D魔方应用框架，包含了所有要求功能的代码骨架，UI设计美观，交互逻辑思路清晰。然而，存在多个严重的实现缺陷：最关键的是每个魔方面没有细分为3×3=9个独立格子，仅渲染为单色面块，与魔方的核心视觉特征不符；背面剔除完全缺失导致所有面都被渲染；深度排序与实际渲染坐标不一致；单层转动后颜色状态更新逻辑存在根本性 bug。这些问题使得代码在实际运行时很可能无法正确展示魔方效果，核心功能（层转动）实质上不可用。整体评价：框架完整但实现质量不足，属于「能跑但效果有严重问题」的水平，需要大量修复才能达到题目要求。 【GEMINI】这是一个极高水平的生成结果。模型不仅完美对齐了所有复杂的业务需求（透视、排序、惯性、层旋转），还在细节上超出了预期，例如平滑的视角过渡动画和完善的数学库封装。代码健壮且易于扩展，充分展示了资深前端工程师在 SVG 图形学和 3D 数学变换方面的深厚功底。 【KIMI】该实现是一个功能较为完整的伪3D魔方，在视觉呈现和基础交互方面达到了可用水平。透视投影和拖拽惯性效果表现良好，代码模块化程度较高。但核心功能单层转动存在严重bug，颜色状态更新逻辑错误导致无法正确模拟真实魔方转动。此外，采用27个小立方体而非54个贴纸的渲染方式，与真实魔方外观有差异，且深度排序粒度不够精细。建议修复单层转动的状态更新机制，优化面级渲染和背面剔除，以提升整体体验。

相关链接

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

加载中...
100%