企业官网建设流程全解析

1. 三款模型同台竞技的背景与实测动机

1.1 为什么选"3D游戏"作为横向对比的试金石

用同一个3D游戏需求去横评 Step 5 Preview、DeepSeek V4 Pro、GLM5.3，不是随便挑的题目。3D游戏这个场景天然踩中了代码生成模型的几个"高压线"：它同时要求数学正确（向量、矩阵、四元数、投影变换）、状态管理正确（场景图、生命周期、资源释放）、渲染管线正确（着色器、光照、深度测试），还得把这几块拼成一个能跑起来的整体。任何一环出错，画面要么黑屏、要么穿模、要么直接崩。

相比之下，"写个待办清单""写个爬虫"这类任务，模型只要语法对、逻辑大致通就能交付，容错空间大得多。3D游戏不一样，它是可验证的——跑起来转一圈，对不对一眼就知道。这正好用来区分"能写代码"和"能写对的代码"。

我这次实测的核心诉求有三个：第一，看三家在长上下文+多文件工程下的稳定性，因为3D游戏不可能一个文件写完；第二，看空间数学这种容易翻车的地方谁更靠谱；第三，看迭代纠错能力，也就是第一版跑不通时，谁能根据报错快速收敛。这三点，基本决定了一个模型能不能真正进生产。

1.2 三款模型的定位差异与预期

先把三位的"人设"摆清楚，后面看结果才不意外。

Step 5 Preview是阶跃星辰这一代的主力预览版，主打的是长上下文和复杂推理，官方口径里对代码和Agent任务都有针对性优化。Preview 版本意味着它还在迭代中，能力上限和稳定性都需要实测来摸。

DeepSeek V4 Pro延续了 DeepSeek 系列在代码上的口碑，V3 时代它在算法题和工程代码上就已经是第一梯队，V4 Pro 在推理深度和指令遵循上又往前走了一步，属于"闭眼选也不太会错"的那类。

GLM5.3是智谱这一代的中坚，中文语境和工具调用是它的传统强项，社区里关于它的讨论热度一直很高，尤其是配合各类工作台（比如 WorkBuddy 这类）做自动化任务时表现活跃。

我的预期是：DeepSeek V4 Pro 在纯代码正确率上可能领先，GLM5.3 在中文注释和工程组织上更顺手，Step 5 Preview 则要看它在长任务里会不会"掉链子"。但预期归预期，实测才是硬道理。

1.3 实测环境与统一约束

为了让对比公平，我把变量尽量锁死：

• 统一提示词：同一段需求描述，一字不改地喂给三家。需求是"用 Three.js 做一个可交互的 3D 小场景，包含地面、若干可旋转的立方体、方向光+环境光、鼠标拖拽旋转视角、滚轮缩放"。
• 统一技术栈：Three.js + 原生 JS，不引入框架，避免框架差异干扰判断。
• 统一验收标准：能在浏览器直接打开、无控制台报错、交互正常、帧率稳定。
• 统一迭代次数：每家最多给 3 轮纠错机会，把报错原样贴回去让它改。

提示：横评最忌讳"这家我多喂了几轮提示"。约束不统一，结论就没有参考价值。宁可多花时间锁变量，也别图快。

2. 第一轮生成：三家交出的初版代码长什么样

2.1 Step 5 Preview 的初版：结构完整但埋了坑

Step 5 Preview 第一轮给出的代码，第一眼印象是"工程感不错"。它主动把代码拆成了init()、animate()、onWindowResize()三个函数，还加了OrbitControls的引入。注释是中文的，写得挺细，比如在光照部分标注了"环境光提供基础亮度，方向光制造明暗对比"。

但跑起来就发现问题了：OrbitControls 的引入路径写错了。它用的是import { OrbitControls } from 'three/addons/controls/OrbitControls.js'，这个路径在纯 CDN 引入的场景下会 404。正确做法要么用 importmap 映射three/addons/，要么直接指向 CDN 的完整 URL。它没配 importmap，所以控制台直接报模块找不到。

第二个坑更隐蔽：它在animate()里对每个立方体都调了一次cube.rotation.x += 0.01，但立方体是用循环创建的，循环变量i在闭包里被共享了，导致所有立方体转速一致——这倒不算错，但它注释里写的是"每个立方体以不同速度旋转"，注释和实现不符。这种"说得比做得好"的情况，在预览版模型里挺常见。

2.2 DeepSeek V4 Pro 的初版：一次跑通的概率最高

DeepSeek V4 Pro 的初版是三家里面唯一一次直接跑通的。它用了 importmap 方案：

<script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/" } } </script>

