hunyuan-large 在「SVG 伪 3D 旋转魔方动画」的评测结果

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

基本信息

  • 模型名称：hunyuan-large
  • 用例名称：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 文件中

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

以下是一个完整的单页 HTML 应用，使用纯 SVG 实现了一个静态伪 3D 魔方，并添加了自动旋转动画。代码中包含了详细的注释，以便理解每一部分的功能。 ```html 3D Rubik's Cube body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } svg { width: 300px; height: 300px; } const cube = document.querySelectorAll('g'); const colors = ['url(#white)', 'url(#yellow)', 'url(#red)', 'url(#orange)', 'url(#blue)', 'url(#green)']; let angle = 0; function rotateX(matrix, angle) { const cos = Math.cos(angle); const sin = Math.sin(angle); return [ cos, 0, sin, 0, 0, 1, 0, 0, -sin, 0, cos, 0, 0, 0, 0, 1 ]; } function rotateY(matrix, angle) { const cos = Math.cos(angle); const sin = Math.sin(angle); return [ cos, -sin, 0, 0, sin, cos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]; } function applyTransform(element, matrix) { const transform = `matrix(${matrix.join(' ')})`; element.setAttribute('transform', transform); } function animate() { angle += 0.01; const rotationMatrix = multiplyMatrices(rotateY(rotateX([], angle * 0.5)), rotateX([], angle * 0.5)); cube.forEach((face, index) => { applyTransform(face, rotationMatrix); }); requestAnimationFrame(animate); } function multiplyMatrices(a, b) { return a[0] * b[0] + a[1] * b[3], a[0] * b[1] + a[1] * b[4], a[0] * b[2] + a[1] * b[5] + a[2], a[3] * b[0] + a[4] * b[3] + a[5] * b[6], a[3] * b[1] + a[4] * b[4] + a[5] * b[7], a[3] * b[2] + a[4] * b[5] + a[5] * b[8], a[6] * b[0] + a[7] * b[3] + a[8] * b[6], a[6] * b[1] + a[7] * b[4] + a[8] * b[7], a[6] * b[2] + a[7] * b[5] + a[8] * b[8]; } animate(); ``` ### 说明： 1. **SVG 结构**：定义了一个 `viewBox` 为 `-1.5 -1.5 3 3` 的 SVG 画布，这样可以方便地绘制一个中心对齐的 3x3x3 魔方。 2. **颜色定义**：使用 `` 标签定义了六种颜色的渐变。 3. **魔方面板**：每个面（顶面、左面、右面）用一个 `` 元素表示，实际应用中需要为每个小格子定义一个多边形路径。 4. **旋转动画**：使用 JavaScript 实现了基于矩阵变换的旋转动画，通过 `requestAnimationFrame` 实现逐帧更新。 请注意，上述代码中的小格子绘制部分被省略了，你需要根据实际需求为每个小格子定义一个多边形路径，并填充相应的颜色。

AI 评审点评

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

【CLAUDE】该候选输出是一个严重不完整的实现。最核心的魔方面板绘制（27个小格子的多边形路径）被完全省略，导致页面渲染后没有任何可见图形。JavaScript 动画逻辑虽有框架但存在语法错误，无法正常运行。整体来看，这份输出仅提供了一个 HTML 骨架和部分有缺陷的逻辑代码，距离任务要求相差甚远，属于基本不可用的输出。 【GEMINI】该模型未能完成任务要求。在「功能要求」中明确要求绘制 3x3x3 魔方及 9 个小格子，但模型在代码中直接通过注释省略了这些核心实现。此外，提供的 JavaScript 旋转逻辑存在严重的数学实现错误，无法运行出预期的 3D 效果。整体表现为未完成任务，代码不可用。 【KIMI】该候选输出属于典型的「伪代码」或「代码框架」，而非可运行的完整实现。核心需求——绘制 27 个带颜色的小格子——被完全省略，仅用注释说明「需要补充」。3D 旋转的数学实现存在语法错误和概念混淆（4×4 矩阵与 CSS 2D matrix 不匹配）。尽管格式上符合单文件 HTML 要求，但功能上无法呈现任何可见的魔方或动画效果，属于未完成任务。

