企业官网建设流程全解析

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

最近这段时间，AI编程助手这个赛道热闹得有点不像话。Step 5 Preview、DeepSeek V4 Pro、GLM5.3 这几个名字轮番出现在各种讨论里，群里、社区里、甚至我那个做客服主管的朋友都在问“到底哪个写代码更靠谱”。光看跑分和榜单其实没什么体感，因为那些测试集大多是算法题、函数补全、单元测试，跟真正“从零做一个能跑起来的东西”完全是两码事。

我平时的工作流里，WorkBuddy 这类工作台工具用得比较多，它本质上是一个把模型能力、文件操作、终端执行、多轮记忆串起来的开发环境。你给它一个目标，它能自己拆任务、写文件、跑命令、看报错、再改。所以这次我干脆做了个横向实测：同一个需求，分别让 Step 5 Preview、DeepSeek V4 Pro、GLM5.3 来做一个 3D 小游戏，看谁能在最少人工干预下把东西真正跑起来。

选 3D 游戏不是故意刁难，而是因为它天然是个“综合题”。它同时涉及数学（向量、矩阵、四元数）、图形学（渲染管线、光照、相机）、工程结构（场景管理、资源加载、主循环）、以及交互逻辑（输入、碰撞、状态机）。一个模型如果只会写孤立函数，做 3D 游戏会立刻露馅；如果它能把这个东西搭起来还能跑，说明它的长上下文理解、跨文件一致性、调试闭环能力都过关。

这篇文章适合几类人看：一是正在选型、想知道这几个模型在真实项目里表现差异的开发者；二是想用 WorkBuddy 这类工作台做实际项目、但不确定怎么组织提示词和规则的人；三是对 3D 游戏开发感兴趣、想看看 AI 能帮到哪一步的独立开发者。我会把整个实测过程、每个模型的表现、踩到的坑、以及我总结出来的可复现方法都写清楚，你照着做基本能复刻一遍。

2. 实测前的环境准备与任务定义

2.1 为什么用 WorkBuddy 作为统一测试台

要让三个模型公平对比，最大的变量其实是“执行环境”。如果我用三个不同的编辑器、不同的运行方式，那结果差异可能来自工具而不是模型。所以我把它们统一放进 WorkBuddy 里跑。

WorkBuddy 的核心价值在于它是一个“带手”的工作台：模型不只是输出代码文本，它还能直接创建文件、修改文件、在终端里执行命令、读取执行结果。这一点对 3D 游戏这种多文件项目特别关键，因为游戏不可能塞进一个文件里，它需要 index.html、若干 js 模块、可能的资源文件，还要能启动一个本地服务预览。

安装上没什么特别的，官网下载对应平台版本即可。Windows 用户注意一点，如果你还在 Win7 上，部分新版本可能不兼容，建议升级系统或者用 Linux 环境。Linux 下安装更顺，依赖少。装完之后第一件事是配置模型接入，把 Step 5 Preview、DeepSeek V4 Pro、GLM5.3 分别配成可切换的模型源。

这里有个实操细节：WorkBuddy 的系统缓存目录默认在用户目录下，如果你 C 盘紧张，可以改到 D 盘。改法是在设置里找到缓存路径选项，指向一个你新建的目录，比如D:\workbuddy-cache。改完重启一次让它生效。这个操作看起来小，但做 3D 项目时会产生不少临时文件和依赖缓存，早点改省得后面 C 盘爆红。

2.2 给 WorkBuddy 定几条全局规则

WorkBuddy 有个很好用的能力叫自定义指令，你可以给它定几条规则，后续对所有任务都生效。我这次实测前定了这么几条，直接决定了后面三个模型的表现差异：

• 规则一：所有代码必须能直接在浏览器打开运行，不依赖构建工具。这条是为了排除“模型写了一堆 webpack 配置但根本跑不起来”的情况。
• 规则二：优先使用原生 WebGL 或 Three.js CDN 版本，不引入需要 npm install 的重型依赖。3D 游戏用 Three.js 是最现实的路径，但版本和引入方式必须明确。
• 规则三：每完成一个可运行阶段，必须自己在终端启动本地服务并验证页面无报错。这条逼着模型形成“写完就验”的闭环。
• 规则四：遇到报错先读错误信息再改，不允许盲目重写整个文件。这条能看出模型的调试能力。

