ETO Droplet - 三体水滴模拟器

2026_太空漫游 - 基于 Three.js 和 Electron 的 3D 太空战斗模拟游戏

一款还原《三体》中"水滴"场景的 3D 交互式模拟器，玩家将操控三体文明的超级武器"水滴"，体验末日之战的震撼与绝望。

---

📖 项目概述

本项目是一个基于 WebGL 技术的 3D 太空战斗模拟器，采用现代化的 Web 技术栈构建，可作为网页应用运行，也可打包为独立的桌面应用程序。项目高度还原了《三体》小说中水滴摧毁人类舰队的经典场景，并提供了丰富的交互体验。

核心特性

• 🚀 高速物理模拟 - 最高约 1% 光速（3000 km/s，受当前逻辑上限约束）
• 💥 震撼的粒子特效 - 自定义着色器实现的体积粒子爆炸效果
• 🎮 多种控制方式 - 支持键盘、鼠标和游戏手柄操控
• 🎵 沉浸式音效系统 - 动态背景音乐和环境音效
• 🌌 高质量 HDR 渲染 - 8K 星空背景和 PBR 材质
• 🎯 智能 AI 舰队 - 自动战术规避和编队机动
• 📡 科幻 UI 设计 - 赛博朋克风格的 HUD 界面

---

🎮 游戏玩法

游戏目标

你是三体文明派遣的"水滴"探测器的操控者，任务是在宇宙空间中摧毁人类的太空舰队。水滴拥有超乎想象的强度和速度，但人类舰队也会尝试规避和反击。

操作方式

键盘控制（主要）

按键	功能
W / S	俯仰控制 (Pitch)
A / D	偏航控制 (Yaw)
Space	加速 (Boost)
P	减速/刹车 (Brake)
H	切换攻击模式 (Attack Mode)
J	切换自动攻击 (Auto Attack)
U	切换闪烁模式 (Universe Flicker)
O	切换观察者模式 (Observer Mode)
T	切换雷达轨迹 (Radar Trail)
Alt	按住进行急转弯 (Tactical Turn)

鼠标控制

• 右键按住 + 拖拽：自由旋转视角（非攻击模式下）
• 点击飞船：选中目标查看详情
• 点击 UI 按钮：执行相应功能

游戏手柄支持 (Xbox/PS)

• 左摇杆：控制飞行方向 (Pitch/Yaw)
• 右摇杆：控制视角
• A 键 (Cross)：加速 (Boost)
• B 键 (Circle)：减速 (Brake)
• X 键 (Square)：切换攻击模式
• Y 键 (Triangle)：切换闪烁模式
• LB (L1)：按住急转弯
• D-Pad 上：雷达轨迹
• D-Pad 下：帮助菜单
• D-Pad 左：自动攻击
• D-Pad 右：观察者模式

游戏模式

1. 自由巡航模式（默认）

• 手动控制飞行方向和速度
• 自由探索宇宙空间
• 观察城市模型和星空背景

2. 攻击模式（按 H 激活）

• 自动锁定最近的飞船目标
• 准星显示目标方位
• 碰撞即摧毁目标飞船
• 显示实时攻击统计

3. 观察者模式（按 O 切换）

• 固定外部视角观察全局
• 右下角显示追踪视角画中画
• 适合录制和观赏

4. 闪烁模式（按 U 激活）

• 水滴变为幽灵形态（线框模式）
• 可穿越障碍物
• 适合高速追击场景

核心机制

舰队 AI 系统

• 紧急规避：首次被水滴撞击后触发警报与机动流程
• 战术机动：撞击后进入 30-60 秒随机倒计时，结束时全舰同步机动
• 编队飞行：100 艘战舰保持松散编队
• 碰撞检测：精确的球体碰撞计算

物理系统

• 惯性模拟：加速度和速度独立控制
• 闪烁视觉效果：闪烁模式下的曝光变化
• 轨迹追踪：实时显示水滴飞行轨迹
• 动态相机：速度越快，相机拉得越远

雷达交互

• 三视图切换：XZ（默认）、XY、YZ 投影可切换
• 平移缩放：拖拽平移视口，滚轮缩放（0.001-0.5）
• 悬停信息：悬停舰船显示名称和速度，放大时显示文本
• 轨迹开关：按 T 或右侧按钮记录/隐藏水滴轨迹
• 点击选取：在雷达上点击舰船可选中并同步 UI

视觉效果

• 选择性泛光：仅对发光物体应用 Bloom 效果
• 8x MSAA：消除几何边缘锯齿
• 体积粒子：使用自定义 Shader 实现的爆炸效果
• 各向异性过滤：消除远景纹理闪烁
• HDR 色调映射：ACES Filmic 电影级色彩

