企业官网建设流程全解析

1. 三个模型同台做3D游戏，我为什么选这个题

最近圈子里聊得最多的，除了各家模型又发了什么新版本，就是"到底哪个模型能真正把一个大活儿从头干到尾"。Step 5 Preview、DeepSeek V4 Pro、GLM5.3 这三个名字被反复提起，但大多数讨论都停留在跑分和单轮问答上，真正拿它们做完整项目的人不多。我这次干脆把三个模型拉到同一个任务上——从零做一个能跑起来的3D游戏，看看它们在真实工程场景里各自是什么表现。

先说清楚这个测试的定位。它不是跑分，也不是要分出谁高谁低，而是想回答一个很实际的问题：当你手里有一个中等复杂度的3D游戏需求，需要模型帮你完成场景搭建、角色控制、碰撞检测、UI交互这一整套东西时，哪个模型能少让你返工、少让你补锅。这个问题的答案，比任何benchmark都更贴近日常开发。

3D游戏这个任务选得也有讲究。它天然包含几个不同维度的挑战：一是空间数学，向量、矩阵、四元数这些东西模型容易算错；二是状态管理，游戏循环里的状态同步很容易出bug；三是资源组织，模型得知道哪些东西该拆成模块、哪些该内联；四是调试友好度，代码跑不起来的时候，模型给的报错分析靠不靠谱。这四个维度基本能覆盖一个模型在工程任务上的综合能力。

我用的技术栈是 Three.js 加原生 JavaScript，不引入构建工具，直接浏览器打开就能跑。这么选的原因很简单：排除掉打包工具、依赖版本这些干扰因素，让模型的输出能直接被验证。如果模型连一个无构建的3D场景都搞不定，那它在更复杂的工程里只会更麻烦。测试环境是同一台机器、同一个浏览器、同样的提示词模板，尽量把变量控制住。

整个测试过程我会按"需求拆解、首轮生成、调试迭代、代码质量、边界处理"这几个环节展开，每个环节都会给出三个模型的实际表现和我的判断。如果你也在纠结用哪个模型做前端或游戏类项目，这篇应该能帮你省下不少试错时间。

2. 需求拆解：一个"能玩"的3D游戏到底要哪些东西

2.1 我把需求压到了最小可玩集

很多人做模型对比时喜欢把需求写得很宏大，结果模型输出一堆跑不起来的代码，最后只能比谁的错误少。我反其道而行，把需求压到一个最小可玩集，确保每个模型都有机会完整交付。具体需求是这样的：一个3D场景，地面加几个障碍物，一个可控角色，WASD移动加鼠标视角，角色碰到障碍物有碰撞反馈，屏幕上有个简单的分数或状态显示。

这个需求看起来简单，但它把3D游戏的核心要素都覆盖了。场景搭建考验模型对 Three.js 基础API的熟悉度；角色控制考验它对相机和输入系统的理解；碰撞检测考验它的空间数学；UI显示考验它的DOM操作和状态同步。四个点里任何一个出问题，游戏就跑不起来。

我特意没有加物理引擎，因为一旦引入 Cannon.js 或 Ammo.js，模型很容易把问题归咎于物理库的配置，而不是它自己的代码逻辑。用最朴素的AABB碰撞检测，反而能看出模型对碰撞原理的理解是否扎实。同样，我没有要求加载外部模型文件，全部用几何体拼，避免资源路径问题干扰判断。

提示：做模型对比测试时，需求越简单，越能暴露模型的基础能力差异。复杂需求往往会让多个问题纠缠在一起，最后你分不清是模型不行还是需求本身有歧义。

2.2 提示词模板我改了四版才定稿

第一版提示词我写得很详细，把每个功能点都列出来了，结果三个模型都输出了一大段代码，但结构混乱，变量命名随意，改起来很痛苦。第二版我改成让模型先给方案再写代码，结果模型花大量篇幅描述方案，代码反而缩水了。第三版我尝试用分步指令，让模型一步步来，但模型在第二步就忘了第一步的约定。

