Minecraft 方块风格 + GTA 城市漫游 + 宝可梦拍照收集 的广州城市观光模拟器 无需出门，在浏览器里逛广州：自由行走、探索景点、拍照打卡、收集图鉴、体验羊城昼夜与四季烟火。
基于 Vue 3 + Three.js (WebGL) 实现，按 prd.md 产品需求文档开发，纯前端运行、无需服务器。
- 🏙️ 还原广州城市格局 — 真实经纬度投影（现实 1km ≈ 游戏 200 格），7 大城区 + 珠江水系 + 方块化地形
- 📷 摄影收集玩法 — 多视角相机 + 滤镜 + 自动识别景点，拍满图鉴做"羊城旅行家"
- 🚇 城市生活模拟 — 巴士、地铁传送、珠江夜游、广州塔电梯、白云索道、路人 NPC、早茶烧腊
- 🌗 昼夜与天气 — 晴/阴/雨/台风随机变化，夜晚广州塔灯光秀与珠江实时倒影
- 📱 移动端适配 — 虚拟摇杆 + 触屏操作，竖屏提示横屏游玩、横屏一键全屏
- 真实经纬度投影，1km ≈ 200 格，核心区 12km 外按比例压缩
- 覆盖 8 个区：越秀 / 荔湾 / 天河 / 海珠 / 白云 / 番禺 / 南沙 / 黄埔
- 珠江前/后航道、西航道、狮子洋、沙基涌、荔枝湾涌
- 主干道路网与桥梁，白云山 / 越秀山 / 大夫山方块地形
| 级别 | 代表景点 |
|---|---|
| S | 广州塔（135° 扭转塔身、观景层、旋转餐厅、摩天轮、夜间灯光秀）、陈家祠（三进三路九堂、陶塑瓦脊、灰塑木雕砖雕）、沙面（欧式建筑群、露德圣母堂、白天鹅宾馆） |
| A | 中山纪念堂、镇海楼、五羊石像、圣心大教堂、西塔、东塔、大剧院、省博、海心桥、猎德大桥、海珠桥 |
| B | 北京路千年古道、上下九骑楼、永庆坊、天河体育中心、广州东站、琶洲、中大、白云山、长隆、南沙湿地、天后宫等 |
- 玩家角色：方块小人，男/女、肤色/发型/服装自定义，支持上传 64×64 Minecraft 皮肤；WASD + 鼠标，奔跑跳跃，第一/第三人称
- 摄影系统（
C键）：第一人称 / 第三人称 / 自拍（多种姿势）、6 种滤镜（岭南复古胶片、夜广州霓虹…）、变焦，自动识别画面中的景点并解锁图鉴，照片存入相册（IndexedDB，可下载） - NPC 路人：上班族 / 学生 / 老人 / 游客 / 小孩 / 街坊，会走路、聊天、拍照、买东西、等公交，粤语风格对白，可以合影
- 城市交通：观光巴士 1 路（广州塔 ⇄ 珠江新城 ⇄ 北京路 ⇄ 陈家祠）、18 个地铁站快速传送、珠江夜游、广州塔电梯、白云索道、城市车流
- 天气与时间：晴 / 阴 / 雨 / 台风随机变化，早晨 → 下午 → 黄昏 → 夜晚循环，夜晚窗灯、霓虹与灯光秀
- 收集与任务：图鉴（建筑 / 食物 / 文化）、纪念品背包、新手任务链、7 个城区任务、每日任务（按日期刷新）
- 性能优化：分块流式加载、景点按距离加载/卸载 + 远景 LOD、合并网格、三档画质设置
# 安装依赖
npm install
# 本地开发（默认 http://localhost:5173）
npm run dev
# 生产构建（输出到 dist/，可直接静态部署）
npm run build
# 本地预览构建产物
npm run preview构建使用相对路径（
base: './'），dist/可直接部署到任意静态托管（GitHub Pages、Vercel、Nginx 等）。
| 按键 | 功能 |
|---|---|
W A S D |
移动 |
Shift / 空格 |
奔跑 / 跳跃 |
| 鼠标 | 旋转视角（点击画面锁定鼠标） |
V |
切换第一/第三人称 |
C |
进入/退出摄影模式 |
F / 点击快门 |
拍照 |
1 – 6 |
摄影滤镜 |
E |
交互 / 对话 / 乘车 |
T |
时间快进 |
M / B / P / N / J |
地图 / 背包 / 相册 / 图鉴 / 任务 |
H / Esc |
帮助 / 关闭面板 |
- 左侧虚拟摇杆移动，右侧滑动旋转视角
- 右下按钮：跳 / 跑 / 交互
E/ 摄影 📷 / 视角 👁 - 竖屏进入游戏会提示"请横屏操作"（可选择仍要竖屏继续），旋转手机后自动进入横屏布局
- 横屏时底部菜单提供"⛶ 全屏"按钮，一键进入全屏并锁定横屏方向（支持 Fullscreen API 的浏览器）
- 小提示：iOS Safari 不支持网页全屏接口时，全屏按钮会自动隐藏
guangzhou/
├── index.html # 入口 HTML
├── vite.config.js # Vite 配置（相对路径打包）
├── prd.md # 产品需求文档
├── public/ # 静态资源
└── src/
├── main.js # 应用入口
├── App.vue # 根组件（菜单/加载/游戏切换）
├── style.css # 公共样式（MC 风格 UI）
├── components/
│ ├── Menu.vue # 主菜单 / 角色创建 / 出生点选择
│ ├── GameView.vue # 游戏主视图（HUD/摄影/移动端控制/横竖屏）
│ └── Panels.vue # 地图/背包/相册/图鉴/任务/设置面板
└── game/
├── Game.js # 游戏主循环与生命周期
├── world.js # 世界生成（地形/水系/路网）
├── city.js # 城市街区与建筑生成
├── landmarks/ # 各区景点建模（越秀/荔湾/天河/海珠/外围…）
├── player.js # 玩家控制器与相机
├── character.js # 方块角色与皮肤
├── npc.js # NPC 行为
├── photo.js # 摄影系统与滤镜
├── transport.js # 巴士/地铁/夜游/索道
├── physics.js # 碰撞与移动
├── sky.js # 天空/天气/昼夜光照
├── store.js # 全局状态与存档（localStorage）
└── … # 输入、地图、材质、实例化等模块
- 框架：Vue 3（Composition API）
- 3D 渲染：Three.js / WebGL
- 构建：Vite
- 存储：localStorage（存档）+ IndexedDB（照片）
- 风格：Minecraft 方块美学 + MC 风格像素 UI
- 地铁站内场景与更多线路
- 更多收集要素与成就系统
- 多语言支持
- 可扩展到北京、上海、深圳等更多城市的地图框架
- prd.md — 产品需求文档（项目定位、玩法循环、区域与景点设计）