用Claude和Three.js构建迷你我的世界：体素渲染与AI编程实践

先给结论：1 分钟，你能让 Claude 交出一张能转圈的方块小世界；1 小时，你能在浏览器里用 WASD 走起来、用鼠标右键放方块、左键挖方块；1 天，你能拿到一个带地形起伏、能存档读档、可以直接发给朋友打开玩的“迷你我的世界”。用 Claude Opus 5 这类推理型模型做 Minecraft，已经不再是一个炫技 Demo，而是一套可以稳定复现的工程方法。真正拉开差距的，不是模型名字，而是你怎么把游戏需求拆成可验证的最小任务。

这篇文章不打算重复网上的“跑分截图式”展示，而是给你一条从 0 到 1 的完整路径：先理解为什么“用 AI 做我的世界”是合理的，再分别看看 1 分钟、1 小时、1 天三种时间档下分别该做什么、能得到什么，最后给出中英双语提示词、排错表和工程建议。你哪怕没有写过 Three.js，也能照着把第一个方块场景跑起来。

1. 为什么“用 Claude 做我的世界”是技术圈的压力测试

很多人第一次听到“用 Claude 生成 Minecraft”时，第一反应是夸大其词。毕竟 Minecraft 在玩家眼里是一个完整的游戏：有地形生成、有生存合成、有村庄和红石电路，背后还有复杂的 Java 服务端。

但换个角度理解这件事：Minecraft 同时也是一个非常标准的“程序化生成 + 体素渲染 + 第一人称交互”技术综合体。它的核心逻辑不是美术资源，而是坐标计算。只要你能在三维网格上放置方块、根据噪声生成起伏地形、让玩家的摄像机在网格中移动并与方块发生碰撞，你就已经拥有一个可玩的“迷你版”。

社区之所以把 Minecraft 作为 AI 编程能力的压力测试，是因为它完美覆盖了 AI 编程最容易翻车的几个点：

• 三维空间计算容易出错，坐标方向一旦搞混，画面就会乱。
• 实时渲染需要控制性能，直接堆几万个独立网格，浏览器会卡成幻灯片。
• 交互逻辑牵扯事件系统、射线检测、碰撞体，一步不到位就“穿模”或“点不到方块”。
• 需求范围极大，从地形、建筑、光照、物理到 UI，任何一个模块都够写一天。

所以，如果 AI 能在一个小时内生成一个“看得见、走得了、挖得动”的 Minecraft 克隆，那它在中小型 Web 游戏开发上的能力就是可用的。这正是这个实验最有价值的地方：它检验的不是模型会不会背语法，而是模型能不能完成一个包含多个子系统的小型产品。

我的判断是：这件事已经处于“能用但必须靠工程方法约束”的阶段。给 AI 一个含糊的“做一个我的世界”提示词，结果大概率是一堆报错；给 AI 一份拆分成里程碑的任务清单，它反而会给你远超预期的代码。这也是后面三段时间档的核心逻辑：时间越短，目标越窄；目标越窄，成功率越高。

2. 基础概念：体素、区块、噪声和射线拾取

在动手之前，先用通俗说法过一遍核心概念。这些词在提示词里出现得越准确，AI 理解你意图的效率就越高。

2.1 体素（Voxel）

体素就是“三维像素”。Minecraft 里的方块本质上是一个位于整数坐标上的立方体。程序里常见的做法是：把游戏世界抽象为一个三维数组，数组下标是坐标，数组值表示方块类型。

text复制world[x][y][z] = 1  // 1 代表草方块
world[x][y][z] = 0  // 0 代表空气

这样做的好处是地块管理非常简单。渲染时只需要遍历数组中的非空位置，在对应坐标生成 BoxGeometry 立方体即可。

2.2 区块（Chunk）

把地图分成 16x16 或 32x32 的小格子，这就是区块。区块的意义有两个：一是方便管理渲染范围，只渲染玩家附近的区块；二是方便程序化生成，每个区块独立计算地形高度，然后用噪声函数让区块边界尽量平滑衔接。