这四条规则看起来简单，但它们把任务从“写代码”变成了“交付一个能跑的东西”。很多模型在自由发挥时喜欢堆砌代码量，但一旦要求“必须能跑”，它的真实水平就藏不住了。

2.3 统一任务描述：一个最小可玩的 3D 游戏

为了公平，我给三个模型的提示词完全一致。任务定义如下：

用 HTML + JavaScript + Three.js（CDN 引入）做一个 3D 小游戏。场景里有一个地面平面、若干随机分布的立方体障碍物、一个玩家控制的球体。玩家用 WASD 控制球体在地面上移动，方向键或鼠标控制相机跟随。球体碰到障碍物时要有简单的碰撞反馈（比如变色或弹开）。页面右上角显示得分或计时。要求代码分文件组织，至少包含主入口、场景构建、玩家控制三个模块。完成后启动本地服务并确认无控制台报错。

这个任务的信息量刚好卡在一个临界点：它足够具体，不会让模型跑偏；又足够开放，能看出模型的组织能力。3D 游戏里“相机跟随”和“碰撞检测”是两个经典难点，前者考验数学理解，后者考验工程判断。

3. 三个模型的实际表现拆解

3.1 Step 5 Preview：结构最稳，但细节需要盯

Step 5 Preview 给我的第一印象是“工程感强”。它接到任务后没有急着写代码，而是先列了一个文件结构：

index.html src/main.js src/scene.js src/player.js src/collision.js

这个拆分比我要求的还细，把碰撞单独拎出来了。然后它逐个文件生成，每个文件职责清晰，模块之间用 import 连接。这一点很关键，因为 3D 游戏最容易出的问题就是“所有逻辑堆在一个文件里，改一处崩三处”。

在场景构建上，它用了 Three.js 的Scene、PerspectiveCamera、WebGLRenderer标准三件套，地面用PlaneGeometry加MeshStandardMaterial，障碍物用BoxGeometry循环生成并随机设置位置。光照用了AmbientLight加DirectionalLight的组合，这个选择很务实，环境光保证整体可见，平行光提供方向感阴影。

玩家控制部分，它用了一个velocity向量配合deltaTime做帧率无关的移动。这个细节值得说：很多新手写移动就是position.x += speed，帧率一高角色就飞了。Step 5 Preview 主动用了clock.getDelta()，说明它对游戏循环有基本认知。

但问题也来了。它生成的碰撞检测是简单的包围盒判断，球体被当成一个点处理，导致视觉上球还没碰到方块就已经触发反馈。我让它修，它第一次改成了球体半径补偿，但还是没考虑方块的中心偏移。第二次我直接把错误现象描述清楚——“球体边缘和方块表面接触时才应该触发”——它才改对。这说明它的调试需要比较明确的反馈，不能指望它自己发现视觉层面的偏差。

相机跟随它做的是最简单的camera.position.copy(player.position)加固定偏移，没有平滑插值。能跑，但体验生硬。我后来自己加了个 lerp 才顺眼。

3.2 DeepSeek V4 Pro：代码密度高，但容易过度设计

DeepSeek V4 Pro 的风格完全不同。它一上来就写了一个相当完整的单文件版本，然后才拆模块。代码密度明显更高，一个scene.js里塞了场景、光照、雾效、阴影配置。阴影这块它主动开了renderer.shadowMap.enabled，还给平行光配了 shadow camera 的范围，这个细节说明它对渲染管线有理解。

但它的“过度设计”倾向也很明显。它给障碍物加了一套基于InstancedMesh的批量渲染方案，理由是“障碍物数量多时性能更好”。问题是我们的任务里障碍物就十几个，用 InstancedMesh 反而增加了代码复杂度，而且它第一次写的时候实例矩阵更新逻辑有 bug，所有方块叠在一起。我让它简化，它才退回普通 Mesh 循环。

