# tank-drone-three-tile

**Repository Path**: withoutRock/tank-drone-three-tile

## Basic Information

- **Project Name**: tank-drone-three-tile
- **Description**: 在three-tile地形进行坦克无人机演戏。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-04
- **Last Updated**: 2026-08-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 坦克打无人机 · 3D 可视化（three-tile 地形）

一个用 **three-tile** 渲染真实地形的 3D 演示：坦克在山地中巡逻并实时锁定最近的无人机，
显示**坦克行驶轨迹**与**炮弹弹道预测**（抛物线虚线 + 发射命中特效）。坦克、无人机先用
简单几何体示意。

## 功能

- **three-tile 真实地形**：ArcGIS 影像 + DEM 高程瓦片，地形有真实起伏。
- **坦克行驶轨迹**：金色线条实时记录坦克走过的路径（贴地）。
- **炮弹弹道预测**：青色虚线抛物线，由炮口解算到目标的弹道（含重力），
  默认每 3.2 秒发射一枚炮弹沿弧线飞行并触发命中闪光。
- **几何体示意**：坦克（车身+炮塔+炮管+履带）、无人机（机身+4 旋翼）。
- **交互面板**：暂停/继续、复位视角、清除轨迹、开关轨迹/预测、调速；右上角状态 HUD；左下角图例。

## 运行

本项目用 `index.html` 里的 **importmap** 从 CDN 加载 `three` 与 `three-tile`，
**无需 `npm install`**，但需要浏览器能访问外网（CDN + ArcGIS 瓦片）。

任选一种方式启动本地静态服务器，然后打开提示的地址：

```bash
# 方式一：内置零依赖服务器（推荐）
node server.mjs
# 或
npm run dev

# 方式二：Python
python3 -m http.server 5173

# 方式三：npx
npx serve -l 5173
```

打开 http://localhost:5173 即可。鼠标左键拖拽旋转、右键平移、滚轮缩放。

> 若浏览器无法访问 ArcGIS 瓦片（断网/被墙），地形会退化为平面，坦克与无人机仍按
> 几何示意正常运动，弹道预测照常显示——演示逻辑不受影响。

## 切换到其它地形数据源

地形数据源在 `src/terrain.js` 里配置。three-tile 内置 ArcGIS / Mapbox / Bing / Google /
天地图 / 高德 / 腾讯 等。例如改用天地图（需 token）：

```js
import * as plugin from "three-tile/plugin";
const map = tt.TileMap.create({
  imgSource: new plugin.TiandituSource({ token: "你的tk" }),
  demSource: new plugin.TiandituDemSource({ token: "你的tk" }),
  lon0: 90,
});
```

## 目录结构

```
tank-drone-visualization/
├── index.html          # 入口 + importmap + 控制面板/图例/HUD
├── server.mjs          # 零依赖静态服务器
├── package.json
├── README.md
└── src/
    ├── config.js       # 场景中心、路径、颜色、仿真参数
    ├── viewer.js       # renderer/scene/camera/OrbitControls/光照/天空
    ├── terrain.js      # three-tile 地形（ArcGIS 影像 + DEM）
    ├── actors.js       # Tank / Drone 几何体 + 运动 + 贴地
    ├── trail.js        # 坦克行驶轨迹（Line 累积）
    ├── ballistics.js   # 炮弹弹道预测 / 发射 / 命中特效
    ├── util.js         # 地形高度采样（world→geo→getLocalInfoFromGeo→localToWorld）
    ├── ui.js           # 控制面板交互 + HUD
    └── main.js         # 装配与主循环
```

## 弹道解算说明（src/ballistics.js）

给定炮口 `P0` 与目标 `T`，重力沿 `-y`、大小 `g`：

- 顶点高度 `apex = min(apexMax, max(200, 水平距离 × 比例))`
- 飞行时间 `t = √(8·apex / g)`
- 初速度 `v0 = (T − P0)/t − ½·g⃗·t`（保证恰好命中目标）
- 沿 `P(s) = P0 + v0·s + ½·g⃗·s²` 采样出预测弧线，并驱动炮弹飞行

飞行过程中不再重算弹道，避免炮弹乱飞；命中时在目标处播放橙色闪光。