最后定稿的提示词是这样的：先给一句角色设定，说明你是一个有经验的3D前端开发者；然后给需求清单，用无序列表列清楚；接着给技术约束，明确用 Three.js CDN 引入、不用构建工具、单文件输出；最后给输出格式要求，要求代码分模块注释，关键逻辑要有说明。这个模板的关键在于"约束前置"，让模型在动笔之前就知道边界在哪。

实测下来，这个模板对三个模型都有效，但效果差异明显。Step 5 Preview 基本能一次吃透约束，DeepSeek V4 Pro 会在某些约束上打折扣，GLM5.3 则倾向于在约束之外加一些自己的设计。这个差异在后面每个环节都会反复出现。

2.3 验收标准我定了三条硬指标

为了避免主观判断，我定了三条硬指标。第一条是"打开即跑"，把生成的HTML文件双击打开，不报错、不白屏、能看到3D场景。第二条是"操作有反馈"，按WASD角色能动，移动鼠标视角能转，碰到障碍物有视觉或逻辑反馈。第三条是"代码可读"，变量命名有意义，关键逻辑有注释，模块划分清晰。

这三条看起来基础，但实际测下来，能同时满足三条的模型输出并不多。很多模型能过第一条，但操作反馈时有时无；有些能过前两条，但代码读起来像天书。我把这三条作为每个环节的底线，任何环节不达标都会记录在案。

3. 首轮生成：三个模型的第一版代码差在哪

3.1 Step 5 Preview 的首轮输出最接近可用

Step 5 Preview 的首轮输出让我有点意外。它没有急着写代码，而是先用几行注释把场景结构说清楚了：一个 Scene，一个 PerspectiveCamera，一个 WebGLRenderer，地面用 PlaneGeometry，障碍物用 BoxGeometry，角色用一个 CapsuleGeometry。这个结构说明它对 Three.js 的场景组织有清晰认知。

代码部分它分了四个模块：初始化、场景构建、输入处理、游戏循环。每个模块之间用注释分隔，变量命名也规范，比如moveSpeed、cameraDistance、collisionThreshold这些。碰撞检测它用的是简单的距离判断，虽然不够精确，但对于这个需求已经够用。最让我满意的是它在游戏循环里加了deltaTime的处理，说明它知道帧率无关的移动逻辑该怎么写。

不过它也有问题。鼠标视角控制它用的是mousemove事件直接改相机旋转，没有做指针锁定，导致鼠标移出窗口后视角就失控了。这个问题在后续调试环节我让它修，它一次就改对了，说明它知道 PointerLock API 的存在，只是首轮没主动用。

3.2 DeepSeek V4 Pro 的代码能跑但结构偏散

DeepSeek V4 Pro 的首轮输出也能跑，但结构明显比 Step 5 Preview 散。它把所有逻辑都写在一个大函数里，初始化、场景、输入、循环全混在一起，变量命名也比较随意，出现了a、b、temp这种名字。代码能跑起来，但你想改点什么，得先把整个函数读一遍。

它的碰撞检测用的是包围盒相交判断，比 Step 5 Preview 的距离判断更准确，这点值得肯定。但它在输入处理上有个明显问题：它同时监听了keydown和keyup，但没有维护按键状态对象，而是直接在事件里改角色位置。这导致按住W键时角色移动不连续，而是一顿一顿的。这个问题在调试环节花了它两轮才改对。

DeepSeek V4 Pro 的注释也比较少，关键逻辑基本没有说明。比如它计算相机旋转的那段，用了几个三角函数，但没有注释解释为什么这么算。对于想学习的人来说，这段代码的可读性不高。

3.3 GLM5.3 的设计感最强但落地有偏差

GLM5.3 的首轮输出是三家里设计感最强的。它主动加了一个简单的状态机来管理游戏状态，还加了一个配置对象把所有可调参数集中管理，比如config.moveSpeed、config.cameraSensitivity。这个设计思路很好，说明它在考虑代码的可维护性。