在一分钟原型里，你只需要生成一块 16x16 的方格矩阵；但到了“一天版”，区块就成了必须的架构单元。

2.3 噪声地形（Noise Terrain）

如果想让地形像《我的世界》里一样有山丘、平原和凹地，一般用 Perlin 噪声或 Simplex 噪声。通俗理解：噪声函数输入一个坐标，输出一个在 0 到 1 之间平滑变化的值。把这个值乘以高度值，就能得到“起伏的地表”。

javascript复制// 高度示例：输出 0~1 之间平滑值，乘上 maxHeight 得到地表高度
const height = Math.floor(noise(x * 0.1, z * 0.1) * 8);

如果不用噪声，而是直接用随机函数，地形会像刀切一样突兀；噪声的连续性让相邻点之间的值接近，于是山峰和山谷之间是自然过渡的。

2.4 射线拾取（Raycasting）

鼠标点击屏幕是在二维平面上发生的，但游戏世界是三维的。射线拾取的做法是：从摄像机位置朝鼠标方向发射一条射线，计算射线与场景中所有方块的交点。命中的第一个方块，就是你“看到”的方块。左键点击时移除它，右键点击时在它的相邻坐标上生成新方块。

Three.js 提供了现成的 Raycaster，AI 生成的代码里也高频使用它。这个概念的难度不在 API，而在坐标换算：鼠标点击时，要把屏幕坐标折算成标准化设备坐标（NDC）。

3. 环境准备与前置条件

做这个实验不需要装 Java 或完整游戏引擎，只要一个现代浏览器和一份能保存 HTML 的文件。推荐环境如下：

• 操作系统：Windows / macOS / Linux 均可，没有平台限制。
• 浏览器：Chrome、Edge 或 Firefox 的较新版本，需支持 WebGL 与 ES Module。
• 编辑器：VSCode 已足够，也可以直接使用任何文本编辑器。
• 本地服务器：建议使用 python -m http.server 8080 或 VSCode 的 Live Server 插件。
• 依赖方式：直接通过 CDN 引入 Three.js，本示例使用 0.160.0，版本以实际 CDN 可用版本为准。

为什么不建议直接双击 HTML 文件打开？因为浏览器出于安全策略，对本地 file:// 协议下的 ES Module 加载限制较多。使用本地 HTTP 服务是最稳妥的做法。如果你手头有 Node.js，也可以安装 http-server 或 npx serve 来启动静态服务。

如果遇到浏览器页面空白，先打开开发者工具（F12）看 Console 是否有报错，尤其是 WebGL 初始化失败这类问题，通常和显卡驱动、浏览器硬件加速设置有关。

4. 一分钟原型：先把“方块世界”跑起来

一分钟版本的目标只有一个：让屏幕上出现由方块组成的地面。不需要玩家控制，不需要挖放，甚至不需要考虑性能，只验证一件事——AI 能正确调用 Three.js 生成体素网格。

把下面这个 HTML 保存为 1-minute-minecraft.html，然后用本地服务器打开。

html复制<!-- 文件路径：1-minute-minecraft.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>1 分钟 Minecraft 原型</title>
  <style>
    body { margin: 0; overflow: hidden; }
    #tip {
      position: fixed; top: 12px; left: 12px; z-index: 10;
      color: #fff; font: 14px/1.6 monospace;
      background: rgba(0,0,0,0.55);
      padding: 6px 12px; border-radius: 6px;
    }
  </style>
