OpenAI: gpt-oss-120b 在「SVG 伪 3D 旋转魔方动画」的评测结果

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

基本信息

  • 模型名称：OpenAI: gpt-oss-120b
  • 用例名称：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 文件中

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

**完整的单页 HTML（SVG + CSS + JS）** 下面的代码实现了一个 **伪 3‑D 3×3×3 魔方**（只显示顶面、左面、右面），每个面由 9 个小格子组成并使用标准魔方配色。 JavaScript 通过每帧计算 3‑D 旋转矩阵并投影到 2‑D，利用 `requestAnimationFrame` 让魔方持续自动旋转。 ```html SVG 伪 3D 魔方（自动旋转） /* 页面居中、背景简洁 */ html,body{ height:100%;margin:0;background:#f0f0f0; display:flex;align-items:center;justify-content:center; } svg{ /* 让 SVG 在视口中保持正方形比例 */ width:80vmin;height:80vmin; /* 为了让投影后坐标更好看，使用等宽等高的 viewBox */ background:#fff; box-shadow:0 0 12px rgba(0,0,0,.2); } /* ------------------------------------------------------------- 1️⃣ 参数 & 基础几何 ------------------------------------------------------------- */ const SVG_NS = "http://www.w3.org/2000/svg"; const cube = document.getElementById('cube'); // 魔方尺寸（立方体边长为 2，中心在原点） const CUBE_SIZE = 2; const HALF = CUBE_SIZE / 2; // 1 const SUB = CUBE_SIZE / 3; // 每个小格的宽度 = 2/3 // 颜色（标准魔方配色） const COLORS = { top: '#ffffff', // 白 left: '#0051ba', // 蓝 right: '#009b48' // 绿 }; /* ------------------------------------------------------------- 2️⃣ 生成 27 个小格子（每个格子对应一个 ） ------------------------------------------------------------- */ const squares = []; // [{face, i, j, points:[], element:SVGPolygon} …] function createPolygon(fill){ const p = document.createElementNS(SVG_NS,'polygon'); p.setAttribute('fill',fill); p.setAttribute('stroke','#000'); p.setAttribute('stroke-width',0.5); cube.appendChild(p); return p; } /* ---- 顶面 (y = +1) ------------------------------------------------ */ for(let i=0;i{ const proj = sq.pts.map(p=>project(rotate(p, angleX, angleY))); const pointsStr = proj.map(p=>p.join(',')).join(' '); // 平均 z 用来做深度排序（越大越靠前） const avgZ = sq.pts.reduce((sum,p)=>sum+rotate(p, angleX, angleY)[2],0)/4; return {element:sq.element, pointsStr, avgZ}; }); // 深度排序（从远到近依次插入 DOM） renderList.sort((a,b)=>a.avgZ-b.avgZ); renderList.forEach(item=>{ item.element.setAttribute('points', item.pointsStr); // 把元素重新放到容器末尾，确保绘制顺序 cube.appendChild(item.element); }); // 更新旋转角度（每帧约 0.5°） angleY += 0.01; angleX += 0.005; // 让视角略有变化，避免死板...

AI 评审点评

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

【CLAUDE】该实现完成了题目的核心要求：三面可见的伪 3D 魔方、逐帧坐标变换旋转、透视投影、深度排序，代码结构清晰且注释完整，技术实现路线正确。主要扣分点在于：六面配色要求未完整实现（仅定义三面颜色，且未严格对应标准魔方配色方案）；透视效果因参数设置偏弱；缺少背面剔除导致旋转到某些角度时视觉效果不够准确。整体属于中上水平的实现，功能基本达标但细节打磨不足。 【GEMINI】这是一个高质量的实现。模型不仅完成了基础的 SVG 绘图，还深入解决了 3D 渲染中的核心问题——深度排序（Z-index handling），使得旋转动画在视觉上非常真实且无破绽。代码逻辑严谨，是 2D 环境模拟 3D 效果的优秀范例。 【KIMI】该实现基本完成了伪3D魔方的核心功能，三个可见面绘制正确，自动旋转流畅，代码结构清晰。主要不足在于配色不符合标准魔方的相邻面逻辑（蓝绿为相对面不应同现），以及旋转设计导致背面缺失的问题。3D透视效果尚可但旋转轴的复合运动破坏了刚体感。整体为合格的实现，但在视觉真实感和旋转逻辑上有提升空间。

进阶难度评测结果

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

模型生成产物

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

**完整的单页 HTML（全部代码已内联）** 下面的示例使用原生 **SVG**、**JavaScript** 与 **CSS**，实现了一个可以鼠标拖拽旋转、带透视效果的伪 3D 魔方。 - 每个小格子都是 **``**（符合「用 SVG 路径绘制」的要求） - 通过 3‑D 旋转矩阵 + 简单的透视投影把 3‑D 坐标映射到 SVG 平面 - 根据面法向量与视线的点积隐藏背面，并使用 **Painter’s algorithm**（深度排序）实现正确遮挡 - 拖拽时实时旋转，松开后保持姿态 - 「重置视角」按钮会平滑回到初始角度 > **提示**：在现代浏览器（Chrome / Edge / Firefox / Safari）中直接打开即可体验。 ```html SVG 伪 3D 可拖拽魔方 body{ margin:0;display:flex;flex-direction:column;align-items:center; justify-content:center;height:100vh;background:#222;font-family:Arial,Helvetica,sans-serif; color:#eee; } #cubeContainer{ width:500px;height:500px;position:relative; } svg{ width:100%;height:100%;background:#111;cursor:grab; user-select:none;touch-action:none; } svg:active{cursor:grabbing;} button{ margin-top:12px;padding:8px 16px;font-size:14px; background:#4a90e2;color:#fff;border:none;border-radius:4px; cursor:pointer;transition:background .2s; } button:hover{background:#357ab8;} 重置视角 /* ------------------------------------------------------------- 基础数据：魔方的几何体、颜色、面定义 ------------------------------------------------------------- */ const CUBE_SIZE = 1; // 整个魔方的边长（单位） const SUB = CUBE_SIZE / 3; // 小格子的边长 const HALF = CUBE_SIZE / 2; // 半边长，方便定位面 // 标准魔方配色（顺序：+X, -X, +Y, -Y, +Z, -Z） const FACE_COLORS = { posX: '#ff4136', // 红 negX: '#ff851b', // 橙 posY: '#ffffff', // 白 negY: '#ffdc00', // 黄 posZ: '#2ecc40', // 绿 negZ: '#0074d9' // 蓝 }; // 每个面的法向量（未旋转时） const FACE_DEFS = [ { name:'posX', normal:[ 1, 0, 0], offset:[ HALF, 0, 0], u:[0,1,0], v:[0,0,1] }, // 右 { name:'negX', normal:[-1, 0, 0], offset:[-HALF, 0, 0], u:[0,1,0], v:[0,0,-1]}, // 左 { name:'posY', normal:[ 0, 1, 0], offset:[ 0, HALF, 0], u:[1,0,0], v:[0,0,-1]}, // 上 { name:'negY', normal:[ 0,-1, 0], offset:[ 0,-HALF, 0], u:[1,0,0], v:[0,0, 1]}, // 下 { name:'posZ', normal:[ 0, 0, 1], offset:[ 0, 0, HALF], u:[1,0,0], v:[0,1,0] }, // 前 { name:'negZ', normal:[ 0, 0,-1], offset:[ 0, 0,-HALF], u:[-1,0,0], v:[0,1,0] } // 后 ]; /* ------------------------------------------------------------- 生成 27*6...

AI 评审点评

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

【CLAUDE】该实现在架构设计上思路正确，涵盖了魔方几何体生成、旋转矩阵变换、透视投影、背面剔除、Painter's algorithm 深度排序、鼠标拖拽交互和重置动画等所有要求的功能模块。代码注释较为详细，结构层次分明。然而存在几个关键问题影响了最终质量：一是遗留的无效代码块（对零向量的矩阵乘法）暴露了代码未经充分审查；二是 SVG path 的 `d` 属性格式可能存在跨浏览器兼容性问题；三是初始角度为 (0,0) 导致魔方初始只显示一个面，视觉展示效果较差；四是旋转灵敏度偏低影响交互体验。总体而言，这是一个功能基本完整但细节处理不够精细的实现，在实际运行中可能存在一些视觉和交互上的瑕疵。 【GEMINI】这是一个极高水平的实现。模型不仅精通 SVG 绘图，还展现了扎实的计算机图形学基础，通过原生 JavaScript 手写了 3D 渲染管线（顶点变换、投影、剔除、排序）。交互细节处理到位，代码优雅且易于维护，完美达成了所有功能要求。 【KIMI】该实现是一个功能完整的 SVG 伪 3D 魔方，核心需求（旋转矩阵投影、背面剔除、鼠标交互、重置动画）均已实现，代码质量良好。主要缺陷在于 Painter 算法的粒度问题（按格子而非按面排序）可能导致视觉穿插错误，以及 3×3 网格的视觉分隔不够清晰。建议在面层级进行深度排序，并添加格子边框以增强魔方真实感。整体达到可用水平，适合作为学习参考或基础演示。

困难难度评测结果

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

模型生成产物

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

下面的代码就是 **完整的单页 HTML 应用**，所有 CSS、JS 都写在同一个文件里，使用 **原生 SVG** 完成一个可交互的“伪 3D”魔方。 > 代码结构概览 > - **数学模块**：向量、矩阵、四元数（仅用矩阵实现）以及透视投影函数，全部封装在 `Math3D` 对象里。 > - **渲染模块**：`CubeRenderer` 负责把 3D 贴纸（sticker）投影到 SVG、深度排序并一次性更新 `innerHTML`，避免频繁的 DOM 操作。 > - **交互模块**：拖拽旋转、惯性滑动、层旋转动画、视角预设、自动旋转开关全部在 `CubeController` 中实现。 > - **UI**：底部的按钮区提供层旋转、视角切换、自动旋转开关。 直接把下面的代码保存为 `cube.html`，用现代浏览器打开即可体验。 ```html SVG 伪 3D 魔方 html,body{margin:0;height:100%;overflow:hidden;background:#222;font-family:Arial,Helvetica,sans-serif} #svgRoot{width:100%;height:100%;display:block;background:#111} .ui{position:absolute;bottom:10px;left:50%;transform:translateX(-50%); background:rgba(0,0,0,0.4);border-radius:6px;padding:6px 10px; color:#fff;font-size:14px;user-select:none} .ui button{margin:2px;padding:4px 8px;background:#444;color:#fff; border:none;border-radius:3px;cursor:pointer} .ui button.active{background:#0a84ff} 层转： U D L R F B    视角： 俯视 正视 等轴测    自动旋转: OFF /* ==================== 3D 数学模块 ==================== */ const Math3D = (() => { const toRad = a => a * Math.PI / 180; const sin = Math.sin, cos = Math.cos; // 向量 const vec3 = (x=0,y=0,z=0) => ({x,y,z}); const add = (a,b)=>vec3(a.x+b.x,a.y+b.y,a.z+b.z); const sub = (a,b)=>vec3(a.x-b.x,a.y-b.y,a.z-b.z); const mul = (v,s)=>vec3(v.x*s,v.y*s,v.z*s); const dot = (a,b)=>a.x*b.x+a.y*b.y+a.z*b.z; const cross = (a,b)=>vec3( a.y*b.z-a.z*b.y, a.z*b.x-a.x*b.z, a.x*b.y-a.y*b.x ); // 4x4 矩阵（列主序） const identity = () => [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; const multiply = (A,B)=>{ // A·B const C = new Array(16); for(let i=0;i[1,0,0,0, 0,1,0,0, 0,0,1,0, tx,ty,tz,1]; const scale = s=>[s,0,0,0, 0,s,0,0, 0,0,s,0, 0,0,0,1]; const rotateX = a=>{a=toRad(a); const c=cos(a),s=sin(a); return [1,0,0,0, 0,c,-s,0, 0,s,c,0, 0,0,0,1]; }; const rotateY = a=>{a=toRad(a); const c=cos(a),s=sin(a); return [c,0,s,0, 0,1,0,0, -s,0,c,0, 0,0,0,1]; }; const rotateZ = a=>{a=toRad(a); const c=cos(a),s=sin(a); return [c,-s,0,0, s,c,0,0, 0,0,1,0, 0,0,0,1]; }; // 把 3D 点 (向量) 用矩阵变换后返回新向量...

AI 评审点评

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

【CLAUDE】该实现展示了良好的代码架构意识，模块划分清晰，交互框架完整，但存在多个关键技术错误：1）透视投影矩阵与变换函数的行列主序不一致导致投影结果错误；2）SVG 坐标系与 NDC 坐标系未做映射，魔方可能不可见；3）贴纸顶点插值逻辑错误导致格子无法正确渲染；4）深度排序使用 NDC z 而非视空间 z；5）背面剔除缺失；6）层旋转后颜色状态不更新（代码中明确说明省略）。这些问题使得代码在实际运行时无法达到预期效果，是一个框架完整但核心实现存在根本性缺陷的实现。 【GEMINI】这是一个高质量的 SVG 3D 实现方案。模型不仅展示了深厚的数学功底（矩阵变换与透视投影），还提供了极佳的交互体验（惯性、平滑过渡、层旋转）。虽然在层旋转后的「颜色状态持久化更新」上做了简化处理（仅演示了几何旋转，未重排颜色数组），但作为单页演示代码，其核心逻辑和视觉效果已达到顶尖水平。 【KIMI】该实现展示了基本的3D数学能力和SVG渲染技巧，整体架构模块化较好。但存在关键功能缺陷：颜色状态未在层旋转后更新（仅演示几何变换）、深度排序使用错误的z值比较、贴纸生成逻辑有误导致网格不规整、标准配色错误。透视投影和交互惯性效果基本达标，但3D渲染正确性因算法实现问题未能完全满足要求。建议修正投影深度计算方式、实现真正的颜色状态管理、修正标准配色方案，并添加背面剔除优化渲染正确性。

相关链接

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

加载中...
100%