但问题也出在这里。它的状态机设计得过于复杂，对于一个最小可玩集来说有点杀鸡用牛刀，而且状态切换逻辑里有个bug，导致游戏启动后卡在loading状态出不来。我检查了一下，是它在初始化时忘了调用状态切换函数。这个bug不难修，但说明它在追求设计感的时候，忽略了最基本的流程验证。

它的碰撞检测用的是射线检测，理论上最准确，但实现上有个问题：射线起点设在了角色中心，导致角色还没碰到障碍物就被判定碰撞。这个偏差在调试环节我让它调，它改了两轮才把射线起点移到角色边缘。

3.4 首轮对比小结

首轮下来，Step 5 Preview 的可用度最高，基本能直接进入调试环节。DeepSeek V4 Pro 需要先解决移动卡顿问题。GLM5.3 需要先修启动bug，再简化设计。这个结果和我在其他项目里的经验基本一致：Step 系列在工程落地性上一直比较稳，DeepSeek 偏直接但细节粗糙，GLM 有想法但容易用力过猛。

4. 调试迭代：谁更能听懂"人话"改bug

4.1 视角控制问题：PointerLock 的引入

Step 5 Preview 的视角问题我描述得很简单："鼠标移出窗口后视角失控，改成指针锁定"。它一次就改对了，引入了requestPointerLock，在点击画布时锁定指针，在mousemove里用movementX和movementY来旋转相机。它还主动加了pointerlockchange的监听，处理锁定状态变化。这个改动很干净，没有引入额外问题。

DeepSeek V4 Pro 我也让它改同样的问题，它第一次改的时候只加了requestPointerLock，但忘了处理movementX，还是用clientX来算旋转，导致锁定后视角旋转速度异常。我指出后它第二次改对了。这个差异说明 Step 5 Preview 对 PointerLock API 的理解更完整，知道锁定后坐标系的改变。

GLM5.3 在这个问题上表现不错，它一次就改对了，而且额外加了灵敏度配置。但它加配置的方式有点绕，把灵敏度存在一个全局对象里，而不是放在它之前设计的config对象里，导致配置分散。这个是小问题，但反映出它在迭代时容易破坏自己之前的设计约定。

4.2 移动卡顿问题：按键状态对象的必要性

DeepSeek V4 Pro 的移动卡顿问题，我给的描述是："按住W键角色移动不连续，检查按键处理逻辑"。它第一次改的时候把keydown里的移动逻辑删了，改成在游戏循环里根据按键状态移动，但它没有维护按键状态对象，而是用了一个keys数组，在keydown时 push，在keyup时 splice。这个思路对，但splice在循环里用容易出问题，而且它忘了处理按键重复触发。

我第二次指出后，它改成了用对象存按键状态，keys['w'] = true/false，然后在游戏循环里判断。这次改对了，移动也连续了。这个问题的根源是它对事件驱动和状态驱动的区别理解不够清晰，首轮用了事件驱动做移动，这在游戏循环里是大忌。

Step 5 Preview 首轮就没这个问题，它一开始就用了按键状态对象。GLM5.3 也没这个问题，它的状态机设计虽然复杂，但按键状态管理是对的。这说明在游戏开发的基础模式上，Step 5 Preview 和 GLM5.3 的认知比 DeepSeek V4 Pro 更到位。

4.3 碰撞检测偏差：射线起点的调整

GLM5.3 的碰撞检测偏差问题，我描述为："角色还没碰到障碍物就判定碰撞，检查射线起点"。它第一次改的时候把射线起点从角色中心改到了角色底部，但方向还是朝前，导致角色跳跃时碰撞判定异常。我第二次指出后，它改成了从角色中心朝移动方向发射射线，射线长度设为角色半径加移动距离。这次改对了。

这个问题的排查过程让我对 GLM5.3 的调试能力有了新认识。它改bug的速度不慢，但每次改都容易引入新问题，需要多轮才能收敛。相比之下，Step 5 Preview 在调试时更稳，基本一轮就能改到位。DeepSeek V4 Pro 在碰撞检测上首轮就用了包围盒，没出这个问题，但它在其他环节的调试轮次更多。