这个细节很关键。importmap 是 ES Module 时代解决"裸模块名"映射的标准做法，很多模型会忽略它，导致import 'three'直接失败。DeepSeek V4 Pro 不仅配了，还锁了版本号0.160.0，避免了"今天能跑明天挂"的版本漂移问题。

代码组织上它偏"紧凑"，没有过度拆分函数，但每个关键步骤都有英文注释。立方体旋转用了Math.random()给每个实例一个独立速度，和需求里"若干可旋转的立方体"对得上。唯一的小瑕疵是它没处理devicePixelRatio，在高分屏上会略糊，但这属于优化项，不影响验收。

2.3 GLM5.3 的初版：中文友好但数学翻车

GLM5.3 的初版中文注释是三家最舒服的，几乎每行关键代码都有解释，对新手极其友好。它甚至贴心地加了一段"如何修改立方体数量"的说明。

问题出在相机投影矩阵上。它写的是：

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(5, 5, 5); camera.lookAt(0, 0, 0);

这段本身没错，但它把lookAt放在了OrbitControls初始化之前，而 OrbitControls 初始化时会重置相机的朝向。结果就是：初始视角是对的，但一旦你拖动鼠标，相机会"跳"一下才跟上。这是典型的初始化顺序问题，属于空间状态管理的细节坑。

另外它的光照只给了一个方向光，没加环境光，导致背光面全黑，视觉上很"硬"。需求里明确写了"方向光+环境光"，它漏了一半。

2.4 第一轮小结：谁更接近"能交付"

第一轮下来，DeepSeek V4 Pro 领先，GLM5.3 次之，Step 5 Preview 垫底。但一轮说明不了问题，真正的差距在纠错环节。

3. 迭代纠错：把报错贴回去之后发生了什么

3.1 纠错轮次的设计与观察维度

纠错环节我做了两件事：一是把浏览器控制台的原始报错一字不改地贴回去，二是只描述现象不指方向，比如只说"拖动鼠标时相机跳变"，不说"你 lookAt 顺序错了"。这样能看出模型是"真会诊断"还是"只会顺着提示改"。

观察维度有三个：定位准不准（能不能找到根因）、改动小不小（是精准修复还是推倒重来）、有没有引入新问题（修复 A 弄坏 B 是最烦的）。

3.2 Step 5 Preview 的修复：一次到位但话多

Step 5 Preview 拿到"模块找不到"的报错后，立刻定位到了 importmap 缺失，补上了映射，并且顺手把版本锁到了0.161.0。修复是精准的，没有动其他代码。

但它的话有点多——回复里先解释了一遍 ES Module 的加载机制，又解释了一遍 importmap 的作用，最后才给代码。对于赶时间的开发者，这种"教学式回复"其实有点拖节奏。不过从另一个角度看，如果你是在学习阶段，这种解释是有价值的。

第二轮它跑通了，交互也正常。从"跑不通"到"跑通"只用了一轮，这个纠错效率是合格的。

3.3 DeepSeek V4 Pro 的优化：主动补了没要求的东西

DeepSeek V4 Pro 第一轮就跑通了，所以我给它的第二轮任务是"优化视觉表现"。它做了几件事：加了renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))解决高分屏模糊，加了THREE.ACESFilmicToneMapping让色彩更自然，还给立方体加了轻微的金属质感材质。

这里有个细节值得说：它把setPixelRatio的上限卡在了 2，而不是直接用window.devicePixelRatio。为什么？因为有些 4K 屏的 devicePixelRatio 能到 3 甚至更高，直接全量渲染会让 GPU 压力陡增、帧率掉下来。卡在 2 是性能和清晰度的平衡点。这个"上限思维"是很多新手会忽略的，模型能主动想到，说明它对渲染性能有实际认知。

3.4 GLM5.3 的修复：改对了但改多了

GLM5.3 拿到"相机跳变"的描述后，定位到了 OrbitControls 的问题，把lookAt挪到了 controls 初始化之后——这是对的。但它同时重写了整个相机初始化逻辑，把原本简单的position.set换成了一堆三角函数计算，代码量翻了三倍，可读性反而下降了。

更麻烦的是，它在重写时把PerspectiveCamera的 fov 从 75 改成了 60，没说明原因。fov 变小会让视野变窄，虽然不算错，但属于"顺手改了不该改的参数"。这种过度修改是纠错环节的大忌，因为它增加了引入新 bug 的概率。

光照问题它倒是补上了环境光，这点值得肯定。

3.5 纠错能力横向对比

纠错环节 DeepSeek V4 Pro 依然领先，Step 5 Preview 追平了 GLM5.3，GLM5.3 因为过度修改略吃亏。

4. 空间数学与渲染管线：谁真正理解 3D

4.1 向量与矩阵：3D 的地基

