12款大模型Three.js代码生成实测：GPT-6 Astra鹈鹕骑车场景夺冠

1. 从“鹈鹕骑车”说起一个被玩坏的经典测试题第一次看到“鹈鹕骑车”这个测试题大概是在某个深夜刷技术社区的时候。当时的第一反应是这帮人真会玩。用 Three.js 渲染一只鹈鹕骑自行车的 3D 场景然后让大模型来生成代码看谁写得又快又好——这比那些“写一首关于春天的诗”之类的测试有意思多了。这个测试的核心逻辑其实很朴素用同一个 Prompt让不同的大模型生成 Three.js 代码然后看谁的代码能跑、跑出来效果最好。听起来简单但真正动手做过的人都知道这里面坑多得很。Three.js 的 API 版本迭代快几何体参数复杂光照和相机设置稍有偏差渲染出来的东西就完全不是那么回事。更别说还要让鹈鹕的嘴、翅膀、自行车轮子这些细节都到位。我这次实测了 12 款大模型包括最近热度很高的 GPT-6 Astra以及国内外主流的几款。测试环境是统一的同一个 HTML 模板、同一个 Prompt、同一台机器上跑 Chrome 渲染。结果出来的时候说实话有点意外——GPT-6 Astra 确实拿了第一但过程比结果更有意思。如果你也在做大模型代码生成能力的评估或者单纯想找个靠谱的模型帮你写 Three.js 场景这篇内容应该能帮你省下不少试错时间。我会把整个测试的设计思路、Prompt 的写法、评分标准、每个模型的实际表现以及我在这个过程中踩过的坑全部拆开来讲。2. 测试设计为什么选“鹈鹕骑车”而不是“旋转立方体”2.1 测试题目的选择逻辑选“鹈鹕骑车”作为测试题不是因为它好玩而是因为它刚好卡在一个很微妙的位置上。太简单的题目比如“画一个旋转的立方体”现在是个模型都能写出来区分度太低。太复杂的题目比如“实现一个完整的 3D 游戏引擎”又超出了单次代码生成的能力边界大部分模型都会翻车同样没有区分度。“鹈鹕骑车”刚好在中间。它需要模型同时处理几个层面的问题几何体组合鹈鹕的身体、嘴、翅膀、眼睛自行车的车架、轮子、踏板、车把这些都需要用 Three.js 的基础几何体拼出来空间变换每个部件的位置、旋转角度、缩放比例都要算对否则鹈鹕会飞到自行车外面去材质与光照至少要有基本的材质区分和光照设置不然渲染出来就是一团黑动画逻辑轮子要转、踏板要动、鹈鹕的翅膀最好能扇两下这四个层面刚好对应了大模型在代码生成上的四种能力API 记忆、空间推理、参数计算、逻辑组织。一个模型如果只是背过 Three.js 的文档它能写出几何体但空间变换大概率会乱如果它理解不了三维空间关系光照和材质就会设置得莫名其妙。提示如果你要自己复现这个测试建议把 Prompt 写得足够具体但不要具体到每一步都告诉模型怎么做。留出空间让模型自己发挥才能看出它的真实水平。2.2 Prompt 的设计与迭代我最初写的 Prompt 是这样的用 Three.js 创建一个 3D 场景场景中有一只鹈鹕骑着一辆自行车。 要求 1. 使用原生 HTML JavaScript不要用框架 2. 通过 CDN 引入 Three.js 3. 包含基本的动画效果 4. 代码可以直接在浏览器中运行这个版本太模糊了模型生成的结果差异极大。有的模型只画了一个球体加两个圆柱体就说这是鹈鹕骑车有的模型写了一堆代码但根本跑不起来。后来我迭代了三个版本最终定稿的 Prompt 是这样的用 Three.js 创建一个 3D 场景场景中有一只鹈鹕骑着一辆自行车。 具体要求 1. 使用原生 HTML JavaScript通过 CDN 引入 Three.js版本不限但需确保可用 2. 鹈鹕需要包含身体椭球体、嘴圆锥体、眼睛球体、翅膀扁平几何体 3. 自行车需要包含两个轮子圆环体、车架圆柱体、车把圆柱体、踏板长方体 4. 鹈鹕坐在自行车座上翅膀搭在车把上 5. 添加环境光和方向光背景色为浅蓝色 6. 添加动画轮子绕轴旋转踏板跟随轮子转动 7. 相机视角需要能看到整个场景 8. 代码可以直接在浏览器中运行不需要额外配置这个版本的关键改动是把“鹈鹕”和“自行车”拆解成了具体的几何体组合。这样做的好处是模型不需要自己去想“鹈鹕长什么样”而是直接按照给定的几何体去拼。但坏处也很明显——空间位置关系还是得模型自己算。实测下来这个 Prompt 的区分度最好。12 个模型里有 4 个能生成可运行的代码3 个生成的代码有语法错误5 个生成的代码能跑但效果惨不忍睹。2.3 评分标准的制定评分标准我分了四个维度每个维度 25 分总分 100 分维度评分标准权重代码可运行性代码能否直接在浏览器中运行无报错25%场景完整性鹈鹕和自行车的各个部件是否齐全25%空间准确性部件之间的位置关系是否正确25%动画与光照动画是否流畅光照是否合理25%这个评分标准看起来简单但实际操作的时候最难打分的是“空间准确性”。因为“正确”的标准很主观——鹈鹕的嘴应该朝前还是朝下翅膀应该搭在车把上还是垂在身体两侧这些细节没有绝对的对错但能看出模型对三维空间的理解程度。我的做法是先看整体轮廓再看细节比例。如果鹈鹕的身体和自行车的位置关系明显不对比如鹈鹕悬在自行车上方直接扣 15 分以上。如果整体位置对了但某个部件的角度有点偏扣 5 分左右。3. 12 款大模型实测谁在裸泳谁在冲浪3.1 测试环境与统一变量为了保证测试的公平性我控制了以下几个变量硬件环境同一台笔记本Chrome 浏览器版本一致网络环境同一个网络CDN 加载速度一致Three.js 版本统一使用 r128 版本通过 CDN 引入代码运行方式将模型生成的代码保存为 HTML 文件直接在浏览器中打开截图时间页面加载后等待 3 秒再截图确保动画已经启动有一点需要说明我没有对模型生成的代码做任何修改。即使代码里有明显的错误我也原样保存运行。这样才能真实反映模型的输出质量。3.2 第一梯队GPT-6 Astra 与它的追赶者们GPT-6 Astra 是这次测试的冠军总分 87 分。它的代码一次跑通没有报错场景完整度很高。具体来说GPT-6 Astra 生成的代码有几个亮点几何体选择合理鹈鹕的身体用了SphereGeometry并做了缩放嘴用了ConeGeometry并旋转了 90 度翅膀用了BoxGeometry并做了扁平化处理空间位置准确鹈鹕的身体中心在自行车座上方约 0.5 个单位处翅膀末端刚好搭在车把上动画逻辑清晰轮子绕 X 轴旋转踏板跟随轮子的旋转角度做圆周运动光照设置合理环境光强度 0.6方向光强度 0.8方向光位置在 (5, 10, 7)唯一扣分的地方是鹈鹕的眼睛位置稍微偏了一点看起来有点像在翻白眼。但整体效果已经非常好了。紧随其后的是两款国产模型总分分别是 82 分和 79 分。它们的代码也能跑通场景完整度也不错但在空间准确性上略逊一筹。比如其中一款模型的鹈鹕翅膀角度不对看起来像是折断了另一款模型的自行车轮子没有对齐前后轮不在一条直线上。3.3 第二梯队能跑但效果一般的模型第二梯队有 5 个模型总分在 55 到 70 分之间。它们的共同特点是代码能跑但场景效果明显有问题。最常见的问题是空间位置错乱。比如有一个模型把鹈鹕的身体放在了自行车的前轮上方看起来像是鹈鹕在骑车而不是坐在车上。还有一个模型把自行车的车架做成了实心圆柱体结果鹈鹕的腿被车架挡住了完全看不到。另一个常见问题是动画逻辑错误。有的模型让轮子绕 Y 轴旋转结果轮子像陀螺一样在地上打转有的模型让踏板跟着轮子转但旋转中心设错了踏板直接飞出了屏幕。这些问题看起来很低级但恰恰说明了一个事实大模型在三维空间推理上还有很大的提升空间。它们能记住 API 的用法能写出语法正确的代码但在理解“上下左右前后”这些空间关系时经常犯迷糊。3.4 第三梯队翻车现场合集第三梯队有 4 个模型总分在 30 到 50 分之间。它们的代码要么跑不起来要么跑起来之后完全看不出是什么东西。有一个模型生成的代码直接报错原因是它引用了 Three.js 中不存在的 API。我查了一下它用的那个 API 是 Three.js r150 版本才加入的但 CDN 上加载的是 r128 版本。这说明模型在生成代码时没有考虑版本兼容性问题。还有一个模型生成的代码能跑但场景里只有一个灰色的球体和两个黑色的圆环。鹈鹕的嘴、眼睛、翅膀全都没有自行车的车架、车把、踏板也都没有。我仔细看了代码发现它只写了SphereGeometry和TorusGeometry其他几何体都没写。这可能是模型在生成过程中“偷懒”了只写了开头就结束了。最离谱的是一个模型生成的代码场景里有一个巨大的立方体立方体上面有一个小圆球。我看了半天才反应过来它把鹈鹕的身体做成了一个立方体把自行车的轮子做成了一个小圆球。这已经不是空间推理的问题了这是根本没理解题目要求。4. 核心细节拆解GPT-6 Astra 的代码为什么能赢4.1 几何体组合的精度对比我把 GPT-6 Astra 生成的代码和另外两款高分模型的代码做了逐行对比发现了一个关键差异GPT-6 Astra 在几何体组合上更“抠细节”。举个例子鹈鹕的嘴。GPT-6 Astra 用的是ConeGeometry(0.3, 1.2, 8)意思是底面半径 0.3高度 1.28 个分段。然后它把嘴旋转了 90 度让嘴尖朝前。另外两款模型也用了ConeGeometry但参数不一样一款用的是ConeGeometry(0.5, 1.0, 6)嘴太粗太短另一款用的是ConeGeometry(0.2, 1.5, 12)嘴太细太长。这些参数差异看起来很小但渲染出来的效果差别很大。GPT-6 Astra 的嘴看起来最像鹈鹕的嘴——又长又尖但不会细得像根针。再比如自行车的轮子。GPT-6 Astra 用的是TorusGeometry(0.5, 0.08, 8, 20)意思是环半径 0.5管半径 0.088 个径向分段20 个管分段。这个参数组合让轮子看起来既有厚度又不会太笨重。另外两款模型用的参数分别是TorusGeometry(0.5, 0.15, 6, 12)和TorusGeometry(0.6, 0.05, 10, 30)前者轮子太粗后者轮子太细。实操心得如果你要让大模型生成 Three.js 代码建议在 Prompt 里明确要求“使用合理的几何体参数”。虽然模型不一定能完全理解“合理”的标准但至少能提醒它不要随便填参数。4.2 空间变换的计算逻辑空间变换是这次测试中最能拉开差距的地方。GPT-6 Astra 在这方面的表现明显优于其他模型。我以鹈鹕的翅膀为例。GPT-6 Astra 的代码是这样的// 左翅膀 const leftWing new THREE.Mesh( new THREE.BoxGeometry(0.8, 0.1, 0.4), wingMaterial ); leftWing.position.set(-0.6, 0.3, 0); leftWing.rotation.z Math.PI / 6; pelican.add(leftWing); // 右翅膀 const rightWing new THREE.Mesh( new THREE.BoxGeometry(0.8, 0.1, 0.4), wingMaterial ); rightWing.position.set(0.6, 0.3, 0); rightWing.rotation.z -Math.PI / 6; pelican.add(rightWing);这段代码的关键在于翅膀是作为鹈鹕的子对象添加的pelican.add(leftWing)而不是直接添加到场景中。这样做的好处是当鹈鹕整体移动或旋转时翅膀会自动跟随不需要单独计算位置。另外两款高分模型也用了类似的方法但参数设置有问题。一款模型的翅膀位置是(-0.8, 0.5, 0)结果翅膀离身体太远看起来像是要飞走另一款模型的翅膀旋转角度是Math.PI / 3结果翅膀翘得太高看起来像是投降。GPT-6 Astra 的参数(-0.6, 0.3, 0)和Math.PI / 6是经过计算的鹈鹕身体的宽度大约是 1.2 个单位所以翅膀的位置在身体两侧 0.6 个单位处翅膀的旋转角度是 30 度刚好让翅膀末端搭在车把上。4.3 动画循环的写法差异动画循环的写法12 个模型用了三种不同的方式第一种使用requestAnimationFrame手动更新function animate() { requestAnimationFrame(animate); wheel.rotation.x 0.05; pedal.rotation.x 0.05; renderer.render(scene, camera); } animate();第二种使用THREE.Clock获取时间差const clock new THREE.Clock(); function animate() { requestAnimationFrame(animate); const delta clock.getDelta(); wheel.rotation.x delta * 2; pedal.rotation.x delta * 2; renderer.render(scene, camera); } animate();第三种使用setInterval定时更新setInterval(() { wheel.rotation.x 0.05; pedal.rotation.x 0.05; renderer.render(scene, camera); }, 16);GPT-6 Astra 用的是第二种方式也就是THREE.Clock。这种方式的好处是动画速度与帧率无关。不管浏览器是 60 帧还是 30 帧轮子转一圈的时间都是一样的。第一种方式在低帧率设备上会变慢第三种方式则可能导致动画卡顿。这个细节看起来很小但能看出模型对动画原理的理解程度。大部分模型用的是第一种方式只有 GPT-6 Astra 和另外一款模型用了第二种方式。4.4 光照与材质的搭配光照和材质的搭配是区分“能看”和“好看”的关键。GPT-6 Astra 的光照设置是这样的const ambientLight new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const directionalLight new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(5, 10, 7); scene.add(directionalLight);材质方面鹈鹕的身体用了MeshPhongMaterial颜色是白色嘴用了MeshPhongMaterial颜色是橙色自行车车架用了MeshPhongMaterial颜色是红色。这个搭配的好处是环境光提供了基础亮度方向光提供了立体感Phong 材质让物体表面有高光。渲染出来的效果比较自然不会太暗也不会太亮。另外几款模型的光照设置就有点问题。有一款模型只用了环境光结果场景里所有物体都是平的没有立体感另一款模型用了方向光但强度设成了 2.0结果物体表面过曝看起来白花花一片。注意Three.js 的光照强度参数在不同版本中可能有差异。r128 版本中环境光强度 0.6 和方向光强度 0.8 是比较安全的范围。如果你用的是其他版本建议先测试一下再确定参数。5. 实操复现手把手教你跑通这个测试5.1 环境准备与 HTML 模板要复现这个测试你只需要一个浏览器和一个文本编辑器。不需要安装 Node.js不需要配置构建工具因为 Three.js 可以通过 CDN 直接引入。我用的 HTML 模板是这样的!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title鹈鹕骑车测试/title style body { margin: 0; overflow: hidden; } canvas { display: block; } /style /head body script srchttps://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js/script script // 模型生成的代码粘贴在这里 /script /body /html这个模板的关键点是Three.js 通过 CDN 引入版本锁定为 r128。为什么要锁定版本因为 Three.js 的 API 在不同版本之间有变化如果不锁定版本模型生成的代码可能因为 API 不兼容而报错。5.2 代码粘贴与运行步骤具体操作步骤打开文本编辑器新建一个文件把上面的 HTML 模板粘贴进去把大模型生成的代码粘贴到// 模型生成的代码粘贴在这里的位置保存文件文件名后缀为.html比如pelican.html双击文件用 Chrome 浏览器打开等待 3 秒观察渲染结果如果代码有语法错误浏览器控制台会报错。按 F12 打开开发者工具切换到 Console 面板就能看到具体的错误信息。如果代码能跑但效果不对比如鹈鹕的位置偏了你可以直接在代码里修改参数然后刷新页面看效果。这种即时反馈的调试方式比在脑子里推演快得多。5.3 参数调整与效果对比如果你想让鹈鹕的位置更准确可以调整以下几个参数参数作用建议范围pelican.position.y鹈鹕的垂直位置1.5 到 2.5pelican.position.z鹈鹕的前后位置-0.5 到 0.5leftWing.rotation.z左翅膀的倾斜角度0 到 0.5 弧度wheel.rotation.x轮子的旋转速度0.02 到 0.1调整参数的时候建议一次只改一个改完刷新页面看效果。如果一次改太多你很难判断是哪个参数起了作用。我实测下来鹈鹕的垂直位置在 2.0 左右比较合适前后位置在 0 附近比较合适。翅膀的倾斜角度在 0.3 弧度左右比较自然。轮子的旋转速度在 0.05 左右看起来比较流畅。6. 常见问题与排查技巧实录6.1 代码跑不起来怎么办这是最常见的问题。模型生成的代码跑不起来通常有三个原因原因一Three.js 版本不兼容。模型可能用了新版本的 API但 CDN 加载的是旧版本。解决办法是在 Prompt 里明确指定 Three.js 版本比如“使用 Three.js r128 版本”。原因二语法错误。模型生成的代码可能有拼写错误、括号不匹配、变量未定义等问题。解决办法是打开浏览器控制台看具体的错误信息然后手动修复。原因三CDN 加载失败。有时候 CDN 会抽风导致 Three.js 加载不出来。解决办法是换一个 CDN或者把 Three.js 下载到本地。6.2 场景渲染出来是黑屏黑屏通常是因为相机位置不对或者光照没设置好。如果相机位置不对场景里的物体可能在相机后面或者离相机太远。解决办法是把相机位置调整到(0, 5, 10)左右然后让相机看向场景中心(0, 0, 0)。如果光照没设置好场景里的物体可能全是黑的。解决办法是至少添加一个环境光强度设为 0.5 到 1.0 之间。6.3 鹈鹕和自行车的位置错乱这是空间推理问题也是大模型最容易翻车的地方。如果鹈鹕悬在自行车上方说明pelican.position.y设得太高了。如果鹈鹕嵌在自行车里面说明pelican.position.y设得太低了。如果鹈鹕在自行车前面或后面说明pelican.position.z设得不对。解决办法是先确定自行车的位置然后把鹈鹕的位置设为自行车位置加上一个偏移量。比如自行车在(0, 0, 0)鹈鹕的座位在(0, 1.5, 0)那么鹈鹕的身体中心应该在(0, 2.0, 0)左右。6.4 动画卡顿或不流畅动画卡顿通常是因为用了setInterval而不是requestAnimationFrame。setInterval的问题是它不管浏览器是否准备好渲染都会按照固定的时间间隔执行。如果浏览器正在处理其他任务setInterval的回调可能会被延迟导致动画卡顿。requestAnimationFrame的好处是它会在浏览器准备好渲染下一帧时执行与浏览器的刷新率同步。这样动画会更流畅。解决办法是把setInterval替换成requestAnimationFrame或者用THREE.Clock来获取时间差。6.5 常见问题速查表问题现象可能原因解决办法代码报错Three.js 版本不兼容指定版本为 r128代码报错语法错误查看控制台错误信息手动修复黑屏相机位置不对调整相机位置到 (0, 5, 10)黑屏光照未设置添加环境光强度 0.5-1.0鹈鹕悬空垂直位置太高降低 pelican.position.y鹈鹕嵌入自行车垂直位置太低提高 pelican.position.y动画卡顿用了 setInterval改用 requestAnimationFrame轮子不转旋转轴设错检查 rotation.x 还是 rotation.y踏板飞出屏幕旋转中心设错检查踏板的 position 和 rotation实操心得排查问题时建议先用一个最简单的场景测试比如只画一个立方体。如果立方体能正常渲染说明环境没问题问题出在模型生成的代码上。如果立方体也渲染不出来说明环境有问题需要检查 CDN 加载和浏览器设置。7. 从测试结果看大模型代码生成的现状7.1 模型之间的差距在哪里这次测试最直观的感受是大模型在代码生成上的差距主要体现在空间推理和细节处理上。API 记忆方面12 个模型都能写出正确的 Three.js API 调用。SphereGeometry、ConeGeometry、TorusGeometry这些常用几何体没有一个模型写错。这说明大模型在 API 层面的能力已经相当成熟了。但在空间推理方面差距就拉开了。GPT-6 Astra 能准确计算出鹈鹕身体和自行车座的位置关系能算出翅膀的旋转角度能算出轮子的旋转轴。其他模型要么算错要么干脆不算随便填个参数就完事。细节处理方面GPT-6 Astra 会考虑几何体的分段数、材质的高光、光照的强度。其他模型往往只关注“有没有”不关注“好不好”。7.2 对开发者的实际意义如果你是一个前端开发者想用大模型来辅助写 Three.js 代码我的建议是第一不要指望模型一次生成完美的代码。即使是最好的模型生成的代码也需要你手动调整参数。把模型当成一个“能写出 80% 代码的助手”而不是“能写出 100% 代码的专家”。第二Prompt 要写得足够具体。你给模型的约束越多它生成的代码就越接近你的预期。比如你可以指定几何体的类型、参数范围、位置关系甚至指定光照的强度和颜色。第三学会看代码。模型生成的代码不一定是最优解有时候它用了很复杂的方式实现了一个很简单的效果。你需要能看懂代码然后决定是直接用还是重写。7.3 后续可以怎么扩展这个测试这个测试还有很多可以扩展的方向增加交互让用户可以用鼠标拖拽旋转场景或者用键盘控制鹈鹕移动增加复杂度让鹈鹕在骑车的路上遇到障碍物需要跳跃或转向增加真实感用纹理贴图代替纯色材质用阴影代替简单的光照增加对比维度除了代码质量还可以对比生成速度、Token 消耗、代码长度我后续打算把交互功能加上让这个测试从“静态渲染”变成“可交互场景”。到时候再测一轮看看哪些模型能处理好交互逻辑。8. 一些踩过的坑和最后的建议8.1 不要忽略 Three.js 的版本问题这是我踩过的最大的坑。最开始测试的时候我没有锁定 Three.js 版本结果 CDN 自动加载了最新版。有些模型生成的代码用了旧版 API在新版里已经废弃了直接报错。后来我锁定了 r128 版本问题才解决。如果你要复现这个测试一定要在 HTML 模板里锁定 Three.js 版本。不要用three.min.js这种不带版本号的链接要用three.js/r128/three.min.js这种带版本号的链接。8.2 控制台是你的好朋友调试 Three.js 代码的时候浏览器控制台是最有用的工具。按 F12 打开控制台切换到 Console 面板所有的报错信息都会显示在这里。如果代码跑不起来先看控制台有没有报错。如果有报错根据错误信息定位问题。如果没有报错但效果不对可以在代码里加console.log输出关键变量的值看看是不是参数设错了。8.3 从简单场景开始调试如果你要自己写 Three.js 代码建议从一个最简单的场景开始一个立方体、一个相机、一个光源。确保这个场景能正常渲染之后再逐步添加其他物体。这样做的好处是如果出了问题你能快速定位是哪个环节出了错。如果一上来就写一个复杂的场景出了问题你根本不知道是哪里错了。8.4 模型的选择建议如果你只是想快速生成一个 Three.js 场景GPT-6 Astra 是目前最好的选择。它的代码质量最高空间推理最准确细节处理最到位。如果你预算有限国产模型里也有几个不错的选择。它们的代码质量虽然不如 GPT-6 Astra但也能跑通只是需要你手动调整的参数更多一些。如果你只是想学习 Three.js不建议完全依赖模型生成的代码。模型生成的代码往往不是最优解有些写法甚至是不推荐的。最好的学习方式还是看官方文档和示例代码然后自己动手写。最后再分享一个小技巧如果你要让模型生成 Three.js 代码可以在 Prompt 里加一句“请确保代码可以直接在浏览器中运行不需要额外配置”。这句话能提醒模型不要用需要构建工具的写法比如import语句。实测下来加了这句话之后代码的可运行性明显提高。