网页我的世界游戏 MC (html 开源)

「41 网页我的世界游戏 MC (html 开源)」

/~e3363YnAvM~:/

链接：https://pan.quark.cn/s/500b4cc58b3e

Third-Person-MC（网页第三人称 MC / Web3D Demo）

English| 中文

一个基于 Three.js + Vue 3​ 构建的网页 3D 演示项目。

本项目旨在展示 MC 风格多世界传送门 ​ 与 魂类锁定战斗​ 的预热体验。

我们的目标不是做一个"只能看截图的 Demo"，而是打造一个 可跑、可玩、可持续迭代​ 的 Web3D 项目。

🌐 在线预览：https://third-person-mc.vercel.app/

🛠️ Debug 面板：https://third-person-mc.vercel.app/#debug

📄 产品需求文档（PRD）：docs/PRD.md

---

📸 视觉预览

开始界面	攻击效果	生态地形
docs/images/menu.png	docs/images/attack.gif	docs/images/terrain.png

---

🎮 玩法与按键操作

设计标准：打开页面 30 秒内即可上手。

操作	按键	说明
移动​	W``A``S``D	八向位移，含走/跑姿态切换
普通攻击​	Z	支持连击 Combo
重攻击​	X	强力打击反馈
锁定目标​	鼠标中键	*(开发中)*魂类锁定逻辑
格挡​	C	防御动作
互动​	E/ F	*(开发中)*采集或开启传送门
关闭菜单​	ESC	退出界面或暂停游戏

---

🌍 生态地形与生成

项目强调 "体素风格 + 程序化生态变化"，并在保证视觉效果的同时维持流畅帧率。

地形生态展示

平原	森林	白桦林
docs/images/plains.png	docs/images/forest.png	docs/images/birch.png
樱花林	沙漠	冻洋
:---:	:---:	:---:
docs/images/cherry.png	docs/images/desert.png	docs/images/frozen_ocean.png

生成算法 (Noise & FBM)

• 单一种子，一个世界：基于 PRNG 生成确定性地形。

• 多层噪声叠加：通过 Noise 控制地形振幅，FBM (分形布朗运动) 丰富地面细节。

---

🎥 相机自适应与 HUD

• 智能相机：针对地形起伏自动避障，防止穿模，支持越肩视角调整。

• 沉浸式 HUD：包含血条、经验条、快捷栏及小地图。

相机跟随	HUD 界面
docs/images/camera.gif	docs/images/hud.png

---

💻 项目技术栈

核心框架

• Three.js (v0.172+)：核心 3D 渲染引擎。

• Vue 3：UI 层开发框架。

• Vite：极速构建工具与开发服务器。

• Pinia：响应式状态管理（UI 与 3D 场景同步）。

渲染与动画

• GLSL (Custom Shaders)：自定义着色器（传送门、地形、后处理）。

• three-custom-shader-material：材质增强。

• GSAP：高性能补间动画。

• InstancedMesh：大规模体素与植被优化。

工程化

• mitt：全局事件总线（UI ↔ 3D 通信）。

• Tailwind CSS / Sass：样式解决方案。

• Playwright：端到端 (E2E) 测试。

• Husky & Commitlint：Git 提交规范。

---

📂 项目结构

E:\圖形學\Third-Person-MC\
├── public/
│   ├── models/             # GLB/GLTF 模型
│   ├── textures/           # 贴图资源
│   └── fonts/              # Minecraft 字体
├── src/
│   ├── components/
│   │   ├── hud/            # 游戏内 HUD
│   │   ├── menu/           # 菜单与设置
│   │   └── MiniMap.vue     # 小地图
│   ├── js/
│   │   ├── camera/         # 相机控制器
│   │   ├── world/          # 玩家、地形系统
│   │   ├── interaction/    # 射线拾取
│   │   └── experience.js   # 核心入口 (单例)
│   ├── shaders/            # GLSL 着色器
│   └── vue/                # Pinia Stores
├── docs/                   # 产品文档与规划
└── vite.config.js

---

🎨 素材出处

• 模型 ：基于 Minecraft 风格的自定义建模 (character.glb)。

• 皮肤：

  • Steve & Alex by hibiki_ekko@ Planet Minecraft

  • Classic by holland0519@ Minecraft Skins

• 贴图 ：提取自 MinecraftMojang/bedrock-samples，由 hexianWeb优化。

• 字体：Minecraftia / fusion-pixel-font。

• 音效：计划由 Suno AI 生成。

---

🚧 未完成内容 (TODO)

• 宠物系统：实现陪伴玩家的可爱狗及其 AI 逻辑。

• 生态优化：提升生物群系过渡平滑度，增加植被多样性。

• 背包系统：完整的物品存放与交互 UI。

• 挖掘特效：方块破坏时的粒子效果。

• 换肤功能：实时切换玩家外观。

• 锁定增强：魂类锁定视觉反馈（UI/Shader）。

---

🚀 快速开始

环境要求

• Node.js (LTS 版本)

• 推荐使用 pnpm ​ (仓库已包含 pnpm-lock.yaml)

安装与运行

# 安装依赖
pnpm install

# 启动开发服务器 (默认使用 --host)
pnpm dev

打开终端输出的本地地址（通常为 http://localhost:5173）。

常用命令

# 开发
pnpm dev

# 构建生产版本
pnpm build

# 预览生产构建
pnpm preview

# 代码检查与修复
pnpm lint
pnpm lint:fix

# E2E 测试 (Playwright)
pnpm test:chrome
pnpm test:firefox
pnpm test:safari

---

🤝 贡献

• 行为准则：CODE_OF_CONDUCT.md

• 提交规范：仓库已启用 Husky + Commitlint，请遵循 Conventional Commits​ 规范。

---

📜 License

本项目仅供学习与个人演示使用。

Minecraft 相关内容版权归 Mojang Studios 所有。