家人们谁懂啊作为刚入门的前端小白一直想做个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 先写一个“精准到骨子里”的PromptPrompt是关键一开始我只写“帮我做一个3D小世界”大模型生成的代码要么功能不全要么不符合我的要求比如用了Vue、npm后来我把需求拆成「体验、技术架构、视觉、UI、代码组织」5个部分写了一个超详细的Prompt直接复制给豆包生成的代码一次就满足80%的需求完整Prompt可直接复制复用我想做一个网页上的“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 }所有写入走唯一入口比如 setCell2.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大语言模型就是一个“超级大脑”靠海量数据训练出来参数量超大能理解你的需求还能生成代码、写文章本质就是一个「概率映射函数」用公式表示就是yfθ(x)θ读作“西塔”是不是很有科技感x你输入的Prompt比如我写的3D编辑器需求y大模型输出的结果比如HTML、CSS、JS代码θ模型的所有参数权重参数量越大模型越聪明处理复杂任务越厉害补充个冷知识大模型的训练需要海量数据和算力比如微软花75亿美金收购GitHub就是为了获取海量代码数据Meta花148亿美金收购相关公司也是为了强化模型训练可见数据和算力对大模型有多重要3.2 4个主流模型亲测对比小白重点看性价比模型/工具优势劣势适合小白场景豆包免费、对中文需求理解好、生成代码可直接运行支持实时修改处理超复杂逻辑比如3D物理碰撞时代码可能有小bug入门级3D项目、简单前端需求适合首次尝试AI开发GPT3.5/4逻辑推理强、代码质量高复杂任务表现好需要科学上网、4.0收费对小白不友好有一定基础需要解决复杂代码问题时DeepSeek性价比高V4-Flash1580亿参数适合复杂代码生成适配华为芯片部分高级功能收费界面不如豆包简洁小白进阶需要生成高质量3D、复杂交互代码时Ollama本地部署隐私性好可安装开源模型需要电脑有独立显卡算力要求高部署麻烦有显卡、注重隐私想本地开发的小白我的选型结论小白首选「豆包」生成基础代码遇到复杂逻辑比如小地图渲染、存档持久化用「DeepSeek-V4-Flash」补充修改既免费又高效不用折腾部署也不用花钱买高级模型。四、开发踩坑小白必看的3个关键问题虽然有LLM帮写代码但小白开发还是会踩坑分享我遇到的3个核心问题帮大家少走弯路坑1Three.js版本选错代码报错一开始我没指定Three.js版本大模型生成的代码用了最新版本导致部分API不兼容打开网页直接报错THREE.Scene is not a constructor当时我都慌了以为是代码写错了。解决方案在Prompt里明确指定Three.js版本我用的r128并要求用CDN引入代码里直接写script srchttps://cdn.jsdelivr.net/npm/three0.128.0/build/three.min.js/script小贴士Three.js不同版本API差异较大小白尽量指定稳定版本避免兼容性问题。坑2存档功能失效关闭网页数据丢失大模型生成的代码里存档用了localStorage但没有做“数据格式化”导致切换存档时数据错乱关闭网页再打开之前搭的村庄全没了。解决方案让LLM修改JS代码给setCell方法加“数据持久化”逻辑每次修改格子内容都同步更新localStorage并且给3个存档分配不同的key比如// 持久化数据到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平行光模拟日光加上柔和阴影代码调整后// 日光效果光照 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小世界加“物理碰撞”比如房子不能放在水里该怎么修改PromptOllama本地部署小白需要准备哪些硬件有没有简化部署的方法除了Three.js还有哪些适合小白的3D开发工具能配合LLM快速落地项目最后附上我用豆包生成的完整代码HTMLCSSJS需要的小伙伴可以评论区扣“3D”我直接发你小白们别再害怕3D开发了借助AI我们也能做出好玩的技术项目❤️PS如果大家喜欢这篇笔记麻烦点赞收藏后续我会分享更多小白用AI做技术项目的实录一起进步
