基于 WebGPU + Three.js TSL 的第一人称射击游戏外壳,现代战术写实风格(CS2/塔科夫调性)。
- WebGPU 渲染:走
three/webgpu入口,WebGPURenderer+ TSL 节点着色器 - 大厅:旋转枪械展示 + 粒子背景 + 主菜单导航
- 武器仓库:3 把枪卡片 + 属性面板(伤害/射速/后坐力/弹匣)+ 拖拽 3D 旋转预览
- 3 把枪械:P-12 手枪、R-30 步枪、S-5 狙击枪,程序化几何按真实尺寸拼装 + PBR 材质 + 倒角细节
- 靶场:WASD 移动 + 鼠标视角(pointer lock)+ 左键开火 + R 换弹,静态/移动靶,计分系统
- 射击反馈:TSL 枪口火焰、命中火花粒子、bloom + vignette 后处理、屏幕震动、准星扩散
- 设置/战绩:鼠标灵敏度、FOV、画质档;累计击杀/命中率/���高连杀,localStorage 持久化
- Vite 5 + TypeScript
- Three.js r183+(
three/webgpu+three/tsl) - Tailwind CSS(静态菜单 UI)
- 原生 DOM(HUD 高频更新,无框架)
- Chrome / Edge 113+(需支持 WebGPU)
- Node.js 18+
# 安装依赖
npm install
# 开发模式
npm run dev
# 浏览器打开 http://localhost:5173
# 生产构建
npm run build
# 产物输出到 dist/
# 本地预览构建产物
npm run preview| 操作 | 按键 |
|---|---|
| 移动 | W A S D |
| 冲刺 | Shift |
| 鼠标视角 | 移动鼠标(进入靶场后点击屏幕锁定指针) |
| 开火 | 鼠标左键 |
| 换弹 | R |
| 暂停 | ESC |
src/
├── main.ts # 入口,WebGPU 检测,场景注册
├── core/
│ ├── Renderer.ts # WebGPURenderer 封装 + 设备丢失处理
│ ├── SceneRouter.ts # 场景路由 + 设置/战绩持久化
│ └── Input.ts # 键鼠输入 + pointer lock
├── scenes/
│ ├── Lobby.ts # ��厅
│ ├── Arsenal.ts # 武器仓库
│ └── Range.ts # 靶场
├── weapons/
│ ├── Weapon.ts # 基类(PBR 材质 + GLB 接口)
│ ├── Pistol.ts / Rifle.ts / Sniper.ts
│ └── Viewmodel.ts # 第一人称手+枪
├── player/Player.ts # 玩家移动/视角/碰撞
├── ui/
│ ├── HUD.ts # 准星/弹药/计分/暂停菜单
│ └── MenuUI.ts # 大厅/仓库/设置/战绩面板
├── shaders/ # TSL Fn(枪口火焰、火花)
└── styles/main.css # Tailwind + 战术写实样式
# Docker
docker build -t tactical-range .
docker run -p 8080:80 tactical-range
# 访问 http://localhost:8080多阶段构建:Node 构建产物 → nginx 静态服务,带 SPA fallback + gzip + 缓存。
MIT