这篇文章分享一个用 three-tile 渲染真实地形的 3D 演示：坦克在山地中巡逻并实时锁定最近的无人机，显示坦克行驶轨迹与炮弹弹道预测。坦克、无人机用简单几何体示意。

先看效果

打开页面后会看到：一座真实的山地。坦克趴在坡上沿椭圆路线慢悠悠巡逻，身后拖着金色轨迹记录它走过的每个坑洼；天上几架无人机在绕圈飞，坦克每隔几秒锁定最近的一架。炮口甩出一道青色虚线——弹道预测——随后一枚黄色炮弹沿弧线飞出，命中瞬间炸开橙色闪光。其实，

当然了实际要先等地图加载出来才能看到。

坦克和无人机都是几何体凑的。仅作示意，别当军事模拟，真正想聊的是地形那块。

既然要做可视化。地形如果仍然是平面糊弄，那也太没意思了。直接拉取真实地形，

说到地形，本来最头大。结果几行就搞定

使用者痛点：做“真实地形”这四个字，从前最劝退我。自己搞高程数据、瓦片切分、LOD 分层、墨卡托坐标反算、法线重算…，一套下来热情就没了。

后来我发现 three-tile——一个基于 Three.js 的 3D 瓦片地形引擎。它只要给它一个影像源和一个高程源剩下瓦片加载、LOD、坐标转换全包了。其实，

import * as plugin from "three-tile/plugin";// 影像源 + 高程源，这里用 ArcGIS
const imgSource = new plugin.ArcGisSource({
从url来看。"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/",});const demSource = new plugin.ArcGisDemSource({
说到url。"https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer/tile/",});// 给个中心经度，开个最小层级，地图就出来了
const map = plugin.TileMap.create({
imgSource。demSource,lon0: 116.4,// 场景中心经度
minLevel: 5,});map.rotateX，// 转到 xz 平面y 朝上，与 Three.js 坐标系一致
scene.add;// 主循环里每帧一句，LOD / 瓦片调度全自动
map.update;

就这些。至于你没看错，地形起伏、瓦片按需加载、远处降级，全由库管。只要把 map 加进 scene 就能安心摆放你的坦克。

使用者痛点：坐标互转一直是难点。three-tile 把这块做到极致：

const world = map.geo2world;话说回来，// 经纬度 → 世界坐标
const geo = map.world2geo;// 世界坐标 → 经纬度

使用者痛点：贴地取高度常常需要自行采样高程图并插值，而这里只需一句话：

const geo = map.world2geo;const info = map.getLocalInfoFromGeo;const groundY = info.location.y;// 脚下地形高度，可直接用于贴地

"本来以为要写一堆代码。 却只用了库的一行 API" 的感觉，会在后面的实现里反复出现。

坦克与行驶轨迹

有了地形，就可以做一个简易坦克模型：身子+ 炮管+ 履带。主要是让它趴在山坡上巡逻,而不是漂浮在空中。

// 巡逻方法：以场景中心为基准的椭圆
const lon = lon0 + rx * Math.cos;const lat = lat0 + ry * Math.sin;const world = map.geo2world);const info = map.getLocalInfoFromGeo);tank.group.position.set(
world.x。info.location.y + tank.alt,// 加一点高度避免穿模
world.z
);按理说，// 朝向用前后两点算，让炮管指向前进方向

行驶轨迹只需把每帧位置喂给一条累加的 LineGeometry。再渲染金色线条：

trailPoints.push;trail.geometry.setFromPoints;

无人机

无人机一样是盒子加四根细圆柱做旋翼。话说回来，它们飞在「贴地高度 + 巡航高度」上。各自沿不同圆环轨道飞行，为坦克提供最近目标锁定对象。

炮弹弹道预测

This is visual highlight. 坦克锁定最近无人机后根据水平距离 d。重力 g,和设定的顶点高度 h,逆推初速度 . 用抛物线采样得到青色虚线作为预测轨迹，接下来发射黄色实弹沿同方法飞去。

// 已知水平距离 d、重力 g、顶点高度 h，反解初速度 v0
const v0 = Math.sqrt / )));/* 根据 v0 在抛物线上采样若干点 → 青色虚线 */

实弹沿一样采样点移动，到达目标时播放橙色闪光特效。注意，这种简化模型假设目标静止；如果想真正命中移动无人机，需要提前预测其轨迹或使用可控导弹。

为什么选择 three-tile，而不是 Mapbox / Cesium？

• Mapbox：
  • Lighter。自带 custom three.js layer.
  • Pain point: 文档稀少、社区小，一旦遇到坑很难搜到答案；功能是版三维能力，不够自由灵活。
• Cesium：
  • The powerhouse: 全球级别 DEM、时间轴、多影像格式等.
  • Pain point: 重量级。引擎独立，需要桥接 WebGL 上下文或双 canvas，同 Three.js 融合成本高。
• • Pure Three.js extension – 地形只是普通 Mesh，你可以随意往场景里添加任何对象.
  • Pain point solved: 坐标互转、贴地取高、一键 LOD 全自动。无需自行实现繁杂流程.

If you already work with Three.js and need realistic terrain without pulling a whole GIS engine,three‑tile hits that sweet spot.

收尾 & 顺便安利一下 🚀

Tank vs drone 本身技术含量不高：几何体拼装、轨迹记录、抛物线求解都很基础。真正省力的是地形处理**——**原本让我望而却步的瓦片、高程、LOD。都被 three‑tile 用几行代码搞定，而且坐标互转和贴地取高只有一句话。

If you’re building digital twins,GIS‑related visualizations or any Three.js project that needs real‑world terrain。strongly recommend checking out **three‑tile**. It’s not a toy demo;it handles tile scheduling,DEM fetching,multi‑source support out of box with a minimal API surface.

The link is in comments – grab it if you’re interested. Once you get used to it。you’ll realize those “terrain is hard” mental blocks were just missing right wheel.