用LLM从零搭3D小世界编辑器｜小白也能搞定的AI Native开发实录
家人们谁懂啊😭！作为刚入门的前端小白，一直想做个3D小项目练手，但Three.js的配置、交互逻辑想想就头大，直到我用「AI Native思维」，靠大模型帮我落地了一个可直接玩的3D小世界编辑器——不用npm、不用构建工具，双击HTML就能打开，还能自己搭迷你村庄！ 帅哥美女们帮我的掘金点点赞呗😘👍 完整文章地址👉：https://juejin.cn/post/7641508513420263450
今天就把我的完整开发笔记+踩坑思考分享给大家，全程小白视角，从需求拆解到LLM选型，再到代码落地，每一步都真实可复刻，看完你也能靠AI搞定3D小项目👇
一、先晒成果：我做的3D小世界长这样
先放个成品预览，满足大家的好奇心（毕竟小白做3D，能跑起来就很不容易了😂）：
- 8x8的迷你世界，打开就能玩，不用等加载
- 鼠标点一点就能放草地、树、房子，还能擦除，共7个工具
- 拖拽转视角、滚轮缩放，悬停格子有视觉反馈，操作超丝滑
- 支持3个存档，关闭网页再打开，之前搭的村庄还在
- 一键生成程序化村庄（有水塘、石堆、房子、小路），懒人福音
- 磨砂玻璃UI+积木风视觉，颜值在线，拍照发圈绝了
二、核心思路：AI Native思维，让LLM当我的“专属开发助手”
一开始我也犯了小白的通病：想做的功能很多，但不知道从哪下手，Three.js的API记不住，交互逻辑理不清。后来才明白，与其自己死磕，不如用AI Native思维——把需求拆清楚，让大模型帮我写代码、避坑，我只负责提需求、做校验。
2.1 先写一个“精准到骨子里”的Prompt
Prompt是关键！一开始我只写“帮我做一个3D小世界”，大模型生成的代码要么功能不全，要么不符合我的要求（比如用了Vue、npm），后来我把需求拆成「体验、技术架构、视觉、UI、代码组织」5个部分，写了一个超详细的Prompt，直接复制给豆包，生成的代码一次就满足80%的需求！
完整Prompt（可直接复制复用）：
▼text复制代码我想做一个网页上的“3D小世界编辑器”，定位是“摆在桌子上的小模型”那种感觉，不是开放世界游戏 ## 我想要的体验 - 一打开网页能看到一个 8x8 左右的世界，立刻能玩 - 鼠标点格子放东西（草地、土路、水、石头、树、房子、擦除，七个工具） - 拖拽转视角、滚轮缩放 - 鼠标悬停的格子有视觉反馈 - 关闭网页，下次打开还在 - 能切换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 等）拼，不要外部模型或贴图 ## 视觉方向 - "积木玩具"风：颜色饱和、对比明确 - 背景是奶油色或米色（CSS 处理，不是 Three.js 的天空），不要做天空、不要地平线 - 光照要"日光"感而不是"演播室白炽灯"——草地不要被照成发白 - 阴影要柔，不要硬切 ## UI 风格 - 顶部一个标题面板 + 一个存档面板（下拉选 + 重置 + 清空按钮） - 底部居中浮一个工具卡片栏，每个工具卡片有 emoji 图标 + 中文标签 - 右下一个小地图（canvas 2D），俯视显示当前世界，地形用色块、树和房子用剪影 - 全部面板用浅色磨砂玻璃风格（半透明 + 模糊背景），圆角 ## 代码组织 - HTML 只放结构和引用 - CSS 写所有外观 - JS 包成 IIFE，逻辑分段（场景/光照/数据/工厂/交互/持久化/小地图/启动），用注释分隔 - 数据用 `world[x][z] = { terrain, kind }`，所有写入走唯一入口（比如 setCell）
2.2 Prompt意图拆解：小白也能学会的“需求翻译术”
可能有小伙伴会问：为什么要写这么详细？其实这就是AI Native思维的核心——把“我想要什么”翻译成“大模型能理解、能落地的需求”，拆解下来就是3点：
- 体验层面：明确“用户能做什么”，比如点击放置、拖拽视角、存档，这些是核心交互，不能含糊
- 技术层面：划清“不能用什么”“必须用什么”，比如禁用Vue、npm，指定Three.js版本，避免大模型生成无用代码，减少后续修改成本（小白真的耗不起啊😭）
- 视觉和UI层面：明确风格，比如积木风、磨砂玻璃，避免大模型生成的界面“土气”，减少视觉修改的麻烦
这里插一句：很多小白用AI写代码失败，不是AI不行，是Prompt写得太笼统！记住：越具体，AI生成的代码越贴合需求，后续修改越少。
三、LLM选型：小白该选哪个模型？亲测对比
写好Prompt后，我试了豆包、GPT、DeepSeek、Ollama，最终选了「豆包+DeepSeek-V4-Flash」组合，给大家分享我的真实体验（小白避坑指南）：
3.1 先搞懂：LLM到底是什么？（小白通俗版）
之前我也对“大模型”一头雾水，后来查了资料才明白：LLM（大语言模型）就是一个“超级大脑”，靠海量数据训练出来，参数量超大，能理解你的需求，还能生成代码、写文章，本质就是一个「概率映射函数」，用公式表示就是：
y=fθ(x) （θ读作“西塔”，是不是很有科技感😂）
- x：你输入的Prompt（比如我写的3D编辑器需求）
- y：大模型输出的结果（比如HTML、CSS、JS代码）
- θ：模型的所有参数（权重），参数量越大，模型越聪明，处理复杂任务越厉害
补充个冷知识：大模型的训练需要海量数据和算力，比如微软花75亿美金收购GitHub，就是为了获取海量代码数据；Meta花148亿美金收购相关公司，也是为了强化模型训练，可见数据和算力对大模型有多重要！
3.2 4个主流模型亲测对比（小白重点看性价比）
| 模型/工具 | 优势 | 劣势 | 适合小白场景 |
|---|---|---|---|
| 豆包 | 免费、对中文需求理解好、生成代码可直接运行，支持实时修改 | 处理超复杂逻辑（比如3D物理碰撞）时，代码可能有小bug | 入门级3D项目、简单前端需求，适合首次尝试AI开发 |
| GPT（3.5/4） | 逻辑推理强、代码质量高，复杂任务表现好 | 需要科学上网、4.0收费，对小白不友好 | 有一定基础，需要解决复杂代码问题时 |
| DeepSeek | 性价比高，V4-Flash（1580亿参数）适合复杂代码生成，适配华为芯片 | 部分高级功能收费，界面不如豆包简洁 | 小白进阶，需要生成高质量3D、复杂交互代码时 |
| Ollama | 本地部署，隐私性好，可安装开源模型 | 需要电脑有独立显卡（算力要求高），部署麻烦 | 有显卡、注重隐私，想本地开发的小白 |
我的选型结论
小白首选「豆包」生成基础代码，遇到复杂逻辑（比如小地图渲染、存档持久化），用「DeepSeek-V4-Flash」补充修改，既免费又高效，不用折腾部署，也不用花钱买高级模型。
四、开发踩坑：小白必看的3个关键问题
虽然有LLM帮写代码，但小白开发还是会踩坑，分享我遇到的3个核心问题，帮大家少走弯路：
坑1：Three.js版本选错，代码报错
一开始我没指定Three.js版本，大模型生成的代码用了最新版本，导致部分API不兼容，打开网页直接报错：THREE.Scene is not a constructor，当时我都慌了，以为是代码写错了。
解决方案：在Prompt里明确指定Three.js版本（我用的r128），并要求用CDN引入，代码里直接写：
▼text复制代码<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
小贴士：Three.js不同版本API差异较大，小白尽量指定稳定版本，避免兼容性问题。
坑2：存档功能失效，关闭网页数据丢失
大模型生成的代码里，存档用了localStorage，但没有做“数据格式化”，导致切换存档时数据错乱，关闭网页再打开，之前搭的村庄全没了😭。
解决方案：让LLM修改JS代码，给setCell方法加“数据持久化”逻辑，每次修改格子内容，都同步更新localStorage，并且给3个存档分配不同的key，比如：
▼text复制代码// 持久化数据到localStorage function saveWorld() { localStorage.setItem(`3d-world-${currentSave}`, JSON.stringify(world)); } // 读取存档 function loadWorld() { const saved = localStorage.getItem(`3d-world-${currentSave}`); if (saved) world = JSON.parse(saved); }
坑3：视觉效果拉胯，草地发白、阴影过硬
一开始生成的代码，光照用了默认的AmbientLight，导致草地发白，没有“日光感”，阴影是硬切的，完全不符合“积木玩具”的风格。
解决方案：让LLM修改光照逻辑，用DirectionalLight（平行光）模拟日光，加上柔和阴影，代码调整后：
▼text复制代码// 日光效果光照 const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2); directionalLight.position.set(10, 20, 10); directionalLight.castShadow = true; // 柔和阴影 directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; directionalLight.shadow.radius = 4; scene.add(directionalLight);
修改后，草地颜色饱和，阴影柔和，瞬间有了“摆在桌子上的小模型”的感觉！
五、总结与延伸：小白如何用AI做好技术开发？
这次用LLM搭3D小世界编辑器，让我深刻体会到：AI Native思维不是“让AI替你干活”，而是“让AI当你的助手”，小白也能借助AI实现自己的技术想法，核心就3点：
- 精准提需求：把需求拆细、写具体，让LLM知道“要做什么、不能做什么”，减少无效输出
- 选对工具：小白优先选免费、易上手的模型（比如豆包），复杂任务搭配高性价比模型（比如DeepSeek-V4-Flash）
- 主动校验和修改：LLM生成的代码不是完美的，要自己运行测试，遇到报错不要慌，让LLM帮你排查修改，同时自己也能学到知识
延伸思考（欢迎评论区讨论）
- 如果想给这个3D小世界加“物理碰撞”（比如房子不能放在水里），该怎么修改Prompt？
- Ollama本地部署，小白需要准备哪些硬件？有没有简化部署的方法？
- 除了Three.js，还有哪些适合小白的3D开发工具，能配合LLM快速落地项目？
最后，附上我用豆包生成的完整代码（HTML+CSS+JS），需要的小伙伴可以评论区扣“3D”，我直接发你！小白们，别再害怕3D开发了，借助AI，我们也能做出好玩的技术项目❤️
PS：如果大家喜欢这篇笔记，麻烦点赞收藏，后续我会分享更多小白用AI做技术项目的实录，一起进步～