3D 游戏里所有的"位置、旋转、缩放"最终都归结为 4x4 矩阵运算。模型如果只是"背 API"，很容易在需要手写变换时露馅。我特意加了一个进阶需求：让立方体绕自身中心旋转，而不是绕世界原点旋转。

这个需求看着简单，实则考的是对变换顺序的理解。在 Three.js 里，mesh.rotation是绕自身轴转，mesh.rotateOnWorldAxis是绕世界轴转，而如果直接改mesh.matrix就得自己处理平移-旋转-平移的复合。三家在这题上的表现差异很有意思。

Step 5 Preview 用了mesh.rotation.y += speed，正确，因为它默认就是绕自身中心。DeepSeek V4 Pro 同样用了rotation，但它额外加了一句注释解释"Three.js 的 rotation 默认以物体局部坐标系为基准"，把原理点透了。GLM5.3 则用了mesh.rotateOnAxis(new THREE.Vector3(0,1,0), speed)，这个也能实现，但每次调用都 new 一个 Vector3，有轻微的性能浪费——属于"对但不够好"。

4.2 相机投影：透视与正交的取舍

透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）的区别，是 3D 入门的分水岭。透视相机有"近大远小"，符合人眼直觉；正交相机没有透视变形，常用于工程制图和等距视角游戏。

我让三家解释"什么时候该用正交相机"，看它们是真懂还是背概念。DeepSeek V4 Pro 的回答最到位：它举了《纪念碑谷》这类等距视角游戏的例子，说明正交相机能保证"无论物体在屏幕哪个位置，大小都一致"，这对解谜类游戏的视觉一致性很重要。Step 5 Preview 的解释偏教科书，正确但干巴。GLM5.3 提到了"正交相机没有近大远小"，但没说清应用场景。

4.3 光照模型：从 Lambert 到 PBR

Three.js 的光照从简单的MeshLambertMaterial到基于物理的MeshStandardMaterial，复杂度差很多。我让三家把材质从 Lambert 升级到 Standard，看它们会不会漏掉关键参数。

升级到MeshStandardMaterial后，必须设置roughness（粗糙度）和metalness（金属度），否则默认值会让物体看起来像塑料。DeepSeek V4 Pro 主动设了roughness: 0.4, metalness: 0.3，并解释了这两个参数对最终观感的影响。Step 5 Preview 设了参数但没解释。GLM5.3 直接用了默认值，结果物体反光很怪。

注意：MeshStandardMaterial在没有环境贴图（envMap）的情况下，金属度设太高会显得很暗，因为金属的反射主要靠环境。新手常在这里翻车，建议先用低 metalness 起步。

4.4 深度测试与透明排序

这是 3D 渲染里最容易被忽视、也最容易出 bug 的地方。当场景里有半透明物体时，渲染顺序会直接影响最终画面。我加了一个半透明立方体，看三家怎么处理。

DeepSeek V4 Pro 主动设置了transparent: true和opacity: 0.5，并提醒"半透明物体建议关闭 depthWrite 或调整 renderOrder"。Step 5 Preview 设了 transparent 但没提排序问题。GLM5.3 只设了 opacity，忘了 transparent，导致透明度完全不生效——这是个硬伤，因为opacity单独用是无效的，必须配合transparent: true。

4.5 渲染管线理解度对比

这一轮 DeepSeek V4 Pro 的优势进一步拉大，它对"为什么"的理解明显更深。

5. 工程化与 WorkBuddy 类工作台的配合

5.1 为什么要把模型放进工作台里用

单次对话生成代码只是起点。真实项目里，你需要的是持续迭代：改需求、加功能、修 bug、跑测试。这时候，把模型接进一个工作台（比如社区里讨论很多的 WorkBuddy 这类工具）就很有必要，因为它能帮你管理上下文、保存历史、串联多轮任务。

WorkBuddy 这类工作台的核心价值在于"记忆"和"规则"。你可以给它定几条全局规则，比如"所有代码必须锁版本号""所有 3D 场景必须加环境光"，之后所有任务都会自动遵守。这比每次对话都重复一遍要求高效得多。

5.2 三款模型在工作台场景下的适配性

我模拟了工作台的典型用法：给一个规则"生成的 HTML 必须自带 importmap 且锁定 Three.js 版本"，然后看三家是否遵守。

DeepSeek V4 Pro 完美遵守，因为它本来就有锁版本的习惯。Step 5 Preview 遵守了规则，但需要我在提示里强调一次。GLM5.3 第一次没遵守，我重申规则后才改——说明它对"跨轮次规则"的保持能力稍弱。