玩家控制它用了四元数做相机旋转，支持鼠标拖拽转视角。这个功能本身不错，但它没处理鼠标事件的边界情况，鼠标移出窗口后视角会卡住。我提了一句，它加了个mouseleave重置。这个反应速度是可以的。

碰撞它用的是Box3.intersectsSphere，比 Step 5 Preview 的初版更准确，因为 Three.js 内置的Box3能直接和球体做相交测试。这一点它选对了工具。但它没做碰撞后的物理反馈，只是把球体位置回退，导致撞墙时会有轻微抖动。我后来自己补了一个速度反向。

DeepSeek V4 Pro 的整体感觉是“聪明但话多”，它倾向于把能想到的都写上，你需要帮它做减法。对于有经验的开发者，这其实是好事，因为你可以从它的方案里挑；对于新手，可能会被它带进过度复杂的坑里。

3.3 GLM5.3：平衡性最好，但启动阶段偏慢

GLM5.3 的表现介于两者之间。它的文件拆分和 Step 5 Preview 类似，但模块粒度更粗一点，把碰撞并进了 player 模块。代码风格比较克制，没有 DeepSeek 那种炫技感。

它的一个亮点是主动加了一个简单的游戏状态管理，用了一个state对象存score、isRunning、startTime。这个设计让后面的计分和计时扩展变得很容易。我让它加一个“碰到障碍物扣分”的逻辑，它只改了三行就完成了，因为状态是集中的。

相机跟随它用了lerp平滑，这一点比 Step 5 Preview 的初版好。但它 lerp 的系数写死了 0.1，没有暴露成参数，我想调快一点还得进代码改。这是个小遗憾。

碰撞检测它用的是距离判断，自己算球心和方块中心的距离，再和半径之和比较。这个方法对轴对齐方块是准确的，但如果方块旋转了就会出错。我们的任务里方块没旋转，所以能跑。但如果任务再复杂一点，这个方案就有隐患。

GLM5.3 最明显的问题是启动阶段。它在生成第一个文件之前“思考”的时间明显比另外两个长，终端里能看到它在反复读任务描述。我猜测它在做更完整的规划，但代价是响应慢。对于赶时间的场景，这个等待会有点磨人。

3.4 三模型横向对比表

这张表不是绝对结论，因为模型版本会更新，而且表现和提示词质量强相关。但它能给你一个选型的起点。

4. 用 WorkBuddy 跑通 3D 游戏的关键操作

4.1 从提示词到可运行页面的完整流程

不管你用哪个模型，在 WorkBuddy 里跑这类项目的流程是相似的。我把完整步骤拆一下，你可以直接照着做。

第一步，新建一个工作目录，比如D:\projects\3d-game-test。在 WorkBuddy 里把这个目录设为工作区。这一步很重要，因为模型的所有文件操作都会限制在这个目录内，避免它乱写到你系统其他地方。

第二步，在对话里把任务描述贴进去，同时确认你的全局规则已经生效。你可以在对话开头加一句“请遵守已设定的全局规则”，它会去读自定义指令。

第三步，等模型生成文件。这时候不要急着打断，让它把结构搭完。如果它中途问你问题，比如“用哪个 Three.js 版本”，你就明确回答，比如“用 r160 的 CDN 版本”。模糊回答会导致它选一个你不想要的版本。

第四步，让它启动本地服务。WorkBuddy 一般会用python -m http.server或者npx serve。如果它没主动启动，你就说“请启动本地服务并告诉我访问地址”。

第五步，打开浏览器访问，按 F12 看控制台。如果有报错，把报错原文复制回对话里，让它修。这里有个技巧：不要只说“报错了”，要把完整的错误堆栈贴给它，包括文件名和行号。模型对具体错误信息的处理能力远强于模糊描述。

第六步，功能验证。移动、碰撞、计分逐个试。发现问题就描述现象，比如“球体穿过方块没有反应”，而不是“碰撞有问题”。现象描述越具体，它改得越准。

4.2 本地服务启动与端口排查

