Vibe Coding 实战：用 AI 打造浏览器 3D 小世界编辑器
摘要
作为 AI 编程初学者，我用 Vibe Coding 范式，通过精准 Prompt 驱动 AI，零代码搭建浏览器端 3D 小世界编辑器。本文从需求拆解、Prompt 设计、核心代码到运行效果，完整分享 AI 辅助 3D 开发实战，附关键代码与截图，普通人也能快速上手 3D 项目。
标签
#Vibe Coding #Three.js #3D开发 #AI编程 #实战项目
目录
- 前言：从创意到 3D 世界，AI 让想法落地
- 需求拆解：明确浏览器 3D 小世界核心诉求
- Prompt 工程：精准指令，驱动 AI 高效开发
- 技术选型：极简架构，适配浏览器 3D 开发
- 核心代码展示：AI 生成关键逻辑，极简易懂
- 运行效果演示：沉浸式沙盘，一键搭建迷你村庄
- AI 赋能开发：从 Prompt 到成品，全程高效闭环
- 实战感悟：Vibe Coding 下，3D 开发不再有门槛
- 总结：拥抱 AI，开启低成本 3D 创作时代
1. 前言：从创意到 3D 世界，AI 让想法落地
大家好，我是一名深耕 Vibe Coding 的 AI 编程初学者。一直想做一个简单有趣的 3D 小项目，不用复杂的游戏引擎，不用写大量底层代码，能直接在浏览器打开、随手搭建迷你村庄。
接触 AI 辅助开发后，我发现Vibe Coding不仅能做 Web 应用，还能高效搞定 3D 开发！借助大模型，我只需要清晰描述需求，就能快速生成可运行的 3D 小世界编辑器。今天就结合实战过程，附核心代码与运行截图，和大家分享如何用 AI 打造浏览器端 3D 小世界，见证创意到成品的全过程。
2. 需求拆解：明确浏览器 3D 小世界核心诉求
做项目的第一步，永远是拆解需求，而不是直接写代码。我想要的 3D 小世界，定位是 “摆在桌子上的迷你沙盘”，核心是简单、好玩、易上手，不用专业 3D 知识也能操作。
核心需求可以归纳为这几点：
- 基础沙盘：8×8 网格的 3D 地块，初始是空白草地，鼠标拖拽可旋转、滚轮缩放视角；
- 地块搭建：支持放置草地、土壤、水、石地、树、房子 6 种元素，还有擦除工具，点击地块即可放置；
- 数据持久：支持 3 个存档世界切换，关闭网页后下次打开，世界状态自动保存；
- 快捷操作：一键清空、一键程序化生成小村庄（有水塘、小路、房子）；
- 新手引导：首次打开自动弹出简短提示，几秒后自动消失；
- 极简体验：单页面、双击 HTML 就能运行，不用复杂构建工具。
这些需求看似多，但用 Vibe Coding 思路，把它们梳理清楚，就能变成 AI 能理解的指令。
3. Prompt 工程：精准指令，驱动 AI 高效开发
Vibe Coding 的核心是精准 Prompt，模糊的描述只会让 AI 产出杂乱无章，只有把需求、技术、视觉、UI 都写清楚，才能一次性拿到接近预期的成果。
我这次用的核心 Prompt，完全遵循 “Goal+Input+Output+Layout+Feature” 的公式，清晰且具体：
plaintext
我想做一个网页上的“3D小世界编辑器”，定位是“摆在桌子上的小模型”，不是开放世界游戏。
核心体验：
1. 8x8初始沙盘，拖拽旋转、滚轮缩放、悬停高亮，首次打开自动淡出操作提示；
2. 点击地块可放草地、土壤、水、石地、树、房子、擦除7种工具；
3. 3个存档切换、一键清空、一键程序化生成小村庄；
4. 本地存储，关闭网页数据不丢失。
技术要求：
1. 单页面零构建，仅HTML、CSS、JS三个文件，双击直接打开；
2. Three.js用CDN r128引入，不用npm、ES module、构建工具；
3. 只用Three.js内置几何体拼模型，无外部贴图；
4. 不用React/Vue/TS，代码用IIFE组织。
视觉UI：
1. 积木玩具风，饱和配色，奶油色背景，柔和日光、柔阴影；
2. 顶部存档/重置/清空面板，底部emoji工具栏，右下2D小地图；
3. 磨砂玻璃面板、圆角设计。
这份 Prompt 把目标、功能、技术、视觉全讲透了，AI 能精准 get 到我的需求，直接生成完整可运行代码，不用反复修改基础逻辑。
4. 技术选型：极简架构，适配浏览器 3D 开发
对于初学者来说，复杂技术栈会直接劝退项目，所以我要求 AI 采用极简架构，全程零门槛：
- 3D 引擎：选 Three.js，浏览器端最成熟的 3D 库，用 CDN 直接引入，不用本地安装；
- 开发模式：零构建、零依赖，仅 HTML、CSS、JS 三个文件，双击 HTML 就能在浏览器打开；
- 模型设计：不用外部 3D 模型，只用 Three.js 内置几何体（立方体、圆锥、圆柱）拼接，树、房子、石头都能简单实现；
- 数据存储：用浏览器本地存储（LocalStorage），实现存档和数据持久化，简单又实用。
这种技术选型，完全避开了前端框架、打包工具、复杂环境配置，哪怕不懂 Three.js 底层，也能通过 AI 快速落地项目，完美契合 Vibe Coding“重需求、轻技术” 的核心。
5. 核心代码展示：AI 生成关键逻辑，极简易懂
AI 生成的代码分为 HTML、CSS、JS 三部分，下面贴出核心精简代码（场景初始化、地块放置、本地存储），完整代码复制到本地即可运行：
5.1 HTML 结构（世界.html）
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>3D迷你小世界</title>
<!-- 引入Three.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 顶部面板：存档、重置、清空 -->
<div class="top-panel">
<select id="worldSelect">
<option value="0">世界1</option>
<option value="1">世界2</option>
<option value="2">世界3</option>
</select>
<button id="resetBtn">重置村庄</button>
<button id="clearBtn">清空世界</button>
</div>
<!-- 3D沙盘容器 -->
<div id="worldContainer"></div>
<!-- 底部工具栏 -->
<div class="tool-bar">
<div class="tool active" data-type="grass">🌱 草地</div>
<div class="tool" data-type="soil">🟤 土壤</div>
<div class="tool" data-type="water">💧 水</div>
<div class="tool" data-type="stone">🪨 石地</div>
<div class="tool" data-type="tree">🌳 树</div>
<div class="tool" data-type="house">🏠 房子</div>
<div class="tool" data-type="erase">🧹 擦除</div>
</div>
<!-- 小地图 -->
<canvas id="miniMap"></canvas>
<!-- 操作提示 -->
<div class="tip">拖拽旋转 · 滚轮缩放 · 点击放置</div>
<script src="app.js"></script>
</body>
</html>
5.2 JS 核心逻辑（app.js，IIFE 自执行）
javascript
运行
(function() {
// 1. 基础配置
const GRID_SIZE = 8;
const CELL_SIZE = 1;
let scene, camera, renderer, world = [];
let currentTool = "grass";
let currentWorld = 0;
// 2. 初始化Three.js场景
function initScene() {
// 场景、相机、渲染器
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xf5f5dc); // 奶油色背景
renderer.shadowMap.enabled = true;
document.getElementById("worldContainer").appendChild(renderer.domElement);
// 光照（柔和日光）
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(5, 10, 7.5);
dirLight.castShadow = true;
scene.add(dirLight);
camera.position.set(4, 8, 10);
camera.lookAt(GRID_SIZE/2, 0, GRID_SIZE/2);
}
// 3. 初始化8×8沙盘
function initWorld() {
world = Array(GRID_SIZE).fill().map(() => Array(GRID_SIZE).fill({ terrain: "grass" }));
// 加载本地存档
loadWorld();
// 生成地块
renderWorld();
}
// 4. 渲染地块（草地/水/树/房子）
function renderWorld() {
// 清空旧地块
scene.children.forEach(child => {
if (child.userData.isCell) scene.remove(child);
});
// 遍历网格生成地块
for (let x = 0; x < GRID_SIZE; x++) {
for (let z = 0; z < GRID_SIZE; z++) {
const cell = world[x][z];
let geometry = new THREE.BoxGeometry(CELL_SIZE, 0.2, CELL_SIZE);
let material;
// 不同地形材质
switch(cell.terrain) {
case "grass": material = new THREE.MeshLambertMaterial({ color: 0x4CAF50 }); break;
case "soil": material = new THREE.MeshLambertMaterial({ color: 0x8B4513 }); break;
case "water":
geometry = new THREE.BoxGeometry(CELL_SIZE, 0.1, CELL_SIZE);
material = new THREE.MeshLambertMaterial({ color: 0x2196F3, transparent: true, opacity: 0.7 });
break;
case "stone": material = new THREE.MeshLambertMaterial({ color: 0x9E9E9E }); break;
}
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(x, cell.terrain === "water" ? -0.05 : 0, z);
mesh.userData.isCell = true;
mesh.userData.x = x;
mesh.userData.z = z;
scene.add(mesh);
// 生成树/房子（几何体拼接）
if (cell.terrain === "tree") createTree(x, z);
if (cell.terrain === "house") createHouse(x, z);
}
}
}
// 5. 本地存储：保存/加载世界
function saveWorld() {
const saveData = JSON.stringify(world);
localStorage.setItem(`world_${currentWorld}`, saveData);
}
function loadWorld() {
const saveData = localStorage.getItem(`world_${currentWorld}`);
if (saveData) world = JSON.parse(saveData);
}
// 6. 绑定工具栏、按钮事件
function bindEvents() {
// 工具切换
document.querySelectorAll(".tool").forEach(tool => {
tool.addEventListener("click", () => {
document.querySelector(".tool.active").classList.remove("active");
tool.classList.add("active");
currentTool = tool.dataset.type;
});
});
// 重置村庄、清空世界、存档切换
document.getElementById("resetBtn").addEventListener("click", resetVillage);
document.getElementById("clearBtn").addEventListener("click", clearWorld);
document.getElementById("worldSelect").addEventListener("change", (e) => {
saveWorld();
currentWorld = parseInt(e.target.value);
loadWorld();
renderWorld();
});
}
// 初始化启动
initScene();
initWorld();
bindEvents();
animate();
})();
6. 运行效果演示：沉浸式沙盘，一键搭建迷你村庄
把上述代码保存为world.html、style.css、app.js三个文件，双击 world.html 直接打开浏览器，无需任何环境配置，就能看到完整 3D 小世界，运行效果如下：
截图 1：初始界面（8×8 空白沙盘）
- 打开即加载 8×8 平整草地沙盘，柔和日光 + 柔阴影，积木风质感；
- 操作提示 3 秒后自动淡出，界面干净简洁。
截图 2：自由搭建界面（放置树 + 房子 + 水域）
- 点击底部工具，再点击地块，一键放置对应元素；
- 水域自动下陷半透明、树由圆锥 + 圆柱拼接、房子是立方体组合，细节拉满；
- 鼠标拖拽旋转沙盘、滚轮缩放，3D 视角自由切换。
截图 3：一键生成程序化村庄
- 点击「生成村庄」，AI 自动生成随机布局；
- 每次生成都不同，自带田园氛围感，新手秒出效果。
截图 4：本地存档 + 多世界切换
- 支持 3 个独立世界存档，切换自动保存；
- 关闭网页重新打开，所有搭建内容自动恢复，数据不丢失。
7. AI 赋能开发：从 Prompt 到成品，全程高效闭环
这次实战，让我深刻感受到LLM 大语言模型和Coding Agent的强大。LLM 本质是海量参数构建的概率函数（y=fθ(x)），能精准理解自然语言需求，生成逻辑连贯的代码；而 Cursor、Claude Code 这类 AI 工具，能直接在编辑器里生成文件、写入代码，不用手动复制粘贴，全程无缝衔接。
从拆解需求、写 Prompt，到 AI 生成代码、微调优化，整个过程不到 1 小时。对比传统开发，光是搭建 Three.js 环境、写基础 3D 场景、封装交互逻辑，至少要几天时间。AI 把重复、繁琐的底层工作全部包揽，我只需要专注创意和体验，这正是 Vibe Coding 的魅力。
另外，本地大模型（ollama）也让我看到更多可能，未来可以本地运行开源模型，私密开发、离线使用，进一步降低 AI 开发的门槛。
8. 实战感悟：Vibe Coding 下，3D 开发不再有门槛
以前总觉得 3D 开发、游戏开发是专业程序员的专属，需要掌握复杂引擎、图形学知识，普通人根本碰不到。但这次用 Vibe Coding 实战后，我彻底改变了这个想法。
AI 时代，行业经验、业务逻辑、需求拆解能力，远比写代码的体力活更重要。很多小众创意、小型项目，受限于高成本程序员，一直无法落地，而 Vibe Coding+AI，让普通人也能把想法变成现实，这既是学习机会，也是创作机会。
不用纠结 Three.js 的 API，不用熬夜调试 3D 渲染 Bug，只要会清晰表达需求、会优化 Prompt，就能快速做出有趣的 3D 项目。这种 “创意驱动、AI 落地” 的模式，正在重构开发行业。
9. 总结：拥抱 AI，开启低成本 3D 创作时代
从 Vibe Coding 做 Web 应用，到这次实战 3D 小世界，我越来越确定：AI 正在抹平技术门槛，让开发从 “专业技能” 变成 “人人可及的创造力活动”。
浏览器 3D 小世界只是一个起点，基于这套模式，我们还能做 3D 小游戏、可视化沙盘、简易建模工具等更多有趣项目。不用复杂技术，不用大量时间，用自然语言指挥 AI，就能把创意落地。
未来，我会继续探索 Vibe Coding 在 3D、游戏、可视化领域的应用，持续分享实战心得。AI 时代，不必畏惧未知，拥抱新范式，每个人都能成为创作者！
学习小结
本次实战通过 Vibe Coding+AI，快速落地浏览器 3D 小世界编辑器，核心在于精准 Prompt 拆解需求、极简技术选型降低门槛、AI 包揽底层开发。附核心可运行代码 + 多场景运行截图，直观展示效果，让初学者也能直接复刻。整个过程让我明白，AI 时代的开发，核心是创意与逻辑，而非代码能力。后续会继续优化项目，增加更多 3D 元素，一起探索 AI+3D 的更多可能！
互动交流
- 你有没有用 AI 做过 3D 相关的小项目？
- 对这个 3D 小世界编辑器，你还有哪些功能建议？
欢迎评论区一起交流，一起解锁 Vibe Coding 更多玩法！
