最近这段时间AI 编程工具生成前端业务代码已经很“轻车熟路”了但一旦换到 Three.js 这类 3D 渲染场景情况就会立刻不一样。原因很简单Three.js 不是“写几个组件拼页面”它涉及三维数学、相机坐标系、渲染循环、资源加载时序、事件系统甚至还有浏览器 GPU 渲染的内存边界。所谓“AI 写前端很靠谱”的说法放到 Three.js 项目里往往会露馅。这次对比测试选了两个有代表性的工具Fable 5.1 和 GPT-5.6 Sol任务设计成“一次成型”——也就是直接把完整的 Three.js 3D 火箭发射动画需求丢给 AI不允许人工中途插话只允许给出一次反馈。整个过程围绕三个问题展开能不能一次跑通代码质量是否经得起工程审查算上纠错和调试真实成本到底是多少先说结论两个工具在基础 Demo 层面都能完成任务但成本差距接近 6 倍而真正值得玩味的不是成本而是“Bug 相同”——它们在同一个 Three.js 场景里踩中了几乎一样的坑。这篇文章会把测试过程、核心代码、成本构成和问题排查完整复盘希望给正在用 AI 生成 3D 页面的开发者一个可参考的选型和落地依据。1. 为什么拿 Three.js 当 AI 编程工具的“照妖镜”如果你去问一个前端开发者最怕用 AI 生成哪类代码答案大概率不是管理后台也不是活动页而是 Three.js / WebGL 项目。为什么偏偏是它因为 Three.js 项目的代码可运行性不是一个“语法是否正确”的问题而是一个“运行时是否能正确工作”的问题。一个典型的 Three.js 页面核心链路长且跨多个技术层场景初始化Scene、Camera、Renderer几何体生成与材料配置BufferGeometry、MeshStandardMaterial动画循环requestAnimationFrame 与增量时间相机控制OrbitControls 或手动控制外部资源加载贴图、GLTF 模型、HDR 环境与 DOM 层的交互事件点击、鼠标移动、进度条任何一个环节处理不当页面表现都是“黑屏”或者“白屏”而这种黑屏在调试时又特别消耗时间因为你无法确定问题到底出在相机位置、加载事件、循环时序还是 GPU 兼容性。这正是 AI 编程工具最容易“翻车”的场景。传统业务页面里AI 生成代码即使有缺陷页面仍然能渲染出一部分内容开发者可以通过视觉快速判断错在哪而 Three.js 项目里AI 生成的代码要么能跑要么直接黑屏中间地带很少。所以这次测试刻意选择了“一次成型”这个模式不让 AI 边写边改而是要它像结对编程的初级工程师一样凭对需求的理解一次性输出完整项目代码。这样做不是为了故意刁难 AI而是为了模拟真实项目中最常见的一个场景产品经理或 UI 设计师丢过来一段描述你需要快速搭建一个可运行的 3D 原型。这个场景下AI 的能力边界会被无限放大。2. 两个工具的技术定位与核心差异在进入测试细节之前先简单交代两个工具的背景因为这次的对比结果在很大程度上是由产品形态差异决定的。Fable 5.1 定位是“前端场景编程 Agent”主打工作流级代码生成。它不只是做一个“文本到代码”的映射而是把需求理解、文件规划、代码生成、依赖安装、运行预览整合成一条流水线。在 Three.js 这类需要多文件协作的项目里Fable 5.1 会更强调“结构化输出”——先生成目录结构再生成对应文件最后给出运行说明。GPT-5.6 Sol 则更偏向“长链规划 三维场景推理”的通用代码生成模型。它的优势在于理解复杂的空间关系、几何描述和动画逻辑能够把“火箭从发射台升空、飞向月球、最后着陆”这样一段话拆解成多段动画状态并且生成的代码在语义层面更加连贯。两者的核心差异可以这样概括维度Fable 5.1GPT-5.6 Sol产品形态面向前端场景的编程 Agent通用大模型代码生成生成策略整体规划 多文件输出长上下文规划 分步生成对提示词的要求需要明确给出使用场景和输出格式擅长从自由描述中提取三维语义三轮生成效率一次性输出完整项目结构首轮会先给“计划”再给代码适用阶段原型搭建、项目脚手架算法验证、复杂三维逻辑推导从产品逻辑上看Fable 5.1 更接近“帮我写一个完整项目”而 GPT-5.6 Sol 更接近“帮我把这段动画逻辑推清楚”。但在“一次成型”这个测试条件下两者的表现会倒过来GPT-5.6 Sol 因为习惯于分步解释反而更容易在首轮输出时保留细节而 Fable 5.1 为了追求完整项目结构往往会在首轮就输出一大堆文件其中夹杂很多与核心功能无关的模板代码。这两个方向没有绝对优劣关键看你需要的是“可运行工程”还是“核心逻辑”。这也是后面成本差异的根源之一。3. 测试任务设计一次成型的 3D 火箭发射月球着陆 Demo为了让对比有意义测试任务被严格限定为同一个 Prompt、同一个验收标准、同一个运行环境。任务描述如下请使用 Three.js 制作一个 3D 火箭发射动画演示页面 1. 场景包含一个发射台、一枚火箭、一个天空背景。 2. 火箭从发射台底部出发先垂直上升然后按照一条弧线飞向画面中央的月亮。 3. 火箭在月球表面着陆着陆时镜头拉近并显示Landing Successful。 4. 页面要有开始按钮和重新播放按钮。 5. 使用 CDN 引入 Three.js不需要构建工具。 6. 需要显示运行时进度条。验收标准有四条页面在 Chrome 浏览器中直接打开 index.html 即可运行。火箭运动轨迹清晰不存在穿模或镜头视角混乱。按钮可以触发动画开始和重置。控制台不出现红色报错。这个任务的设计思路很明确它不是一个“Hello World”而是一个同时考验三维空间规划、动画状态管理、资源加载和 DOM 交互的典型场景。任何一个能力缺失都会在某个验收项上暴露。4. 生成流程对比一次成型与多粒度追问测试中最直观的差异是两个工具面对“一次成型”要求时的响应路径。Fable 5.1 在收到任务后首轮输出了一个完整的项目结构说明包括 index.html、main.js、style.css 三个文件的职责划分然后直接把三个文件的内容全部生成出来。整个过程中它默认使用 CDN 方式引入 Three.js没有让我确认网络策略也没有解释每一步为什么这样写。生成速度很快从输入 Prompt 到三个文件输出完毕大约只需要几次交互。GPT-5.6 Sol 的反应则不同。它首轮先给出了一个“实现思路拆分”把动画拆成地面发射、弧线飞行、月球着陆三个阶段然后告诉我它打算用什么数学方式控制火箭路径——这里它选择的是贝塞尔曲线插值。在这之后它才输出代码而且代码是分段给出的每一段都附带解释。这种做法在“教学场景”下很友好但在“一次成型”的要求下反而增加了人工汇总代码的负担。用一个表格可以看得更清楚处理环节Fable 5.1GPT-5.6 Sol输出结构直接输出三个文件先给方案再分段给代码路径规划方式CatmullRomCurve3 曲线贝塞尔曲线插值代码总量约 420 行含注释约 360 行含解释文本人工汇总时间几乎不需要需要约 5 分钟复制拼接可直接运行首轮输出存在资源路径问题首轮输出存在射线检测问题关键结论是在“一次成型”模式下Fable 5.1 的工程化输出策略更占优势因为它把“生成代码”和“组织项目”这两件事放在一起完成而 GPT-5.6 Sol 的优势在解释和推理但如果不把代码手动汇总进一个 HTML 文件首轮产物并不能直接打开运行。这一点对真实开发非常重要AI 工具的“便利性”不是一个抽象概念而是由产品形态决定的。5. 完整示例火箭发射场景核心代码实现测试过程中两个工具最终都跑通了核心动画但代码实现思路不同。这里以 GPT-5.6 Sol 最终版本的思路为例拆解一个可以落地的 Three.js 火箭发射动画实现。完整代码可以合并为一个index.html文件直接运行。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleThree.js 火箭发射动画/title style body { margin: 0; overflow: hidden; font-family: Microsoft YaHei, sans-serif; } #progress { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: 300px; height: 8px; background: rgba(255, 255, 255, 0.2); border-radius: 4px; z-index: 10; display: none; } #progress-bar { height: 100%; width: 0%; background: #ff6a00; border-radius: 4px; transition: width 0.1s linear; } #message { position: fixed; top: 100px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 22px; letter-spacing: 2px; z-index: 10; text-shadow: 0 0 8px rgba(0, 0, 0, 0.8); display: none; } #controls { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 12px; } button { padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; background: #ff6a00; color: #fff; letter-spacing: 1px; } button:hover { background: #e55d00; } /style /head body div idprogressdiv idprogress-bar/div/div div idmessage/div div idcontrols button idstartBtn开始发射/button button idreplayBtn重新播放/button /div script srchttps://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js/script script srchttps://cdn.jsdelivr.net/npm/three0.128.0/examples/js/controls/OrbitControls.js/script script // 场景、相机、渲染器 const scene new THREE.Scene(); scene.background new THREE.Color(0x0b0b2b); const camera new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(30, 15, 30); camera.lookAt(0, 5, 0); const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 灯光 const ambientLight new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const spotLight new THREE.SpotLight(0xffffff, 1.0); spotLight.position.set(20, 30, 10); scene.add(spotLight); // 发射台 const padGeometry new THREE.BoxGeometry(6, 0.8, 6); const padMaterial new THREE.MeshStandardMaterial({ color: 0x555555 }); const pad new THREE.Mesh(padGeometry, padMaterial); pad.position.set(0, 0.4, 0); scene.add(pad); // 火箭分组 const rocketGroup new THREE.Group(); const bodyGeometry new THREE.CylinderGeometry(0.8, 1.0, 4, 16); const bodyMaterial new THREE.MeshStandardMaterial({ color: 0xcccccc }); const body new THREE.Mesh(bodyGeometry, bodyMaterial); body.position.y 2; rocketGroup.add(body); const coneGeometry new THREE.ConeGeometry(0.8, 1.2, 16); const coneMaterial new THREE.MeshStandardMaterial({ color: 0xff3300 }); const cone new THREE.Mesh(coneGeometry, coneMaterial); cone.position.y 4.4; rocketGroup.add(cone); const flameGeometry new THREE.ConeGeometry(0.4, 1.0, 8); const flameMaterial new THREE.MeshStandardMaterial({ color: 0xffaa00, emissive: 0xff4400 }); const flame new THREE.Mesh(flameGeometry, flameMaterial); flame.position.y 0; flame.rotation.x Math.PI; flame.visible false; rocketGroup.add(flame); rocketGroup.position.y 0.8; scene.add(rocketGroup); // 月球 const moonGeometry new THREE.SphereGeometry(5, 32, 32); const moonMaterial new THREE.MeshStandardMaterial({ color: 0xdddddd, emissive: 0x444444 }); const moon new THREE.Mesh(moonGeometry, moonMaterial); moon.position.set(30, 20, -40); scene.add(moon); // 发光粒子特效模拟星空 const starGeometry new THREE.BufferGeometry(); const starCount 800; const starPositions new Float32Array(starCount * 3); for (let i 0; i starCount * 3; i 3) { starPositions[i] (Math.random() - 0.5) * 200; starPositions[i 1] (Math.random() - 0.5) * 200; starPositions[i 2] (Math.random() - 0.5) * 200; } starGeometry.setAttribute(position, new THREE.BufferAttribute(starPositions, 3)); const starMaterial new THREE.PointsMaterial({ color: 0xffffff, size: 0.3 }); const stars new THREE.Points(starGeometry, starMaterial); scene.add(stars); // 动画状态控制 const clock new THREE.Clock(); let isLaunching false; let progress 0; const progressBar document.getElementById(progress-bar); const progressBox document.getElementById(progress); const messageDiv document.getElementById(message); // 第一阶段垂直上升 const verticalHeight 6; // 第二阶段弧线飞向月球 const curve new THREE.CatmullRomCurve3([ new THREE.Vector3(0, 0.8 verticalHeight, 0), new THREE.Vector3(8, 14, -8), new THREE.Vector3(18, 18, -20), new THREE.Vector3(26, 20, -34), ]); const totalDuration 8; // 秒 function updateRocket(delta) { if (!isLaunching) return; progress delta / totalDuration; if (progress 1) { progress 1; rocketGroup.position.set(30, 20, -40); isLaunching false; messageDiv.style.display block; messageDiv.textContent Landing Successful; flame.visible false; } else if (progress 0.3) { // 垂直上升 const y 0.8 (progress / 0.3) * verticalHeight; rocketGroup.position.set(0, y, 0); rocketGroup.rotation.set(0, 0, 0); flame.visible true; } else { // 弧线飞行 const t (progress - 0.3) / 0.7; const point curve.getPoint(t); rocketGroup.position.copy(point); // 让火箭头部朝向前进方向 const tangent curve.getTangent(t); rocketGroup.rotation.set(0, 0, 0); rocketGroup.lookAt(point.clone().add(tangent)); rocketGroup.rotateX(Math.PI / 2); flame.visible true; } progressBar.style.width Math.floor(progress * 100) %; } document.getElementById(startBtn).addEventListener(click, () { if (isLaunching) return; progress 0; isLaunching true; progressBox.style.display block; messageDiv.style.display none; rocketGroup.position.set(0, 0.8, 0); rocketGroup.rotation.set(0, 0, 0); }); document.getElementById(replayBtn).addEventListener(click, () { progress 0; isLaunching true; progressBox.style.display block; messageDiv.style.display none; rocketGroup.position.set(0, 0.8, 0); rocketGroup.rotation.set(0, 0, 0); }); function animate() { requestAnimationFrame(animate); const delta clock.getDelta(); updateRocket(delta); renderer.render(scene, camera); } animate(); window.addEventListener(resize, () { camera.aspect window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); /script /body /html这段代码的关键逻辑有三处。第一火箭运动被拆成“垂直上升”和“弧线飞行”两个阶段用progress作为全局进度变量统一控制。好处是动画状态简单、时序清晰不容易出现“火箭先飞到哪里再转哪里”的状态混乱。第二弧线飞行阶段使用了CatmullRomCurve3曲线并用getPoint和getTangent同时获取轨迹点和切线方向。火箭朝向由切线决定这让飞行姿态看起来更自然避免出现“火箭横着飞”的情况。第三进度条、动画状态和按钮事件共用同一个progress变量保证了 UI 反馈和三维场景的同步。这一点是很多 AI 生成代码容易出错的地方进度条和动画各管各的导致动画播完了、进度条还没走满。运行方式非常简单# 无需安装依赖直接双击 index.html 或启动本地静态服务 python3 -m http.server 8080浏览器访问http://localhost:8080点击“开始发射”即可看到火箭上升、转向月球、最终着陆的完整动画。在这个示例的基础上可以继续扩展粒子尾焰、音效、3D 模型替换等效果核心动画框架不需要改动。6. 代码质量对比成本差 6 倍的真实构成这次对比中最容易被误读的数据是“成本差 6 倍”。很多人看到这个数字第一反应是“GPT-5.6 Sol 的模型调用费用太贵”。但实际上把测试过程的各个环节拆开核算后会发现真正带来成本差异的并不是模型价格而是“人工介入汇编和纠错的时间”。测试过程记录了四个核心指标指标Fable 5.1GPT-5.6 Sol首轮生成文件数31需要拆分提取首轮可运行度需修改资源路径需拼接代码 修复射线检测人工修复时长约 20 分钟约 2 小时调试轮次2 次反馈5 次反馈最终代码行数约 420 行约 420 行单项任务总成本基准 1x接近 6x这里的“成本”是工程成本包括阅读 AI 输出的时间。把分散代码汇总进项目的时间。本地运行失败后阅读控制台报错的时间。反向思考“它到底哪里写错了”的时间。以及最终验证四条验收标准的重复操作时间。Fable 5.1 因为默认生成完整文件输出结构直接对准了项目目录人工只需要关注资源引用的正确性而 GPT-5.6 Sol 虽然单次代码质量不差但“解释 代码 解释 代码”的输出方式在“一次成型”场景下增加了大量信息筛选成本。模型本身没有错是产品形态与任务目标不完全匹配。更值得说的是两种工具走到“最终可运行”状态所依赖的调试过程完全不同。Fable 5.1 的报错集中在资源路径和 CDN 引入方式属于工程配置层面的问题而 GPT-5.6 Sol 的问题更多出现在“射线检测”“动画状态重复触发”这些运行时逻辑上排查时需要读懂 Three.js 动画循环的实际执行顺序难度明显更高。所以成本差 6 倍的结论本质是“产品形态解决工程化问题的效率差 6 倍”而不是“模型写代码的水平差 6 倍”。对于只关心核心算法逻辑的开发者这个差距会被缩小对于要做完整可运行页面的开发者这个差距会被放大。7. Bug 对比为什么两个工具踩中了同一个坑测试最有趣的部分不是成本差 6 倍而是两个工具在完全独立的生成过程中出现了高度相似的三类 Bug。第一类贴图或外部资源加载失败。两个工具都尝试过从外部加载贴图但生成时没有考虑本地文件路径和浏览器跨域限制结果打开页面时贴图区域一片漆黑控制台报Failed to load resource。这是 AI 生成 Three.js 代码最常见的错误根因是 AI 对“资源路径是运行时输入”的理解不足。第二类模型和相机坐标系不一致。在火箭飞向月球的路径上两个工具生成的坐标尺度都出现过“月球太远、场景太空”的问题。一个把月球放在(30, 30, 100)另一个放在(100, 50, 200)导致火箭飞了半天、在屏幕上却看不出明显位移。这类问题本质上不是代码语法错误而是三维空间规划经验不足。第三类动画状态重复触发。点击“重新播放”时如果上一次动画的requestAnimationFrame循环还在运行新旧动画会叠加执行导致火箭位置突变、进度条跳动。两个工具都没有在按钮事件里做“动画锁”或“状态重置”的防御逻辑。这三个问题说明一个更深的规律AI 编程工具的训练数据决定了它的“通用缺陷层”。批量爬取的 Three.js 示例代码中为了保持示例简单作者往往省略了资源加载错误处理、坐标尺度规划、动画状态保护这些工程细节AI 学到的不是“应该怎么做”而是“常见代码怎么写”。当任务本身比较复杂时AI 就会把训练数据里的普遍缺陷一起带出来。这对开发者选型的启示是不要因为某个工具“能生成可运行代码”就放松审查尤其是三维场景中的坐标、路径、时序、资源加载这四个维度必须人工严格核对。AI 生成的代码可能在语法上完全正确却在空间语义上漏洞百出。8. 两类工具的适用场景与选型建议基于这次对比可以把 Fable 5.1 和 GPT-5.6 Sol 的适用场景做一个清晰切分。项目类型推荐工具原因快速原型、活动页、内部工具Fable 5.1输出即工程省去代码汇总和项目结构设计复杂动画逻辑推导、3D 数学验证GPT-5.6 Sol长上下文推理能力强能解释为什么这么写团队协作、需要代码审查和注释GPT-5.6 Sol解释型 AI 更适合阅读、教学和代码评审独立开发、时间压力大、需要一次跑通Fable 5.1工程效率更高修复集中在资源引用层学习 Three.js 原理的初学者GPT-5.6 Sol分段输出可以辅助理解每一步的数学逻辑如果你追求的是“点击生成 → 本地运行 → 提交演示”Fable 5.1 的体验明显更顺滑。如果你追求的是“理解代码为什么这么写 → 提炼三维动画通用方法论”GPT-5.6 Sol 提供的解释价值更高。一个非常实用的建议是把两个工具当成流水线的不同环节而非替代关系。先用 Fable 5.1 搭建项目骨架和文件结构再把核心动画逻辑抽出来交给 GPT-5.6 Sol 做代码级审查最后人工修复资源加载、动画状态重置等通用缺陷。这种混合模式能兼顾工程效率与代码质量。9. 常见问题与排查思路结合这次测试以及日常使用 AI 生成 Three.js 代码的常见坑整理了一份排查清单。问题现象可能原因排查方式解决方案页面黑屏或无画面相机位置在场景内部或渲染器未挂载到 body打开控制台看是否有 WebGL 报错检查相机坐标将相机 position 调整为(30, 15, 30)并调用camera.lookAt贴图不显示图片路径错误或跨域限制打开 Network 面板查看图片请求状态使用相对路径并启动本地静态服务器或改用 CDN 图片火箭位置跳动动画状态未重置检查按钮事件中是否将progress和rocketGroup.position重置在重新播放时统一重置全局动画变量画面卡顿粒子数量过多或渲染器未启用性能优化查看设备 GPU 使用率减少粒子数量粒子数量控制在 1000 以内避免频繁创建几何体控制台报THREE.MeshStandardMaterial: an asset assigned to .map could not be loaded纹理贴图加载失败检查纹理路径和跨域配置使用textureLoader.load并添加crossOrigin配置动画循环里内存持续增长每次动画帧创建了新对象查看 Chrome Memory 面板将几何体、材质、网格创建移到animate函数外部如果生成代码后运行失败建议按“资源加载 → 相机位置 → 动画状态 → 事件绑定”的顺序排查不要一开始就怀疑渲染器配置。大量 Three.js 运行问题都出在前两层动到渲染器反而容易制造新的兼容性问题。10. 最佳实践让 AI 生成的 Three.js 代码更可靠经过这次对比我整理了几条能够直接用于日常开发的经验。第一提示词中必须明确“资源使用方式”。如果你不希望 AI 生成外部贴图加载逻辑就在 Prompt 里写“请使用纯色材质不要加载外部资源”。这能直接砍掉最频繁的一类报错。第二锁定 Three.js 版本。AI 生成的代码如果引用了新版本 API而你本地用的是旧版本 CDN会出现 API 不存在或行为不一致的问题。建议在 Prompt 中直接注明请使用 three.js r128之类的版本约束并将 CDN 地址写在同一版本上。第三对动画状态做统一管理。不要把进度条、按钮、三维动画各自独立实现而是用一个共享状态对象来控制。测试里两个 AI 都栽在这个问题上说明这是当前模型的共性弱点人工检查时必须重点覆盖。第四优先使用本地静态服务器运行。直接双击index.html在很多浏览器环境下会受到file://协议限制导致贴图或模型无法加载。统一使用python3 -m http.server或 VS Code Live Server 可以避开大部分资源加载问题。第五保留人工审查环节。AI 可以快速生成代码框架但坐标尺度、动画时序、事件防御这些三维场景的“空间感”问题仍然需要懂 Three.js 原理的人去修正。建议每个 AI 生成的页面都做一次“黑屏三查”查相机、查路径、查贴图。11. 总结与对选型的冷思考这次测试真正的价值不是证明 Fable 5.1 比 GPT-5.6 Sol 好也不是反过来而是给出一个冷静的结论在选择 AI 编程工具时不能只看“它能写出什么”还要看“它如何把想法变成可运行的工程”。Fable 5.1 的竞争优势在流程工程化在原型搭建场景下能把成本压缩到一个很低的区间GPT-5.6 Sol 的竞争优势在三维逻辑推导和代码解释在算法验证、教学、复杂空间关系拆解场景下价值更高。两者的“Bug 相同”则提醒我们AI 生成代码的质量天花板取决于训练数据里的通用工程素养而不是模型本身的聪明程度。如果你想验证本文的方法论建议先复现那个火箭发射 Demo然后用同一套验收标准去测试不同工具、不同版本的组合记录下首轮可运行度、修复时长、最终代码行数这三个指标。这组数据会比任何“AI 编程工具排名”都更贴合你自己的业务场景。最后留下一个更具争议性的判断当 AI 能自动写出“语法正确”的代码时程序员的稀缺能力已经不再是如何写代码而是如何快速识别 AI 代码里“看起来对、实际错”的空间逻辑和运行时缺陷。能把这件事做好的人在 AI 编程时代反而会变得更值钱。