前言

最近我一直在研究一个方向：物理大模型、具身智能、前端3D虚拟化。 当下绝大多数人对AIGC的理解还停留在：生成文案、生成图片、生成短视频。 但下一代大模型，早已不满足于表层内容生成。

AGI、工业4.0、虚拟仿真、3D物理模拟，才是未来几年的真正主战场。

https://aaf0920243bf.app.youngala.com 最好用电脑端（鼠标拖拽滚动）

今天我接下来将用自己写的一个极简桌面3D小世界编辑器作为案例 ，通俗讲明白：

• 普通人怎么用自然语言写出专业3D项目
• AIGC、LLM、AI Coding Agent 到底是什么关系
• 程序员当下必须掌握的 底层认知

---

一、实战案例：桌面式 3D 小世界编辑器

1. 项目定位

它不是开放世界游戏，而是摆在桌面上的迷你沙盘模型。

像小时候的积木、沙盘玩具，简单、治愈、直观。

2. 产品体验要求

我给AI写了一份非常完整的业务需求，我想要的体验非常直白：

我想要的体验

• 一打开网页就看到一个 8x8 左右的小世界，立刻能玩
• 鼠标点格子放东西（草地、土路、水、石头、树、房子、擦除，7 个工具）
• 拖拽转视角、滚轮缩放
• 鼠标悬停的格子要有视觉反馈
• 关闭网页，下次打开还在
• 能切换 3 个不同的存档世界
• 一个"重置"按钮给我一个程序化生成的随机小村庄（有水塘、石堆、几栋房子、几棵树、连通的小路）
• 一个"清空"按钮全变草地
• 首次打开有个简短操作提示（"拖拽旋转 / 滚轮缩放 / 点击放置"之类），几秒后自动淡出

3. 硬性技术约束（非常程序员思维）

为了保证轻量化、纯原生、零构建，我加了严格技术限制：

技术约束

• 单页面，零构建：直接双击 HTML 就能打开
• 文件不超过 3 个：一个 HTML、一个 CSS、一个 JS
• Three.js 用 CDN 引入（r128 版本），不要 ES module，不要 import map，不要 npm
• 不要 React / Vue / TypeScript / Webpack / Vite / OrbitControls
• 所有 3D 物体用 Three.js 内置几何体（Box、Cone、Cylinder、Icosahedron 等）拼，不要外部模型或贴图

4. 视觉与UI风格 和 代码组织

视觉方向

• "积木玩具"风：颜色饱和、对比明确
• 背景是奶油色或米色（CSS 处理，不是 Three.js 的天空），不要做天空、不要地平线- 光照要"日光"感而不是"演播室白炽灯"——草地不要被照成发白
• 阴影要柔，不要硬切

UI 风格

• 顶部一个标题面板 + 一个存档面板（下拉选 + 重置 + 清空按钮）
• 底部居中浮一个工具卡片栏，每个工具卡片有 emoji 图标 + 中文标签
• 右下一个小地图（canvas 2D），俯视显示当前世界，地形用色块、树和房子用剪影
• 全部面板用浅色磨砂玻璃风格（半透明 + 模糊背景），圆角

代码组织

• HTML 只放结构和引用
• CSS 写所有外观
• JS 包成 IIFE，逻辑分段（场景/光照/数据/工厂/交互/持久化/小地图/启动），用注释分隔
• 数据用 world[x][z] = { terrain, kind }，所有写入走唯一入口（比如 setCell）

---

这一整套完整、严谨、带约束的自然语言，就是高质量 Prompt。

而这个项目本身，就是最好理解AI如何生成工程代码的例子。

---

二、从案例切入：AIGC 到底进化了什么？

1. 第一代：普通 Chatbot（聊天机器人）

我们最开始使用的AI：

• 只能聊天、问答
• 生成代码片段，需要自己复制、自己新建文件、自己改bug
• 无文件感知、无项目感知

本质：只会说话，没有手脚。

2. 第二代：代码编辑器（VSCode）

程序员标配工具，纯手动编码。

早期AI只是插件，辅助补全、注释、翻译。

本质：工具是人，AI只是辅助。

3. 第三代：AI Coding Agent（Cursor / Claude Code）

现在的编辑器已经完全变了。

以 Cursor、Claude Code 为代表的新一代编辑器，不再是简单打字工具。

它是拥有思考、手、脚的智能体。

• 能读懂整个项目目录
• 自动创建文件、写入代码、修改代码
• 自动调试、补全逻辑、优化结构
• 遵循你写的约束、规范、业务逻辑

区别总结：

• Chatbot：生成代码片段 → 你手动搬运
• Agent：理解业务 → 自动生成完整可运行项目

---

三、底层原理：通俗透彻看懂 LLM 大模型

很多人天天用AI，却不知道大模型到底是什么，我来讲讲自己的理解。

1. 什么是 LLM？

LLM（Large Language Model）大语言模型

定义：

一种依托海量高质量数据训练、参数量庞大的深度神经网络模型（DNN）。

具备：强语义理解、逻辑推理、内容生成、自然语言编程能力。

2. 为什么大厂疯狂砸钱？（行业真相）

• 2018 年 微软 75 亿美金收购 GitHub：垄断全球代码训练数据
• Meta 重金入股 Scale AI：148 亿美金持股49% ，垄断高质量标注数据

AI 的本质：数据为燃料，模型为容器。

谁拥有数据，谁就拥有下一代AI话语权。

3. 参数量是什么？（B/T 含义）

• B（Billion） ：十亿，通俗叫「千亿大模型」
• T（Trillion） ：万亿，超大规模旗舰模型
• deepseek-v4-flush：175B（千亿级别）
• deep-V4-pro：1.6T（万亿级别）

4. 大模型万能公式（这是底层公式核心哟！！）

$$y=f_{\theta }(x)$$

• x：输入，也就是我们写的 Prompt（需求、文字、代码）
• f：预训练好的复杂神经网络函数
• θ（西塔） ：全部模型参数、权重，就是模型的脑子
• y：最终输出结果（文字、代码、图片、逻辑）

一句话总结：大模型就是一个超级复杂的数学函数。

你输入需求，它调动万亿权重计算，返回最优结果。

---

四、（写在最后）程序员新时代核心竞争力

1. 代码向后，业务靠前

现在绝大多数重复性代码，AI 都能写。

单纯敲代码没有竞争力。

真正值钱的：业务理解 + 需求拆解 + 约束定义。

2. 领域知识不可替代

我本次案例用到：前端3D、Three.js、沙盘逻辑、光照、网格、本地持久化。

AI 可以写代码，但不懂领域知识的人，无法给出精准约束。

3. 最佳工作流程（本人亲测）

• 单独窗口打开项目目录，不受其他内容的打扰，让ClaudeCode有边界感
• 写清楚需求、约束、视觉、交互
• 左边文档，右边交给 Claude Code / Cursor 自动生成 并将地址放进文件夹3dworld下
• 人只做：审核、优化、验收

左手trae 右手Claude Code!!!

---

五、总结

今天从一个简单的3D桌面小世界，我们理清了一条完整链路：

1. 精准自然语言Prompt = 高质量业务需求
2. AIGC 从聊天进化为 AI Coding Agent
3. LLM本质是海量数据训练的超大数学模型
4. 未来程序员：懂业务、懂领域、会用AI，淘汰纯搬砖编码

---

如果你喜欢这种通俗易懂、硬核干货的AI+前端3D文章，点赞+收藏，下期不见不散。(https://github.com/xz878787)