In a previous article "Maptalks: An Open-Source Alternative to Cesium for Geospatial Visualization", we introduced maptalks as an alternative framework to Cesium. Recently, we discovered another open-source 2D/3D engine: three-tile. Designed for lightweight implementation with ongoing functional improvements, it already meets significant development demands. Here is a brief introduction.

Introduction to three-tile

three-tile is an open-source lightweight frontend 3D tile framework developed with TypeScript based on threejs. It provides a 3D terrain model, enabling seamless integration of 3D tile maps into applications. Essentially, it leverages Three.js to load 3D spatial data, achieving functionality similar to Cesium.

Official Website:
https://sxguojf.github.io/three-tile-doc/

GitHub Repository:
https://github.com/sxguojf/three-tile

Core Features

1. Core Mapping Capabilities

  • Map Creation & Management: Supports map creation, property configuration, method invocation, and event monitoring.
  • Coordinate Systems: Provides conversions between longitude/latitude, Web Mercator, scene coordinates, and more.
  • 3D Scene Configuration: Supports fully customizable 3D scenes.
  • Framework Integration: Seamlessly integrates with frontend frameworks like Vue.js.
  • Map Controls: Adjusts zoom levels, center positions, and display boundaries.
  • Controller Switching: Switches camera controllers for varied interaction needs.
  • Model Support: Adds geometric models, custom icons, and ground overlay images.
  • UI Components: Includes compasses, watermarks, CSS2D billboards, etc.

2. Data Loading & Integration

  • Custom Data Sources: Connects to user-defined tile data sources (e.g., Mapbox, ArcGIS).
  • Multi-Format Support: Compatible with vector data, 3D models, terrain data, and WMS services.
  • Administrative Maps: Displays regional administrative boundaries.

3. Visual Effects & Scene Enhancement

  • Terrain Operations: Supports terrain exaggeration (amplifying elevation scales) and excavation (surface cutting).
  • Environmental Rendering: Implements dynamic skyboxes, realistic water effects, and volumetric shadows.
  • Map Projections: Transforms flat maps into 3D spherical displays.
  • Visual Effects: Applies CSS filters and custom shaders for unique styles.

Quick Start

Installation

Via npm:

npm i three -S
npm i three-tile -S

In projects:

import * as THREE from "three";
import * as tt from "three-tile";
import * as plugin from "three-tile/plugin";

Via Script:

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.171.0/build/three.module.js",
      "three-tile": "https://unpkg.com/three-tile@0.11.8/dist",
      "three-tile-plugin": "https://unpkg.com/three-tile@0.11.8/dist/plugin"
    }
  }
</script>
import * as THREE from "three";
import * as tt from "three-tile";
import * as plugin from "three-tile-plugin";

Minimal Example

import * as THREE from "three";
import * as tt from "three-tile";
import * as plugin from "three-tile-plugin";

// Create a map
const map = tt.TileMap.create({
  // Imagery data source
  imgSource: new plugin.ArcGisSource(),
  // Terrain data source
  demSource: new plugin.ArcGisDemSource(),
});
// Rotate the map to the XZ plane
map.rotateX(-Math.PI / 2);

// Initialize the scene
const viewer = new plugin.GLViewer("#map");
// Add the map to the scene
viewer.scene.add(map);

Output:

Conclusion

While three-tile currently lacks some advanced features compared to Cesium, it excels in specific scenarios:

  • Lightweight Web 3D Geovisualization: Ideal for smart cities or terrain展示.
  • Performance-Sensitive Applications: Compatible with low-end devices and large-scale 3D rendering.
  • Highly Customized Tile Processing: Flexible pipeline customization.

Overall, three-tile delivers exceptional fluidity and offers a viable lightweight alternative to Cesium and maptalks. For projects prioritizing agility and customization, it is highly recommended.