---

🏗️ 技术架构

技术栈

前端框架：    Three.js (r181)
构建工具：    Vite 7.2
桌面框架：    Electron 39.2
打包工具：    Electron Builder 26.0

项目结构

eto/
├── electron/              # Electron 主进程
│   └── main.cjs          # 应用入口和窗口管理
├── src/                   # 源代码目录
│   ├── main.js           # 场景初始化和主循环
│   ├── DropletController.js    # 水滴控制器
│   ├── FleetController.js      # 舰队管理器
│   ├── ExplosionController.js  # 爆炸特效控制器
│   ├── GUIManager.js           # UI 管理器
│   ├── SoundManager.js         # 音频管理器
│   └── style.css               # 样式表
├── public/                # 静态资源
│   ├── hdr/              # HDR 环境贴图（2K-12K）
│   ├── model/            # 3D 模型文件
│   ├── music/            # 背景音乐
│   ├── sound/            # 音效文件
│   └── logo/             # 启动画面资源
├── index.html            # 主 HTML 文件
├── vite.config.js        # Vite 配置
└── package.json          # 项目配置和依赖

核心模块设计

1. DropletController（水滴控制器）

负责水滴的所有行为逻辑：

• 输入管理：统一处理键盘、鼠标、手柄输入
• 物理更新：速度、位置、旋转的计算
• 相机跟随：实现电影级的追踪镜头
• 目标锁定：自动瞄准最近的敌舰
• 状态切换：攻击/闪烁/观察者模式管理
• 轨迹渲染：实时绘制飞行路径

核心方法：
- update(delta)          // 每帧更新
- updatePhysics(delta)   // 物理计算
- updateCamera(delta)    // 相机跟随
- toggleAttackMode()     // 切换攻击模式
- lockNearestTarget()    // 锁定最近目标

2. FleetController（舰队管理器）

管理 100 艘战舰的生命周期：

• 舰船生成：克隆优化基础模型
• 名称系统：使用真实的三体舰名
• 警报机制：首次撞击触发，随后倒计时
• 机动算法：集体规避和随机扰动
• 标签系统：3D 空间中的 2D 标签渲染
• 交互选择：点击选中查看详情
• 雷达显示：小地图上的舰队分布

核心方法：
- update(delta)          // 更新舰队状态
- updateShipMotion(ship, delta)  // 单舰运动
- alertFleet(threat)     // 发起警报
- startManeuver()        // 开始机动
- checkCollision(point, radius)  // 碰撞检测

3. ExplosionController（爆炸控制器）

处理所有爆炸和粒子效果：

• 阶段性爆炸：10 秒内多次爆发
• 体积粒子：软球体着色器
• 碎片系统：几何碎块飞散
• 加法混合：实现发光效果
• 生命周期管理：自动清理粒子

核心方法：
- triggerExplosion(craft, point)  // 触发爆炸
- createBurst(position, scale, color, velocity)  // 创建粒子爆发
- createDebris(position, count, baseVel)  // 生成碎片
- update(delta)  // 更新所有粒子

4. GUIManager（UI 管理器）

管理所有用户界面元素：

• 左侧面板：速度、状态、音乐控制
• 右侧面板：舰队统计、雷达、目标信息
• 帮助模态框：操作说明
• HUD 元素：准星、速度表、攻击统计
• 样式注入：科幻风格 CSS

核心方法：
- updateSpeed(speed, maxSpeed)  // 更新速度显示
- updateModeUI(attackMode, flickerMode)  // 更新模式指示
- updateRadar(ships, dropletPos)  // 更新雷达
- updateShipInfo(ship)  // 更新目标信息

5. SoundManager（音频管理器）

管理所有音频资源：

• 音效预加载：UI 点击、语音提示
• 音量控制：统一音量管理
• 播放方法：简化的调用接口

音效列表：
- click: UI_click.wav          // 按钮点击
- speaking: SpeakingBegin.wav  // 语音开始
- welcome: WelcomeTo.mp3       // 欢迎提示
- attack: AttackObj.mp3        // 攻击目标

渲染管线

项目采用多通道渲染架构：

场景内容
    ↓
[1] 原始渲染通道 (RenderPass)
    ↓
[2] 选择性泛光 (Selective Bloom)
    ├─ 暗化非发光物体
    ├─ Bloom Composer 渲染
    └─ 恢复原始材质
    ↓
[3] 混合通道 (ShaderPass)
    └─ 叠加 Bloom 纹理
    ↓
