《我的世界》网页版 web THreeJS 开源项目

「24-mc-glm5.3-THreeJS」《我的世界》网页版 web THreeJS 开源项目

/~d7383aD5KE~:/

链接：https://pan.quark.cn/s/6d19d140a7e1

我的世界 · 网页版（Minecraft Web）

一个用 Three.js + React + TypeScript 从零实现的网页版《我的世界》复刻：无限体素地形、挖掘与建造、第一人称操作、昼夜循环、存档......全部逻辑与纹理均为程序化生成，零外部素材、零后端。

粉丝复刻作品，仅供学习交流，非官方游戏。

---

🚀 怎么运行

方式一：直接玩（最简单，推荐）

项目根目录下已经生成好了 bundle.html（约 824KB 的单文件版，所有 JS/CSS/资源全部内联）：

# macOS / Linux
open bundle.html        # 或直接双击 bundle.html

# Windows
start bundle.html

用 Chrome / Edge / Safari 打开即可，无需任何服务器与网络。

方式二：开发模式（热更新，改代码用）

cd minecraft-web
pnpm install        # 首次需要；需要 Node.js 18+ 与 pnpm
pnpm dev            # 启动 Vite 开发服务器

然后浏览器打开终端里提示的地址（默认 http://localhost:5173）。

方式三：重新打包单文件

改完代码后，一键重新生成 bundle.html：

pnpm bundle          # = parcel build + html-inline 内联为单文件

常用命令一览

命令	作用
pnpm dev	启动开发服务器（热更新）
pnpm build	TypeScript 类型检查 + Vite 生产构建
pnpm bundle	打包成可直接双击打开的单文件 bundle.html
pnpm lint	oxlint 代码检查

---

🎮 操作说明

按键 / 鼠标	功能
W / A / S / D	前后左右移动
鼠标移动	转动视角（进入游戏后自动锁定指针）
空格	跳跃；水中上浮；双击空格切换飞行（创造模式）
Shift	潜行（不会走出方块边缘）；飞行时下降
双击 W	疾跑（视野拉伸）
鼠标左键（长按）	挖掘方块（有裂纹进度，硬度和方块种类有关）
鼠标右键	放置当前手中的方块（可长按连放）
鼠标中键	选取准星指向的方块到快捷栏
滚轮 / 数字键 1-9	切换快捷栏格子
E	打开 / 关闭物品栏（创造模式全部方块）
F3	调试信息（FPS / 坐标 / 区块数 / 时间 / 种子）
Esc	暂停菜单（继续 / 切换模式 / 视距 / 存档）

进入游戏后会锁定鼠标；Esc 暂停，点击"回到游戏"继续。

---

✨ 已实现的功能

• 无限世界：基于种子（Simplex 噪声）的程序化地形------平原、山脉、沙漠、沙滩、雪原、森林、湖泊
• 洞穴与矿石：3D 噪声隧道 + 地下洞窟；煤 / 铁 / 金 / 钻石矿石按深度分布
• 树木与植被：橡树（跨区块一致）、草丛、蒲公英、虞美人
• 26 种方块：草、泥土、石头、圆石、沙子（会下落！）、沙砾、原木、树叶、木板、玻璃、砖块、水、雪、萤石、TNT、工作台、书架、黑曜石、矿石、花草......
• 挖掘系统：按方块硬度计算挖掘时间，裂纹逐级加深；创造模式瞬间破坏
• TNT 爆炸：挖一下 TNT 会点燃引信，爆炸破坏地形、连锁引爆、击退玩家
• 流水模拟（简化版）：挖开水边方块后水会流过来------向下无限流、水平最多漫 7 格（同 MC），沟渠会被灌满，创造模式还能手动放水
• 物理：重力、AABB 碰撞、跳跃、潜行防坠、游泳与水下视野、摔落伤害、虚空伤害
• 生存 / 创造双模式：随时在暂停菜单切换；创造可飞行、免伤害、即时挖掘
• 昼夜循环（8 分钟一天）：太阳月亮东升西落、星空、黄昏橙色天空、飘动的云
• 环境光遮蔽（AO）：方块夹角处的柔和阴影，还原 MC 的体积感
• 粒子与音效：破坏方块碎屑、爆炸烟尘；WebAudio 合成的挖掘 / 放置 / 脚步 / 爆炸音效
• 手持方块：右下角手中方块随挖掘摆动
• 存档 ：世界改动、玩家位置、时间、模式自动保存到 localStorage（继续游戏 可恢复）
• 完整 UI：标题屏（背景是世界实景环绕镜头）、快捷栏、物品栏、血量、暂停菜单、死亡重生、F3 调试、提示消息

🗺️ 世界与规则速览

• 世界高度 80 格，海平面 30，区块 16×16，默认视距 5（可在暂停菜单调 3~8）
• 出生点自动寻找陆地；摔落超过 3 格开始扣血；水可以缓冲坠落
• 沙子 / 沙砾下方被挖空后会下落；TNT 挖一下即点燃
• 水会流动（向下无限、水平最多 7 格），但没有水位高低、也不会退潮；黑曜石和基岩不可被爆炸破坏

🧱 技术栈与项目结构

React 外壳 + Vite + Tailwind（UI 层），游戏核心为纯 Three.js：

src/
├── App.tsx            # React UI：标题屏 / HUD / 背包 / 暂停 / 死亡界面
├── index.css          # Minecraft 风格 UI 样式
└── game/
    ├── core.ts        # 常量、可播种随机数、Simplex 噪声（2D/3D/fbm）
    ├── blocks.ts      # 26 种方块注册表（贴图映射/硬度/音效/物理标志）
    ├── textures.ts    # 程序化像素纹理图集、等距方块图标、裂纹贴图
    ├── worldgen.ts    # 地形/生物群系/洞穴/矿石/树木/出生点
    ├── world.ts       # 区块存储、网格化（面剔除+AO+水面）、射线拾取、编辑
    ├── player.ts      # 玩家物理：碰撞/跳跃/潜行防坠/游泳/飞行/伤害
    ├── fx.ts          # 破坏粒子系统、WebAudio 合成音效
    ├── sky.ts         # 昼夜循环、日月星空、云、雾与光照色调
    └── game.ts        # 主引擎：输入、交互、TNT、存档、镜头、主循环

渲染要点：每个区块合并成一个 BufferGeometry（仅暴露可见面），顶点色烘焙面亮度 + AO，昼夜色调通过材质颜色全局调制；水面单独半透明网格并降低液面高度。

⚠️ 已知限制

• 需要键盘 + 鼠标（未适配触屏）
• 无红石 / 生物 / 合成系统
• 水为简化流水（无水位分级、移除源头后已漫开的水不会退回）
• 存档保存在浏览器 localStorage，清空浏览器数据会丢失；换浏览器不共享