sxguojf/three-tile
sxguojf/three-tile has 399 GitHub stars and 65 forks. GitHot measured 0 stars in 24 hours and +1 in 7 days. Last checked 2026-11-09 07:29 UTC. Last push 2026-08-26.
A lightweight 3D tile map using threejs. 基于threejs的三维瓦片地图框架
可以做什么
- Lightweight - Under 70KB (zip: 28KB) after bundling (excluding plugins), easy to integrate
- Fast - Resource usage optimized to the extreme, low memory footprint, fast rendering, integrated graphics can easily achieve 60fps
- Few Dependencies - Only one external dependency: threejs , all features self-implemented
- Easy to Extend - Plugin-based architecture, tile data loading, parsing, modeling, and rendering are all independent from core
实测星标增长
- 24小时
- 0
- 7天
- +1
- 15天
- 更新延迟
- 1个月
- 更新延迟
各周期内的星标净变化，周期相互重叠，并非每日新增。缺失的测量保持空白。星标代表关注度，不代表软件质量。
README_CN.md
原文three-tile
轻量级三维瓦片地图开发框架
一、简介
three-tile 是一个开源的轻量级前端三维瓦片框架，基于 threejs 使用 TypeScript 开发，提供三维地形模型，能轻松给你的应用增加三维瓦片地图。经过数十版迭代，框架功能、效果能够满足生产环境使用，已在多个项目中得到验证和应用。
three-tile 更像是游戏开发中的 LOD 地形，但它可以使用地图服务商提供的数据渲染地图。
::: warning 免责声明 本框架不含任何地图数据，示例和演示程序中使用的地图均为直接挂接第三方数据，并不代表本开发框架立场。开发者请遵循相关法律规定使用合法地图。 :::
https://sxguojf.github.io/demo/
二、特性
| 特性 | 说明 |
|---|---|
| 轻量级 | 打包后（不包括插件）不到70KB（zip：28KB），轻松集成到你的项目中 |
| 速度快 | 资源占用做到极致优化，内存占用少，渲染速度快，核显也能轻松达到60fps |
| 依赖少 | 仅 threejs 一个外部依赖，各项功能均自主实现 |
| 易扩展 | 插件式架构，瓦片数据加载、解析、建模、渲染过程均与核心独立，扩展性强 |
| 使用简单 | 熟悉 threejs 基本上没有学习成本 |
三、应用场景
1. 给现有应用增加地形
在 threejs 示例中，大部分简单应用使用一个平面作为地面，如果能把平面换为真实地形，效果立马提升。
2. 简单的 WebGIS
three-tile 地图模型可直接使用主流瓦片数据源，渲染出逼真的地形；提供地理坐标（经纬度海拔高度）到三维场景坐标的转换，能将地图元素（模型、标签）叠加在指定地理位置。
3. 游戏开发
完美支持 threejs 内置的各种控制器，仅更换控制器，即可实现第一人称、飞行等游戏功能。
4. 数据可视化
大气、卫星云图、风场动画、体渲染等数据可视化场景。
四、快速开始
安装
npm 方式引入
npm i three -S
npm i three-tile -S
Script 方式引入
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three-tile": "https://unpkg.com/[email protected]/dist",
"three-tile/plugin": "https://unpkg.com/[email protected]/dist/plugin"
}
}
</script>
使用
- 定义地图数据源
- 创建地图模型
- 地图模型加入三维场景
import * as THREE from "three";
import * as tt from "three-tile";
import * as plugin from "three-tile/plugin";
// 创建地图
const map = tt.TileMap.create({
// 影像数据源
imgSource: new plugin.ArcGisSource(),
// 地形数据源
demSource: new plugin.ArcGisDemSource(),
});
// 地图旋转到xz平面
map.rotateX(-Math.PI / 2);
// 初始化场景
const viewer = new plugin.GLViewer("#map");
// 地图添加到场景
viewer.scene.add(map);
五、地图数据源支持
内置支持主流瓦片地图服务：
- ArcGIS
- Mapbox
- Bing
- 天地图
- 高德
- 腾讯
支持自定义瓦片数据源扩展。
六、API 文档
七、应用
基础
示例
| 分类 | 示例 |
|---|---|
| 基础功能 | 获取鼠标位置 · 获取加载信息 · 设置地图缩放 · 自定义地图源 |
| 地图显示 | 假地球 · 指南针 · 限制相机高度 · 天空盒 |
| 地形控制 | 添加网格 · 地形缩放 · 限制平移 · 设置地图边界 |
| 材质效果 | 添加阴影 · CSS滤镜 · 添加天空 · 添加水面 |
| 数据叠加 | GeoJSON · MVT · WMS源 · CSS2D标签 |
| 模型加载 | 添加模型 · 图标标注 · Logo标注 · 白色模型 |
| 地形特效 | 蒙版 · 单张DEM · 单张影像 · 创建孔洞 · 多边形孔洞 |
| 场景配置 | 背景 · 切换控制器 · 地面组 · 2D地图 |
| 高级应用 | 非地图瓦片 · 3DTiles渲染 · SplatLuma · SplatDrei |
应用案例
| 案例 | 说明 |
|---|---|
| 第一人称 | 第一人称视角漫游 |
| 飞行控制 | 自由飞行模式 |
| 行走漫游 | 地面行走漫游 |
| 卫星云图渲染 | 三维云图展示 |
| 等高线 | 地形等高线 |
| 大气效果 | 大气渲染效果 |
| GeoJSON 3D | GeoJSON三维建筑物展示 |
八. 参考
- https://threejs.org/
- https://github.com/CesiumGS/cesium
- https://github.com/mapbox/mapbox-gl-js
- https://leafletjs.com
- https://github.com/tentone/geo-three
- https://github.com/ebeaufay/threedtiles
- https://github.com/NASA-AMMOS/3DTilesRendererJS
- https://github.com/wlgys8/GPUDrivenTerrainLearn
- https://github.com/lijundacom/LeoGPUDriven
- https://github.com/mapbox/martini
- https://github.com/visgl/loaders.gl/blob/master/modules/terrain/src/lib/helpers/skirt.ts