进阶难度评测结果

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

模型生成产物

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

以下是一个完整的单页 HTML 应用，实现了可鼠标拖拽旋转的伪 3D 魔方。代码包括 SVG 绘制、3D 变换、透视投影、遮挡处理和用户交互。 ```html 3D Rubik's Cube body { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background: linear-gradient(135deg, #1e3c72, #2a5298); color: white; font-family: Arial, sans-serif; } svg { border: 2px solid white; cursor: grab; } button { margin-top: 20px; padding: 10px 20px; font-size: 16px; cursor: pointer; background: #ff6f61; border: none; border-radius: 5px; transition: background 0.3s ease; } button:hover { background: #ff3b2f; } 重置视角 const svgNS = "http://www.w3.org/2000/svg"; const cube = document.getElementById("cube"); const resetButton = document.getElementById("reset-button"); const faces = [ { color: "#FF0000", position: [0, 0, 0] }, // Front { color: "#00FF00", position: [0, 0, 100] }, // Back { color: "#0000FF", position: [0, 100, 0] }, // Top { color: "#FFFF00", position: [0, -100, 0] }, // Bottom { color: "#FFA500", position: [-100, 0, 0] }, // Left { color: "#800080", position: [100, 0, 0] }, // Right ]; const vertices = [ [-50, -50, -50], [50, -50, -50], [50, 50, -50], [-50, 50, -50], [-50, -50, 50], [50, -50, 50], [50, 50, 50], [-50, 50, 50], ]; const edges = [ [0, 1], [1, 2], [2, 3], [3, 0], [4, 5], [5, 6], [6, 7], [7, 4], [0, 4], [1, 5], [2, 6], [3, 7], ]; let rotationX = 0; let rotationY = 0; let isDragging = false; let lastMouseX = 0; let lastMouseY = 0; function project(point) { const scale = 200 / (200 + point[2]); return [ point[0] * scale + 200, point[1] * scale + 200, ]; } function rotateX(point, angle) { const cos = Math.cos(angle); const sin = Math.sin(angle); const y = point[1] * cos - point[2] * sin; const z = point[1] * sin + point[2] * cos; return [point[0], y, z]; } function rotateY(point, angle) { const cos = Math.cos(angle); const sin = Math.sin(angle); const x = point[0] * cos + point[2] * sin; const z = -point[0] * sin + point[2] * cos; return [x, point[1], z]; } function...

AI 评审点评

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

【CLAUDE】该实现存在根本性的架构缺陷。虽然具备旋转矩阵、透视投影和鼠标交互的基本框架，但魔方面的几何构建逻辑完全错误——createFace函数无法正确生成3D空间中的面顶点，导致整个渲染结果与真实魔方外观相差甚远。画家算法和背面剔除均未实现，重置动画也缺失。代码更像是一个未完成的原型，核心功能（正确的3D魔方绘制）未能实现。建议重新设计面顶点数据结构，为每个面明确定义4个角顶点，再细分为3×3的9个子格，并基于法向量实现正确的可见性判断。 【GEMINI】模型未能理解「伪 3D 魔方」的实现逻辑。代码仅实现了简单的 2D 坐标变换，未能构建出 3D 空间模型，导致透视投影、面排序、背面剔除等核心功能全部缺失。生成的图形无法呈现魔方形态，交互效果也无法达到预期，属于未完成任务的生成结果。 【KIMI】该实现存在根本性架构错误：faces数组试图用平移偏移表示立方体六个面，但position值（如[0,0,100]）与vertices坐标系不匹配，导致几何结构完全错误；createFace函数索引越界和网格生成逻辑错误使得3×3格子无法正确渲染；最关键的是完全没有实现背面剔除和画家算法，深度排序缺失。交互方面虽有事件监听框架，但性能优化和平滑动画均未实现。代码质量较差，存在多处明显bug，直接复制无法正常运行，需要大幅重构才能满足题目要求。

困难难度评测结果

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

模型生成产物

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

以下是一个完整的 HTML 文件，实现了上述所有功能。代码分为多个模块，分别处理 SVG 渲染、3D 变换、鼠标交互、动画和逻辑控制。 ```html 3D Rubik's Cube body { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background: #f0f0f0; font-family: Arial, sans-serif; } svg { border: 1px solid #ccc; cursor: grab; } .controls { margin-top: 10px; display: flex; gap: 10px; } button { padding: 5px 10px; font-size: 14px; } U D L R F B Auto Rotate Top Front Isometric const svgNS = "http://www.w3.org/2000/svg"; const cube = document.getElementById("cube"); let rotation = { x: 0, y: 0, z: 0 }; let isDragging = false; let lastMouse = { x: 0, y: 0 }; let autoRotate = false; let autoRotateInterval; const colors = [ "#FF0000", "#FF8000", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#8000FF", "#FF00FF", "#FFFFFF" ]; const faces = createCubeFaces(); renderCube(); function createCubeFaces() { const faceSize = 3; const faces = []; for (let i = 0; i { const dotA = a.normal[0] * (rotation.x / 90) + a.normal[1] * (rotation.y / 90) + a.normal[2] * (rotation.z / 90); const dotB = b.normal[0] * (rotation.x / 90) + b.normal[1] * (rotation.y / 90) + b.normal[2] * (rotation.z / 90); return dotB - dotA; }); cube.innerHTML = ""; sortedFaces.forEach(({ face, center }) => { const transformed = []; for (let row = 0; row { const [x, y] = pt; const rect = face.children[idx]; rect.setAttribute("x", x - 25); rect.setAttribute("y", y - 25); }); cube.appendChild(group); }); } function rotateCube(deltaX, deltaY) { rotation.x += deltaY * 0.01; rotation.y += deltaX * 0.01; renderCube(); } svg.addEventListener("mousedown", (e) => { isDragging = true; lastMouse = { x: e.clientX, y: e.clientY }; }); svg.addEventListener("mousemove", (e) => { if (isDragging) { const deltaX = e.clientX - lastMouse.x; const deltaY = e.clientY - lastMouse.y; rotateCube(deltaX, deltaY); lastMouse = { x: e.clientX, y: e.clientY }; } }); svg.addEventListener("mouseup", () => { isDragging = false; });...