</head>
<body>
  <div id="tip">1 MINUTE MINECRAFT · 一分钟我的世界原型</div>

  <script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
    }
  }
  </script>

  <script type="module">
    import * as THREE from 'three';

    // 创建场景、摄像机、渲染器
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x87CEEB);

    const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
    camera.position.set(8, 6, 8);
    camera.lookAt(8, 2, 8);

    const renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(devicePixelRatio);
    renderer.setSize(innerWidth, innerHeight);
    document.body.appendChild(renderer.domElement);

    // 生成 16x16 的方块地面
    const geo = new THREE.BoxGeometry(1, 1, 1);
    const mat = new THREE.MeshLambertMaterial({ color: 0x7CB342 });

    for (let x = 0; x < 16; x++) {
      for (let z = 0; z < 16; z++) {
        // 用正弦函数制造一点波浪起伏，避免地面完全平坦
        const y = Math.floor(2 * Math.sin(x * 0.4) * Math.cos(z * 0.4)) + 2;
        const cube = new THREE.Mesh(geo, mat);
        cube.position.set(x, y, z);
        scene.add(cube);
      }
    }

    // 添加光照：平行光 + 环境光
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(10, 20, 10);
    scene.add(light);
    light.target.position.set(8, 0, 8);
    scene.add(light.target);

    scene.add(new THREE.AmbientLight(0xffffff, 0.4));

    // 自动旋转摄像机，展示效果
    function animate() {
      requestAnimationFrame(animate);
      const t = Date.now() * 0.0002;
      camera.position.x = 10 * Math.sin(t);
      camera.position.z = 10 * Math.cos(t);
      camera.position.y = 6;
      camera.lookAt(8, 2, 8);
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>
</html>

这段代码的核心逻辑只有三步：创建 Three.js 场景、在双循环里布设 16x16 个方块、用自动旋转的摄像机渲染等待它运行。如果一切正常，你会看到一个绿色方块组成的波浪地面，并且摄像机在绕圈旋转。

一分钟版本的正确验收标准是：页面不报错，方块排列整齐，光照能看清每个方块的立体感。如果方块之间出现交叠或者巨大的间隙，多半是坐标计算中的偏移量问题，把循环变量加上固定偏移即可。

5. 一小时版本：第一人称行走与方块破坏放置

一小时版本的核心目标是从“看世界”升级为“玩世界”。要加入三块能力：

• 鼠标控制视角：使用 PointerLockControls 让鼠标控制镜头旋转。
• 移动和碰撞：WASD 控制位置，同时做简单的碰撞检测，避免人物直接穿过方块。
• 射线交互：右键放置方块，左键破坏方块。

这里给出关键代码片段。注意，它们需要嵌入前面的 1-minute-minecraft.html 中，替换掉自动旋转的动画函数。

javascript复制// 引入第一人称控制
import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';

const controls = new PointerLockControls(camera, renderer.domElement);

// 点击 Canvas 锁定鼠标
renderer.domElement.addEventListener('click', () => controls.lock());

// 锁定后按键移动
const keys = {};
document.addEventListener('keydown', e => keys[e.code] = true);
document.addEventListener('keyup', e => keys[e.code] = false);

function updatePlayer(delta) {
  const speed = 5 * delta; // 移动速度：每秒 5 格
  if (keys.KeyW) controls.moveForward(speed);
  if (keys.KeyS) controls.moveBackward(speed);
  if (keys.KeyA) controls.moveRight(-speed);
  if (keys.KeyD) controls.moveRight(speed);
}

PointerLockControls 自带的 moveForward 和 moveRight 已经处理了基于镜头朝向的移动方向，省去了手写三角函数旋转的麻烦。但对新手来说，这个类隐藏了“移动方向受摄像机朝向影响”的细节，一旦坐标系理解不到位，就可能出现“按 W 斜着走”的问题。遇到这种状况，先检查相机是否被旋转过，再用 getWorldDirection 打印方向向量，逐步定位。

接下来是射线交互。射线拾取的目的很简单：从屏幕中心（也就是准星位置）发出一条射线，求出命中的方块。左键删除命中的方块，右键在命中面的外侧新增方块。

javascript复制const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2(0, 0); // 屏幕中心
const worldBlocks = []; // 用来记录场景中所有方块

// 左键删除，右键放置
document.addEventListener('mousedown', (event) => {
  if (!controls.isLocked) return; // 没锁定时不处理

  raycaster.setFromCamera(pointer, camera);
  const hits = raycaster.intersectObjects(worldBlocks);

  if (hits.length === 0) return;

  const hit = hits[0];

  // 左键：破坏方块
  if (event.button === 0) {
    scene.remove(hit.object);
    const idx = worldBlocks.indexOf(hit.object);
    if (idx !== -1) worldBlocks.splice(idx, 1);
  }

  // 右键：在命中面外侧放置方块
  if (event.button === 2) {
    const direction = hit.face.normal;
    const newPos = hit.object.position.clone().add(direction);
    const cube = createBlock(newPos.x, newPos.y, newPos.z);
    scene.add(cube);
    worldBlocks.push(cube);
  }
});

// 阻止浏览器右键菜单
document.addEventListener('contextmenu', e => e.preventDefault());

这里最常翻车的地方是 event.button 的判断。很多人写成 event.button === 2 表示左键，实际上浏览器里 0 是左键、1 是中键、2 是右键。第二个坑是删除方块后没有同步更新 worldBlocks 数组，后面的射线检测会越来越不准确。所以每当场景改动，都要同步维护这个数组。

碰撞检测在这个阶段可以“做得很粗”：只要检测玩家即将移动到的位置是否已经有方块即可。最简单的做法是，在每次移动前计算目标坐标，然后遍历 worldBlocks，判断是否和玩家碰撞盒重叠。碰撞盒通常取边长 0.6 的立方体，而不是 1.0，这样玩家可以在方块之间正常走动，不会卡死。

一小时版本的验收标准，是你可以在方块地面上自由奔跑，蹲下不被地形绊住，左键能把山挖出一个洞，右键能把挖掉的方块补回去。能实现这三点，你就已经拥有一个“可玩”的第一人称沙盒 Demo。

6. 一天版本：地形、存档和可分享的迷你游戏

一天时间，重点不是堆功能，而是把一小时版本打磨成一个结构完整的小产品。推荐目标清单如下：

这个清单本身就是提示词的“任务拆解模板”。把一天版拆成四项高优先级任务，分别生成和验证，比让 AI 一次性生成完整项目可靠得多。

地形生成是“一天版”最核心的视觉差异。可以用一个简单的噪声函数生成高度，然后填实地表下方的一层层方块。下面是一段基于 Value Noise 的高度图示例：

javascript复制// 文件路径：js/terrain.js
// 生成地形高度：基于二维噪声的简单地形
export function getHeight(x, z) {
  const scale = 0.05; // 缩放系数，控制地形起伏频率
  const octave1 = Math.sin(x * scale * 1.2) * 0.5 + Math.sin(z * scale * 1.2) * 0.5;
  const octave2 = Math.sin(x * scale * 4.5 + 1.0) * 0.25 + Math.sin(z * scale * 4.5 + 2.0) * 0.25;
  return Math.floor(4 + octave1 * 8 + octave2 * 4);
}

这个函数没有引入任何第三方库，纯粹用多个不同频率的正弦波叠加，模拟出“远处看有山，近处看不规则”的效果。生产环境可以换成 Perlin 噪声库，但这个简单的实现已经足够让地形看起来自然得多。

生成地形时，用循环把 y = 0 到 y = getHeight(x, z) 之间的位置填满方块。这样山丘下面就不是空心的，而是实心块体。

javascript复制// 文件路径：js/world.js
import { getHeight } from './terrain.js';

export function generateWorld(scene, worldBlocks) {
  // 生成 32x32 的地形范围
  for (let x = 0; x < 32; x++) {
    for (let z = 0; z < 32; z++) {
      const topY = getHeight(x, z);
      for (let y = 0; y <= topY; y++) {
        const type = y === topY ? 'grass' : 'dirt';
        const cube = createBlock(type, x, y, z);
        scene.add(cube);
        worldBlocks.push(cube);
      }
    }
  }
}

这里要特别注意性能：32x32 的地图如果全部用独立 Mesh 渲染，也就是至少上千个物体，现代浏览器还算扛得住；但如果地图扩大到 128x128，就必须使用 InstancedMesh 合并同类方块，或者只渲染玩家周围一定范围内的方块。让 AI 在一天版中自动加上区块视锥裁剪是一个很好的验证点，你可以直接问它“如何用分区渲染避免性能变差”。

存档读档模块也值得在一开始就设计。存档的本质是把世界数据序列化，而不是保存 Three.js 的 Mesh 对象。你可以维护一个二维或三维数组 worldData[x][y][z]，每次读写都基于这个数组，渲染时再根据数组重建网格。

javascript复制// 文件路径：js/save.js
// 核心思想：保存坐标 + 类型，但绝不保存 Mesh 对象
export function saveWorld(worldData) {
  const compact = [];
  for (let x = 0; x < worldData.length; x++) {
    for (let y = 0; y < worldData[x].length; y++) {
      for (let z = 0; z < worldData[x][y].length; z++) {
        const type = worldData[x][y][z];
        if (type && type !== 'air') {
          compact.push({ x, y, z, t: type });
        }
      }
    }
  }
  localStorage.setItem('mini-mc-world', JSON.stringify(compact));
}

这个做法的好处是，存档体积极小，读档时只需要遍历数组并重新渲染，不必担心 GPU 对象被序列化成不可用数据。读档函数则相反，从 localStorage 取出数组并调用 createBlock 重建方块。

一天版本的验收标准是：地图有起伏有内容、你能挖能放、刷新页面后地形还在、玩家不会掉进虚空、帧数稳定。如果这些都能满足，你完全可以把它打成一个链接发给朋友，作为一次很酷的 AI 编程成果展示。

7. 中英双语提示词模板：让 Claude 一次听懂你的目标

很多人觉得 AI 生成游戏“看运气”，其实大多数失败都出在提示词给了模型太多自由空间。下面这份中英双语提示词模板，是我认为性价比最高的写法：明确角色、技术栈、验收条件、性能约束和输出格式。

中文版：

text复制角色：你是一名资深前端游戏开发工程师。
语言：所有代码注释使用中文和英文双语。
任务：用 Three.js 做一个“迷你我的世界”单页游戏。
要求：
1. 使用单个 HTML 文件，可直接在现代浏览器中运行。
2. 包含第一人称视角、WASD 移动、左键破坏方块、右键放置方块。
3. 地形使用噪声函数生成，至少有草、土、石三种方块类型。
4. 性能目标是普通笔记本不掉帧，方块数量较大时使用 InstancedMesh 优化。
5. 不需要后端服务，也不需要外部纹理图片。
6. 请先给出完整的 index.html 文件，再给出关键逻辑解释。

英文版：

text复制Role: Senior frontend game developer.
Language: Use bilingual comments (Chinese + English) in all code.
Task: Build a "Mini Minecraft" single-page game with Three.js.
Requirements:
1. Single HTML file, runnable directly in modern browsers.
2. Include first-person controls, WASD movement, left-click to break blocks, right-click to place blocks.
3. Generate terrain with a noise function using grass, dirt, and stone block types.
4. Performance target: smooth on a regular laptop, use InstancedMesh when block count is large.
5. No backend service, no external texture images.
6. First output the complete index.html, then explain the key logic.

这个模板的核心价值，是把“做一个我的世界”这样的大命题，压缩成 6 个具体可验证的小需求。AI 在生成代码时，会优先满足能被机械检查的约束，比如“现代浏览器可直接运行”“不需要外部纹理”，这大幅减少了它在复杂资源管理和美术资产上跑偏的概率。

如果你只有五分钟，还可以用更短的“丐版提示词”：

text复制生成一个 Three.js 的体素地形 Demo，单 HTML 文件，包含鼠标旋转镜头和左右键挖放方块，不要后端。

这个丐版提示词适合快速探索，但输出稳定性明显下降。尤其在没有约束“方块数量大时使用 InstancedMesh”的情况下，AI 可能生成 100x100 的地图，然后页面卡死你也第一时间无法定位是性能问题还是代码逻辑问题。所以，正式做项目时，请使用完整版模板。

8. 常见问题与排查思路

这里整理了从生成代码到真正运行最常见的几个问题，尤其是和 Minecraft 本体启动器相关的场景，一并放在下表里。

这里的“官方启动器卡在正在开始安装”和我前面做的浏览器 Demo 不太一样，它指的是真正的 Minecraft.exe 启动器。遇到这种情况，最优先排查的是网络链路是否稳定，然后确认 Java/启动器版本与当前系统架构是否匹配。如果安装包下载到一半就卡住，大概率是源服务不稳定，换个时间段或换一个镜像源就能解决。

如果你的浏览器版本里出现“一直转圈加载资源”的现象，同理：先看 Network 面板中哪个请求一直 pending，再用 Ctrl+F5 强制刷新一次，通常能解决大部分资源缓存问题。

9. 工程最佳实践：让 AI 用得久、产得快

经过以上三段时间档，你会发现 AI 生成代码的过程，本质上是一场“需求 → 代码 → 验证 → 改错”的循环。想让这个循环稳定可靠，下面几条工程建议值得参考。

第一，永远使用版本管理。每次 AI 生成一个能运行的版本，就用 git commit 打一个快照。因为 AI 改代码常常“修一个 bug 带出两个新 bug”，有快照才能快速回滚。即使你只是长期单机开发，git 也是成本最低的安全网。

第二，把“大需求”切成“小命令”。不要在同一个提示词里同时要求“地形、音效、背包、合成、联机、光影”。一条命令一个目标，这样 AI 的输出范围永远是可控的。如果某次生成结果不理想，优先精确定位是“地形算法”还是“鼠标拾取”的问题，再把对应模块单独交给 AI 修复。

第三，请务必审查代码，而不是直接信任输出。AI 生成的代码在语法上通常没问题，但逻辑边界有很多漏洞，比如数组越界、摄像机初始化位置不对、碰撞检测没有考虑 Y 轴。你可以把代码读一遍，至少追踪一下几个关键函数的数据流，别等到运行 10 分钟才发现人物已经掉出地图。

第四，重视可移植性。尽量使用浏览器原生能力和 CDN 库，而不是把某个 AI 生成的代码和特定后端绑定。这样即使以后换模型、换项目，这些代码也能复用。

第五，环境变量和配置项不要写死。如果 AI 生成的代码里把地图尺寸、方块颜色、移动速度都写成了魔法数字，动手把数字“提”出来，放到配置对象里。这看起来像是在“给 AI 擦屁股”，但后期调整游戏手感时，你会庆幸做了这一步。

第六，性能优化要尽早验证。浏览器游戏最常见的崩溃原因不是逻辑错误，而是实体对象数量爆炸。开局就考虑 InstancedMesh、视距裁剪、合并渲染，比功能完成后再重构轻松得多。

10. 总结与后续学习方向

用 Claude Opus 5 做“我的世界”这件事，本质上是把一个复杂的游戏工程压缩成三段可控的实验：一分钟方块原型、一小时可玩 Demo、一天可交付作品。这个过程中的难点不在模型能否写出 Three.js 代码，而在于你有没有能力把宏大需求拆成“能被立即验证”的最小单元。

如果你今晚想亲手试一次，我建议你从第一个 16x16 方块场景开始，目标只定成“代码能跑起来”。跑起来之后，再加 PointerLockControls，再加射线拾取，再加噪声地形。每一步都是一个独立的验证节点，任何一步出问题，你都能定位到具体模块，而不是面对一堆无法排错的报错页面。

接下来值得深入的方向有三个：一是把地形生成换成真正的 Perlin 噪声，并加入洞穴和生物群系；二是用 InstancedMesh 重写渲染层，尝试把地图扩展到 128x128；三是加入存档功能后，把世界数据导出成 JSON 文件，做成一个可以导入导出的作品存档。这些方向分别对应程序化生成、3D 渲染优化、数据序列化，每一个都足够写一篇新的博客。

真正的高手，不是让 AI 一次性写出完整游戏，而是把“游戏开发”这个复杂过程变成一段段可对话、可验证、可回滚的工程流程。这套方法论，远比一个“我的世界” Demo 本身更值钱。