4.4 调试轮次统计

从调试轮次看，Step 5 Preview 明显更省心。DeepSeek V4 Pro 和 GLM5.3 的轮次相同，但问题类型不同：DeepSeek 的问题偏基础模式，GLM 的问题偏设计落地。这个差异在选型时很重要，如果你团队里新人多，Step 5 Preview 的代码更容易维护；如果你想要更多设计参考，GLM5.3 的思路有借鉴价值，但要做好多轮调试的准备。

5. 代码质量深挖：可读性、模块化和扩展性

5.1 变量命名和注释的差距比想象中大

把三个模型的最终代码放在一起看，变量命名和注释的差距非常明显。Step 5 Preview 的代码里，你能看到playerVelocity、obstacleList、collisionNormal这种一看就懂的名字，关键逻辑上面都有注释，比如"根据deltaTime计算帧率无关的移动距离"。这种代码你交给别人维护，别人能很快上手。

DeepSeek V4 Pro 的代码里，变量名虽然比首轮好了，但还是有obj1、obj2这种。注释主要集中在函数头部，函数内部的逻辑注释很少。比如它计算相机旋转的那段，只有一句"计算相机旋转"，具体怎么算的没说明。这种代码你自己改还行，别人接手就得先猜。

GLM5.3 的代码注释最多，但有些注释是废话，比如"初始化变量"下面跟着一行let x = 0。它的变量命名中等偏上，比 DeepSeek 好，但不如 Step 5 Preview 精准。它的优势在于模块划分清晰，每个模块有独立的注释块说明职责，这个习惯很好。

5.2 模块化程度决定了改需求的成本

我特意在测试后期加了一个需求：把角色移动从键盘控制改成同时支持键盘和屏幕虚拟摇杆。这个需求考验的是代码的模块化程度，如果输入处理是独立的模块，改起来就快；如果输入逻辑散落在各处，改起来就痛苦。

Step 5 Preview 的代码里，输入处理是独立的一个模块，它把所有输入事件都收在一个InputManager对象里，游戏循环只读这个对象的状态。我加虚拟摇杆时，只需要在InputManager里加几个方法，把摇杆的输入映射到同样的状态对象上，游戏循环完全不用改。这个改动花了不到十分钟。

DeepSeek V4 Pro 的代码里，输入逻辑和游戏循环耦合在一起，键盘事件直接改角色位置。我加虚拟摇杆时，得先把输入逻辑抽出来，再改游戏循环，改动量是 Step 5 Preview 的三倍。而且抽的过程中容易引入新bug，我改完后测试发现角色在同时按键盘和摇杆时速度会叠加，又花时间修。

GLM5.3 的代码模块化程度也不错，它的输入处理是独立的，但它把输入状态和游戏状态混在一个大对象里，加摇杆时得小心不要破坏状态机的逻辑。改动量介于两者之间，但需要更谨慎。

5.3 扩展性：加一个新障碍物类型要改几处

我又加了一个需求：增加一种会移动的障碍物。这个需求考验的是代码的扩展性，如果障碍物是硬编码的，加新类型就得改多处；如果有障碍物基类或工厂函数，加新类型就只改一处。

Step 5 Preview 的代码里，障碍物是用一个数组存的，每个障碍物是一个对象，有mesh、position、type这些字段。我加移动障碍物时，只需要在障碍物更新逻辑里加一个判断，如果是移动类型就更新位置。改动集中在一处，很干净。

DeepSeek V4 Pro 的代码里，障碍物是直接创建 mesh 然后加到场景里的，没有统一的数据结构。我加移动障碍物时，得先找到所有创建障碍物的地方，然后分别加逻辑，改动分散在三处。改完后还发现有一处漏了，导致移动障碍物不参与碰撞检测。

GLM5.3 的代码里，障碍物是通过一个工厂函数创建的，这个设计很好。但它的工厂函数里把移动逻辑也写死了，我加移动障碍物时得改工厂函数，还得改状态机里的更新逻辑。改动量不大，但需要理解它的状态机设计，门槛稍高。