3D 游戏必须通过 HTTP 访问，直接双击 HTML 文件会因为跨域限制导致 Three.js 的模块加载失败。这是新手最常踩的坑。

WorkBuddy 启动服务后一般会监听 8000 或 3000 端口。如果访问不了，先检查端口是否被占用。Windows 下可以用netstat -ano | findstr :8000看占用情况，Linux 下用lsof -i :8000。如果被占用，让 WorkBuddy 换一个端口，比如 8080。

还有一个常见问题是服务启动了但页面白屏。这时候先看控制台，大概率是 Three.js CDN 加载失败。解决办法是换一个稳定的 CDN 地址，或者让模型把 Three.js 下载到本地再引用。后者更稳，但会增加文件体积。

提示：如果你在公司网络环境下，某些 CDN 可能访问不稳定。让模型把依赖本地化是更保险的做法，虽然多几步操作，但能避免调试时被网络问题干扰。

4.3 让模型自己验证的闭环技巧

WorkBuddy 最值钱的能力是它能执行命令并读结果。你要充分利用这一点，逼模型形成闭环。

具体做法是：每次它改完代码，你都加一句“请重新启动服务并检查控制台是否有报错”。它就会去跑命令、读输出。如果它说“没有报错”，你再自己打开页面确认。如果它说“有报错”，它通常会接着修。

这个闭环能大幅减少你的手动验证次数。我实测下来，Step 5 Preview 和 DeepSeek V4 Pro 对这个指令的执行比较到位，GLM5.3 偶尔会跳过验证直接说“已完成”，需要你再催一次。

另外，WorkBuddy 有跨对话记忆的能力，你可以把这次项目的关键决策记下来，比如“Three.js 用 r160”“碰撞用 Box3”，后续新对话里它还能记得。这个功能对长期项目很有用，不用每次重复背景。

5. 实操中踩到的坑与排查记录

5.1 碰撞检测为什么总是“差一点”

这是三个模型都出过问题的地方，值得单独说。3D 游戏里碰撞检测的难点不在于“能不能检测”，而在于“检测的时机和精度”。

球体碰方块，理想情况是球面接触方块表面的瞬间触发。但模型初版往往用球心到方块中心的距离判断，这就忽略了球体半径和方块半边长。正确的做法是：把球心到方块最近点的距离和球半径比较。Three.js 的Box3.clampPoint能帮你找到方块上离球心最近的点，然后算这个点到球心的距离。

我实测时，Step 5 Preview 第一次改只加了球半径，没考虑方块尺寸；第二次才用上clampPoint。DeepSeek V4 Pro 直接用Box3.intersectsSphere，一步到位。GLM5.3 的距离判断在轴对齐情况下能用，但不够通用。

注意：如果你的方块会旋转，距离判断和简单包围盒都会失效，必须用OBB（有向包围盒）或者物理引擎。对于简单项目，保持方块不旋转是最省事的做法。

5.2 相机跟随的抖动与穿模

相机跟随看着简单，做起来坑不少。最常见的问题是抖动，原因是相机位置直接复制玩家位置，而玩家位置每帧都在变，导致相机也跟着每帧跳。

解决办法是插值。用camera.position.lerp(targetPosition, 0.1)让相机平滑追过去。系数越小越平滑但越滞后，0.1 到 0.2 之间比较合适。GLM5.3 主动做了这个，Step 5 Preview 和 DeepSeek V4 Pro 需要我提醒。

另一个问题是穿模，相机跟得太近时会穿进障碍物里。简单做法是给相机加一个最小高度和距离限制，复杂做法是做射线检测。对于小游戏，限制距离就够了。

5.3 帧率无关移动的计算方法

这个点很多新手会忽略。如果你写player.position.x += speed，在 60Hz 屏幕上每秒移动 60 次，在 144Hz 屏幕上每秒移动 144 次，角色速度完全不一样。

正确做法是用deltaTime：

const delta = clock.getDelta(); player.position.x += speed * delta;

这样speed的单位就是“单位每秒”，和帧率无关。Step 5 Preview 主动用了这个，另外两个需要我提。这个细节能看出模型对游戏循环的理解深度。