[4] 输出通道 (OutputPass)
    └─ 色调映射
    ↓
[5] 抗锯齿通道 (SMAAPass)
    ↓
[6] 观察者模式 PIP（可选）
    └─ 在右下角渲染追踪视角
    ↓
最终画面

优化策略

性能优化

• 实例化渲染：克隆共享几何体
• 纹理复用：避免重复加载
• 层级剔除：只对可见物体应用 Bloom
• 自适应分辨率：根据设备能力调整
• 各向异性过滤：提升远景质量而非提高分辨率

视觉优化

• 8x MSAA：消除几何边缘锯齿
• SMAA 后处理：进一步平滑画面
• HDR + 色调映射：更真实的光照
• 自定义粒子着色器：软边缘体积效果

加载优化

• 资源预加载：使用 LoadingManager
• 进度追踪：显示加载速度和总量
• 启动画面：Logo 淡入淡出动画

---

🎨 设计理念

视觉设计

色彩方案

• 主色调：青蓝色 (#00f3ff) - 代表三体文明的冷酷科技
• 辅助色：橙黄色 (#ffaa00) - 太阳和爆炸的温暖
• 背景：深空黑 (#000000) - 强调太空的孤寂

UI 风格

• 斜切变形：skewX() 创造未来感
• 毛玻璃效果：backdrop-filter: blur(10px)
• 发光边框：box-shadow 和 text-shadow
• Orbitron 字体：科幻感十足的等宽字体

3D 视觉

• 水滴设计：完美的银色镜面反射，象征绝对强度
• 光环特效：青色发光光环，标识三体科技
• 城市模型：人类文明的最后堡垒
• 星空背景：8K HDR 星空，营造宇宙深邃感

交互设计

反馈机制

• 视觉反馈：

  • 按钮 hover 效果
  • 模式切换时的闪烁
  • 碰撞时的爆炸特效
  • 速度变化的相机动画

• 听觉反馈：

  • UI 点击音效
  • 语音提示（攻击、欢迎）
  • 动态背景音乐

• 触觉反馈（手柄）：

  • 碰撞振动（待实现）
  • 加速振动（待实现）

信息层次

1. 关键信息：速度、模式状态（左上，大字体）
2. 战术信息：雷达、舰队统计（右上，中字体）
3. 辅助信息：FPS、光速百分比（角落，小字体）
4. 临时信息：倒计时、攻击提示（屏幕中央）

---

🎵 音效系统

背景音乐

项目内置三首科幻/史诗风格的背景音乐：

1. S.T.A.Y. - 《星际穿越》主题曲，渲染孤寂氛围
2. The Imperial March - 《星球大战》帝国进行曲，战斗氛围
3. The Philadelphia Orchestra - 《命运交响曲》古典交响乐，史诗感

播放机制：

• 随机播放（避免连续重复）
• 音乐面板显示当前曲目
• 支持暂停/播放和切换下一首
• 自动循环播放

音效清单

音效名称	文件	触发时机
UI 点击	UI_click.wav	点击任何按钮
语音开始	SpeakingBegin.wav	特定事件
欢迎提示	WelcomeTo.mp3	游戏启动
攻击目标	AttackObj.mp3	人类察觉水滴攻击倒计时声音

Web Audio API

使用 Three.js 的 Audio 和 AudioListener：

• 支持 3D 位置音效（待扩展）
• 音量独立控制
• 自动暂停/恢复机制

---

🚀 开发和部署

环境要求

• Node.js：>= 16.0.0
• npm：>= 8.0.0
• 操作系统：Windows / macOS / Linux

安装依赖

cd eto
npm install

开发模式

Web 开发（推荐）

npm run dev

访问：http://localhost:5173

局域网访问

npm run dev -- --host

或者已修改配置文件，直接运行 npm run dev 即可在局域网暴露。

Electron 开发

npm run electron:dev

同时启动 Vite 开发服务器和 Electron 窗口。

构建和打包

构建 Web 版本

npm run build

输出目录：dist/

可直接部署到任何静态服务器。

打包 Electron 应用

npm run electron:build

输出目录：release/

• Windows：release/ETO Droplet Setup 1.0.0.exe
• macOS：release/ETO Droplet-1.0.0.dmg（需要在 Mac 上构建）
• Linux：release/eto-droplet-1.0.0.AppImage（需要在 Linux 上构建）

配置说明

Vite 配置（vite.config.js）

export default defineConfig(({ command }) => ({
  base: command === 'build' ? './' : '/',  // 打包使用相对路径
  server: {
    host: true  // 局域网访问
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    emptyOutDir: true
  }
}));

Electron Builder 配置（package.json）

{
  "build": {
    "appId": "com.eto.droplet",
    "productName": "ETO Droplet",
    "directories": {
      "output": "release"
    },
    "files": [
      "dist/**/*",
      "electron/**/*",
      "package.json"
    ],
    "win": {
      "target": "nsis"
    }
  }
}

---

📊 游戏数据

舰船名单（部分）

项目包含 130 个真实的三体舰名：

汉号、马萨达号、侏儒号、杨臻号、炎帝号、努曼西亚号、
苏世黎号、鹤然号、海狼号、无限边疆号、安阳号...

完整列表见 src/FleetController.js

物理参数

参数	数值	说明
最大速度	3000 km/s	约 1% 光速（UI 上限）
加速度	约 50-100 km/s²	按住 Space 加速
转向速度	2.0 rad/s	W/A/S/D 控制
急转模式	瞬间转向	按住 Alt 预瞄，松开瞬间转向
舰船初始状态	静止	未被撞击前不机动
舰船机动加速度	0.05-0.30 km/s²	撞击后进入机动，可持续加速

碰撞系统

• 水滴半径：1.0 units
• 舰船半径：~20 units（根据模型自动计算）
• 检测算法：球体-球体距离判定
• 碰撞效果：舰船立即触发爆炸序列

舰队行为参数

参数	数值
舰队规模	100 艘
警报触发条件	首次被撞击触发
倒计时时长	30-60 秒（随机）
机动持续时间	倒计时结束后持续机动
编队间距	300 units
随机扰动强度	±50 units

---

🔧 常见问题

Q: 打包后资源加载失败？

A: 确保所有资源路径使用相对路径（不以 / 开头）。项目已修复此问题。

Q: FPS 较低怎么办？

A: 尝试以下方案：

1. 降低窗口分辨率
2. 关闭 Bloom 效果（需修改代码）
3. 减少舰船数量
4. 使用 2K 或 4K HDR 而非 8K

Q: 手柄无法识别？

A:

• 确保手柄已连接并被浏览器识别
• 按任意手柄按钮激活 Gamepad API
• 检查浏览器控制台是否有连接日志

Q: 音乐无法播放？

A:

• 首次需要用户交互（点击屏幕）才能播放
• 检查浏览器是否允许自动播放音频
• 确认音频文件路径正确

Q: 模型显示异常？

A:

• 确保 GPU 支持 WebGL 2.0
• 更新显卡驱动
• 检查浏览器硬件加速是否开启

---

📝 开发计划

已完成功能 ✅

• 基础飞行控制系统
• 舰队生成和管理
• 碰撞检测和爆炸效果
• 攻击模式和目标锁定
• 科幻风格 UI
• 音效和背景音乐
• 游戏手柄支持
• 观察者视角
• Electron 桌面应用打包
• 高质量渲染管线（Bloom + MSAA）

待完成功能 🚧

• 更多舰船模型和材质变体
• 粒子性能优化（GPU Instancing）
• 任务系统和关卡设计
• 成就系统
• 存档和读档
• 设置菜单（画质、音量）
• 多语言支持
• VR 支持

未来展望 🌟

• 多人联机模式
• 自定义关卡编辑器
• 更多三体宇宙场景（黑暗森林、智子等）
• 物理武器系统（舰队反击）
• 叙事模式（配音和过场动画）

---

🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

开发规范

• 遵循 ES6+ 语法
• 使用有意义的变量名和注释
• 保持代码模块化
• 测试后再提交

提交信息格式

<type>(<scope>): <subject>

feat: 新功能
fix: 修复 Bug
docs: 文档更新
style: 代码格式
refactor: 重构
perf: 性能优化
test: 测试
chore: 构建/工具

---

📜 版权声明

代码许可

本项目代码部分采用 MIT 许可证。

资源版权

• 三体 IP：刘慈欣及相关版权方所有
• 背景音乐：版权归原作者所有，仅供学习使用
• 3D 模型：自制或使用 CC0 许可的资源

本项目仅供学习和技术交流，不得用于商业用途。

---

🙏 致谢

• 刘慈欣 - 《三体》原著作者
• Three.js 团队 - 优秀的 3D 图形库
• Vite 团队 - 快速的构建工具
• Electron 团队 - 跨平台桌面应用框架

---

📧 联系方式

如有问题或建议，欢迎联系：

• GitHub Issues: 项目 Issues 页面

---

_{给三体世界一个答案
Made with ❤️ and Three.js}