5.4 代码质量综合对比

代码质量这块，Step 5 Preview 的优势最明显。它的代码不是最花哨的，但结构最合理，改起来最省心。DeepSeek V4 Pro 的代码能跑，但工程性偏弱，适合一次性脚本，不适合长期维护。GLM5.3 的设计感最好，但落地时有些地方过度设计，反而增加了理解成本。

6. 边界情况和异常处理：谁想得更多

6.1 窗口缩放：三个模型都没主动处理

我测试的时候特意拖动了浏览器窗口，发现三个模型都没有主动处理窗口缩放。Step 5 Preview 和 DeepSeek V4 Pro 在窗口缩放后画面拉伸，GLM5.3 稍微好一点，因为它用了resize事件，但只更新了渲染器尺寸，没更新相机宽高比，所以画面还是变形。

我让三个模型都修这个问题，Step 5 Preview 一次改对，在resize事件里同时更新了渲染器尺寸、相机宽高比和投影矩阵。DeepSeek V4 Pro 改了两次，第一次只更新了渲染器，第二次才补上相机。GLM5.3 一次改对，但它把resize逻辑放在了状态机外面，和它的设计风格不一致。

这个问题虽小，但能看出模型对3D渲染管线的理解。窗口缩放涉及渲染器、相机、投影矩阵三个东西的同步更新，少一个就会出问题。Step 5 Preview 对这个管线最清楚。

6.2 长时间运行：内存泄漏的隐患

我让游戏跑了半小时，观察内存占用。Step 5 Preview 的版本内存稳定，没有明显增长。DeepSeek V4 Pro 的版本内存缓慢增长，我检查后发现它在游戏循环里每次都创建新的Vector3对象，没有复用，导致垃圾回收压力大。GLM5.3 的版本内存也稳定，但它在状态切换时创建了新对象，旧对象没有及时释放，长时间运行后有小幅增长。

这个问题在短时间测试里看不出来，但如果你要做长时间运行的游戏，内存管理就很重要。Step 5 Preview 在游戏循环里复用了向量对象，这个习惯很好。DeepSeek V4 Pro 和 GLM5.3 都需要在内存管理上多注意。

6.3 异常输入：快速按键和鼠标乱动

我测试了快速按键和鼠标乱动的情况。Step 5 Preview 的版本表现稳定，快速按键时角色移动正常，鼠标乱动时视角旋转平滑。DeepSeek V4 Pro 的版本在快速按键时偶尔会卡顿，因为它的事件处理里有一些同步操作。GLM5.3 的版本在鼠标乱动时视角会抖动，因为它的灵敏度计算里没有做平滑处理。

这些边界情况在日常使用中不一定遇到，但如果你要做面向用户的游戏，这些细节就很重要。Step 5 Preview 在这些细节上的处理最到位，说明它在生成代码时考虑了实际使用场景。

6.4 异常处理对比

边界情况这块，Step 5 Preview 的优势最明显。它不是靠复杂的异常处理代码，而是靠良好的编程习惯，比如复用对象、处理resize、平滑输入。这些习惯让它的代码在边界情况下更稳。DeepSeek V4 Pro 和 GLM5.3 在这方面都有提升空间。

7. 我的选型建议和实操心得

7.1 不同场景下我会选谁

如果你要做的是一个需要长期维护的前端项目，或者团队里新人多、需要代码可读性高，我会选 Step 5 Preview。它的代码结构清晰，改需求成本低，调试轮次少，这些在长期项目里能省下大量时间。它的首轮输出基本就能用，不需要你花太多精力在补锅上。

如果你要做的是一个一次性脚本，或者你本身经验丰富、能快速看懂散乱的代码，DeepSeek V4 Pro 也能用。它的代码直接，不绕弯子，但你需要自己补上模块化和异常处理。它的优势在于碰撞检测这类具体算法上有时比 Step 5 Preview 更准确，但整体工程性偏弱。

如果你想要更多设计参考，或者你在做架构探索，GLM5.3 的思路有借鉴价值。它的状态机和配置对象设计能给你一些启发，但你要做好多轮调试的准备，而且它的过度设计在小项目里反而是负担。