5.4 常见问题速查表

这张表是我这次实测里实际遇到的问题汇总，你遇到类似现象可以直接对照。

6. 关于 WorkBuddy 使用的一些经验补充

6.1 自定义指令怎么定才有效

前面提到的那四条规则，是我试了几版之后定下来的。定规则有几个原则：

第一，规则要可验证。比如“代码必须能跑”比“代码质量要高”有用得多，因为前者能通过启动服务来验证，后者模型不知道怎么执行。

第二，规则要少而精。定太多规则模型会顾此失彼，五条以内比较合适。我见过有人定了二十条，结果模型每条都执行一半。

第三，规则要针对你的痛点。如果你经常遇到模型乱改文件，就定“修改前先说明改哪个文件”；如果你经常遇到依赖装不上，就定“优先用 CDN 或标准库”。

WorkBuddy 的规则是跨对话生效的，所以定一次就行。但如果你换了项目类型，比如从 3D 游戏换到写文献综述，可能需要调整规则。这时候可以建不同的工作区，每个工作区配不同的规则。

6.2 缓存目录和性能的关系

前面提过把缓存目录改到 D 盘。这里补充一下为什么。WorkBuddy 在运行时会缓存模型响应、临时文件、依赖包等。3D 游戏项目里，Three.js 这类库的文件不小，缓存会快速增长。如果 C 盘是系统盘且空间紧张，缓存满了会导致 WorkBuddy 卡顿甚至报错。

改缓存目录的路径在设置里，不同版本位置可能略有差异，一般在“高级设置”或“存储”分类下。改完记得重启。如果你用的是 Linux，缓存默认在~/.cache下，一般不用改，除非你的 home 分区很小。

6.3 多模型切换的实用场景

WorkBuddy 支持配置多个模型源并切换，这个能力在实测里很有用。我的用法是：

• 搭结构阶段用 Step 5 Preview，它的文件组织最清晰。
• 写复杂逻辑用 DeepSeek V4 Pro，它的代码密度高，能一次给全。
• 调平衡和收尾用 GLM5.3，它比较克制，不会乱加东西。

当然这只是我这次项目的用法，你可以根据自己的习惯调整。关键是把模型当成不同风格的同事，而不是一个万能工具。

6.4 关于私有化部署的考虑

如果你对数据敏感，WorkBuddy 支持私有化部署。这意味着模型推理可以在你自己的服务器上跑，代码和数据不出内网。部署方式一般是 Docker，官方会提供镜像。这里要注意的是，私有化部署对硬件有要求，尤其是跑大模型需要足够的显存。如果你只是个人开发，用云端模型源就够了；如果是团队协作且有合规要求，再考虑私有化。

Docker 安装 WorkBuddy 的流程大致是拉镜像、配环境变量、映射端口和数据卷。具体命令官方文档有，我不在这里展开，因为版本更新快，以官方为准。

7. 我个人的一些体会

这次实测做下来，最大的感受是：模型之间的差距，在简单任务上不明显，在 3D 游戏这种综合任务上才拉开。Step 5 Preview 的结构感、DeepSeek V4 Pro 的代码密度、GLM5.3 的平衡性，各有各的适用场景。没有哪个绝对最好，关键看你要什么。

另一个体会是，WorkBuddy 这类工作台的价值不在于模型本身，而在于它把“生成-执行-验证”串成了闭环。同样一个模型，在纯聊天窗口里和在能执行命令的工作台里，产出质量完全不一样。因为后者逼着模型面对真实报错，而不是自说自话。

最后分享一个小技巧：如果你要做类似的多模型对比，一定要把提示词和规则固定下来，只换模型。否则你分不清差异是来自模型还是来自你的描述。我这次就是先把任务描述和四条规则写死，然后逐个切换模型跑，这样对比才有意义。

这个项目后续还可以扩展，比如加入敌人 AI、道具系统、关卡切换。每加一个系统，都是对模型工程能力的新考验。我打算下次试试让它们做联机对战，那个复杂度会再上一个台阶。