AI 评审点评

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

【CLAUDE】该实现存在根本性的代码错误，包括未定义变量引用、变量遮蔽等导致页面无法正常运行的bug。核心功能（单层转动、视角切换）被明确标注为未实现的占位符。3D渲染逻辑从数学原理到实现细节均存在严重缺陷，无法产生正确的透视投影和深度排序效果。整体而言，这是一个严重不完整且存在多处致命错误的实现，距离题目要求的功能完善的伪3D魔方相差甚远。 【GEMINI】该模型未能完成任务要求。虽然搭建了基本的 SVG 框架和数学变换基础，但在「完整魔方渲染」、「单层转动动画」、「视角切换」以及「惯性滑动」等核心交互功能上均未实现或仅留有空函数。代码完成度极低，无法作为一个功能完善的伪 3D 魔方应用使用。 【KIMI】该实现远未达到功能要求。核心问题包括：faces变量重复定义导致渲染逻辑崩溃、深度排序算法完全错误、单层转动和视角切换功能仅存在空壳、缺少惯性滑动和动画系统。虽然基础数学函数和鼠标事件监听有雏形，但整体属于未完成状态，大量关键功能标记为「placeholder」或完全缺失。在hard难度任务下，此实现无法通过基本功能测试。

相关链接

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

加载中...
100%