7.2 用模型做3D游戏的几个实操技巧

第一个技巧是约束前置。在提示词里把技术栈、输出格式、代码风格这些约束写在前面，让模型在动笔前就知道边界。我实测下来，约束前置能让首轮可用度提升不少，尤其是对 Step 5 Preview 和 GLM5.3 效果明显。

第二个技巧是分步验证。不要等模型把整个游戏写完再跑，而是让它先写场景初始化，你验证能跑起来，再让它加角色控制，再验证，再加碰撞。这样每一步的问题都能及时发现，不会到最后问题纠缠在一起。

第三个技巧是给具体报错。模型调试时，你给的报错信息越具体，它改得越准。比如不要说"视角有问题"，而要说"鼠标移出窗口后视角失控，需要指针锁定"。具体的描述能让模型快速定位问题，减少调试轮次。

第四个技巧是关注游戏循环。游戏循环是3D游戏的核心，模型在这块容易出问题。你要重点检查它有没有处理deltaTime，有没有用状态驱动而不是事件驱动，有没有在循环里创建新对象。这三点检查完，基本能排除大部分性能问题。

7.3 一个容易被忽略的细节：CDN 版本锁定

三个模型在引入 Three.js 时，都用了 CDN 链接，但只有 Step 5 Preview 主动锁定了版本号，比如three@0.160.0。DeepSeek V4 Pro 和 GLM5.3 用的是three最新版链接，这意味着如果 Three.js 发布新版本，你的代码可能因为API变动而跑不起来。

这个细节很小，但在实际项目里很重要。版本锁定能保证你的代码在任何时候打开都能跑，不会因为外部依赖更新而失效。我后来让 DeepSeek V4 Pro 和 GLM5.3 都加上版本锁定，它们都改对了，但首轮没主动做，说明这个习惯不是所有模型都有。

提示：用模型生成前端代码时，一定要检查它有没有锁定依赖版本。这个习惯能帮你避免很多"昨天还能跑，今天就不行了"的问题。

7.4 关于 WorkBuddy 这类工具的使用感受

测试过程中我也试了用 WorkBuddy 来管理这几个模型的对话和代码版本。它的工作台模式挺适合这种多模型对比的场景，你可以把同一个需求分别发给不同模型，然后在工作台里对比输出。它的跨对话记忆功能在调试环节有用，你不用每次都重新描述上下文。

不过它的缓存目录默认在系统盘，如果你对话记录多，占用会比较高。我把它改到了D盘，具体是在设置里找到缓存路径选项，改成你想要的目录就行。这个改动对性能没影响，但能省系统盘空间。另外它的 skill 机制可以自定义一些常用指令，比如"检查代码版本锁定"这种，设一次后续都能用，挺省事的。

如果你要做类似的模型对比测试，我建议把每个模型的输出单独存一个文件，命名带上模型名和轮次，比如step5-round1.html、deepseek-round2.html。这样后期对比时不会搞混，也方便你回溯每个模型的改进过程。

7.5 最后的经验之谈

做了这么多年项目，我越来越觉得选模型和选人一样，不是看谁最聪明，而是看谁最靠谱。Step 5 Preview 在这次测试里不是每个环节都最强，但它的综合表现最稳，首轮可用度高，调试轮次少，代码质量好，边界情况处理到位。这些加在一起，就是"靠谱"。

DeepSeek V4 Pro 和 GLM5.3 各有亮点，但都需要你在某些环节多花精力。如果你时间紧、任务重，Step 5 Preview 是更安全的选择。如果你有精力做架构探索，GLM5.3 的设计思路值得一看。如果你只需要快速验证一个想法，DeepSeek V4 Pro 的直接风格也能用。

最后说一句，模型只是工具，真正决定项目成败的还是你对需求的理解和对代码的把控。模型能帮你写代码，但不能帮你做决策。把需求拆清楚，把验收标准定明确，把调试过程记录好，这些基本功比选哪个模型更重要。