这引出一个实际问题：工作台的规则机制，对模型的指令遵循能力是有要求的。如果模型容易"忘记"前面的规则，工作台就得反复提醒，体验会打折。从这点看，DeepSeek V4 Pro 和 Step 5 Preview 更适合放进有严格规则的工作流。

5.3 缓存目录、私有化部署这些工程细节

社区里关于 WorkBuddy 的讨论，很多集中在"缓存目录能不能改到 D 盘""能不能私有化部署""Linux 下怎么装"这类工程问题上。这些其实和模型本身关系不大，但和"模型能不能进生产"关系很大。

我的经验是：缓存目录一定要能改。默认缓存往往在系统盘，3D 项目的依赖和构建产物动辄几个 G，塞满 C 盘是迟早的事。私有化部署则关系到数据不出内网，对团队协作是刚需。这些能力，工作台本身要支持，模型生成的代码也要"配合"——比如生成的构建脚本要能接受自定义输出路径。

5.4 工作台配合度对比

6. 常见问题与排查技巧实录

6.1 黑屏问题速查表

3D 项目最高频的问题就是"打开一片黑"。下面这张表是我踩坑总结出来的排查顺序，按可能性从高到低排：

提示：排查黑屏，第一步永远是"加一个环境光"。如果加了环境光物体就可见，说明是光照问题；如果还是黑，那就是相机或渲染循环的问题。这一招能砍掉一半的排查时间。

6.2 模型生成代码的典型坑

实测下来，三款模型有几个共通的坑，值得单独拎出来说。

坑一：版本不锁。Step 5 Preview 和 GLM5.3 初版都没锁 Three.js 版本，用的是latest或省略版本号。这在今天能跑，但 Three.js 的 API 在小版本间经常有破坏性变更，下周可能就挂了。永远锁版本，这是铁律。

坑二：importmap 缺失。这是 ES Module 时代的经典坑。只要用了import 'three'这种裸模块名，就必须配 importmap，否则浏览器不知道怎么解析。Step 5 Preview 就栽在这。

坑三：初始化顺序。GLM5.3 的相机跳变就是典型。OrbitControls、相机 lookAt、场景添加物体，这三者的顺序会影响初始状态。建议的顺序是：先建相机和场景，再加 controls，最后加物体。

坑四：透明材质忘开 transparent。GLM5.3 的 opacity 失效就是这个原因。记住：opacity必须和transparent: true一起用。

6.3 性能优化的三个实用技巧

3D 项目跑起来之后，下一步就是"跑得顺"。分享三个我常用的优化点。

第一，限制 pixelRatio。前面提过，Math.min(window.devicePixelRatio, 2)是性价比最高的优化，一行代码就能在高分屏上省下大量 GPU 开销。

第二，合并几何体。如果场景里有几百个相同的小物体，用InstancedMesh代替循环创建 Mesh，能把 draw call 从几百降到 1。这个优化在粒子效果里尤其明显。

第三，按需渲染。如果场景是静态的（没有动画），别用requestAnimationFrame无限循环，改成"只在交互时渲染"，能大幅降低 CPU 和电量消耗。

6.4 模型选型的实战建议

最后说说怎么选。如果你的任务是一次性、要正确率，DeepSeek V4 Pro 是首选，它一次跑通的概率最高，纠错也最精准。如果你需要大量中文注释和教学式输出，GLM5.3 的注释质量最好，但要盯着它别过度修改。如果你在做长上下文、多文件的复杂工程，Step 5 Preview 的长任务能力值得一试，但要做好"第一版可能要修"的心理准备。

我个人的组合拳是：用 DeepSeek V4 Pro 打底生成，用 GLM5.3 补中文注释，用 Step 5 Preview 处理超长上下文的重构任务。三者不是替代关系，而是各有擅长的位置。

7. 从实测到落地：我的几点真实体会

跑完这一整轮，最大的感受是：模型之间的差距，不在"能不能写"，而在"写完之后要不要人擦屁股"。三家都能生成看起来像模像样的 3D 代码，但真正拉开差距的，是那些"不跑不知道、一跑就露馅"的细节——importmap、初始化顺序、transparent、版本锁定。这些细节，恰恰是新手最容易忽略、老手最在意的。

另一个体会是，工作台的价值被低估了。很多人只把模型当"代码生成器"，用完就关。但如果你把它接进 WorkBuddy 这类工作台，配上全局规则和跨轮记忆，它就从"一次性工具"变成了"持续协作的伙伴"。规则定得好，能省掉大量重复沟通。

最后一个实用建议：别迷信任何一次跑通。3D 项目尤其如此，今天跑通不代表明天跑通，换个浏览器、换个分辨率、换个 Three.js 版本，都可能出问题。养成"锁版本、写注释、留排查入口"的习惯，比选哪个模型更重要。模型会迭代，好习惯不会过时。