# geek-flight-3d-game

**Repository Path**: geekidea/geek-flight-3d-game

## Basic Information

- **Project Name**: geek-flight-3d-game
- **Description**: 使用Gemini3 Pro生成AI小游戏之手势控制银河系飞行器飞行和拳头伸开发送导弹攻击。
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://jkcxkj.com/fly.html
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-13
- **Last Updated**: 2025-12-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# GEEK FLIGHT 体感飞行 WebGL 游戏

## 开源协议 MIT-License
### 任何公司或个人，均可进行商业使用，无需授权！
### 任何公司或个人，均可进行商业使用，无需授权！
### 任何公司或个人，均可进行商业使用，无需授权！

## 项目介绍
> 项目概述：GEEK FLIGHT 是一款基于摄像头手势识别的体感飞行游戏，使用 `Three.js` 渲染 3D 场景，结合 `MediaPipe Hands` 实现实时手部识别与交互。玩家通过手掌上扬/下压控制爬升与俯冲，左右移动控制转向，握拳后松开进入自动导弹射击模式，获得沉浸式的科幻飞行体验。入口文件为 `fly.html`。
### 核心特性：
  - 手势控制：上扬/下压/左右移动；握拳后松开触发导弹并自动连发（200ms 间隔），再次握拳或手部明显移动停止连发
  - 三种环境：`NEON GRID` 霓虹网格、`GALAXY` 银河粒子、`DIGITAL TERRAIN` 数字地形，支持自动/手动切换
  - HUD 与仪表：居中准星随飞机前向矢量移动；推力与高度仪表条；时间与 FPS 状态显示
  - 视觉效果：Bloom 高光后期处理、星空粒子场、发动机尾焰粒子、命中爆炸粒子
  - 音频系统：BGM 开关、音量滑杆、曲目选择、单曲循环/顺序播放；浏览器需首次交互后方可自动播放

### 体验地址：https://jkcxkj.com/fly.html
### 抖音效果展示：https://v.douyin.com/GvPzBohSzeY/
[![预览图](images/main.png)](https://v.douyin.com/GvPzBohSzeY/)


### 技术栈与依赖：
  - `Three.js` 与 `EffectComposer/UnrealBloomPass` 后处理
  - `MediaPipe Hands` WASM 版本手部识别
  - 原生 Web API：`getUserMedia`、Canvas 生成翼面贴图
### 目录结构（关键项）：
  - `fly.html` 游戏主页面与全部逻辑
  - `js/three.min.js` 及后处理库：`EffectComposer.js`、`RenderPass.js`、`UnrealBloomPass.js` 等
  - `js/mp-hands/` MediaPipe Hands 模型与 WASM 资源
  - `js/hands.js`、`js/camera_utils.js`、`js/control_utils.js` 相机与识别适配
  - `audio/` 背景音乐 MP3 列表
  - `css/google-fonts.css`、`images/favicon.ico`

## 使用说明
### 运行环境与前置条件：
  - 现代浏览器（推荐 Chrome/Edge 最新版），需要摄像头权限
  - 由于 `getUserMedia` 安全策略，需在 `https` 或 `localhost` 下访问
  - 使用本仓库根目录作为网站根路径，确保静态资源可被正确访问
### 启动与访问（本地开发）：
  - 在项目根目录启动任意静态服务器后，访问 `http://localhost:<port>/fly.html`
  - 示例：`python3 -m http.server 8000` 后访问 `http://localhost:8000/fly.html`
  - 首次进入需允许浏览器使用摄像头；页面收到首个点击/按键后，BGM 才能正常播放
### 操作说明（手势与飞行）：
  - 爬升：手掌上扬（Tilt UP）
  - 俯冲：手掌下压（Tilt DOWN）
  - 转向：手掌左右移动（Move L/R）
  - 导弹：握拳后松开进入自动射击；约 1s 宽限后若手部明显移动或再次握拳则停止连发
### 场景与音频控制：
  - 场景控制（页面底部左侧）：`SCENE` 下拉框选择 `AUTO SWITCH / NEON GRID / GALAXY / DIGITAL TERRAIN`；`NEXT >>` 强制切换到下一个场景
  - 音频控制（页面底部右侧）：`BGM ON/OFF` 切换、`音量滑杆`、`曲目选择`、`Repeat One` 单曲循环；默认音量 `0.4`
### HUD 与状态显示：
  - 准星根据飞机前向矢量投影到屏幕中心区域，对齐导弹命中方向
  - `Thrust Output` 与 `Altitude` 两个仪表条实时变化；顶部显示 `TIME` 与 `FPS`
### 常见问题：
  - 未能调用摄像头：确认使用 `https` 或 `localhost`，并在浏览器中允许摄像头权限
  - BGM 无法播放：浏览器通常要求用户与页面首次交互（点击/按键）后才允许自动播放
  - 资源加载失败：确保服务器正确提供 `.wasm` 与 `.data` 文件，且路径与大小写一致

## 如何部署
> 方式概述：项目为纯静态站点，无需构建流程；将整个目录部署到任意静态 Web 服务器即可（Nginx、Apache、Node 静态服务器、Vercel、Netlify、GitHub Pages、Gitee Pages 等）
### 部署步骤（通用）：
  - 将仓库根目录作为站点根目录进行部署
  - 确保可直接访问 `fly.html` 与 `js/mp-hands/*`、`audio/*` 等静态资源
  - 为生产环境启用 `https`，以满足摄像头访问的安全要求
### 示例（Node 静态服务）：
  - 使用 `npx serve` 或任意静态文件服务指向本项目根目录
  - 访问 `https://<your-domain>/fly.html`，浏览器授权摄像头后即可开始游戏

## 业务咨询
![业务咨询](https://geekidea.oss-cn-chengdu.aliyuncs.com/geekidea/service.png)