Skip to main content

​
Welcome to Threebox

Threebox is a Three.js plugin for Mapbox GL JS and Azure Maps using the CustomLayerInterface feature. It provides convenient methods to manage objects in lnglat coordinates, and synchronizes the map and scene cameras seamlessly.

​
Key Features

Multiple 3D Format Support

Load 3D models in FBX, GLTF/GLB, Collada, and OBJ/MTL formats with built-in support for animations and materials.

Interactive Objects

Built-in support for mouse over/out events, object selection, drag & drop, rotation, and wireframe modes with pixel-precision raycasting.

Real Sunlight & Shadows

Realistic sun positioning based on datetime and coordinates, with built-in shadows and sky layer synchronization.

Advanced Animations

Combine embedded model animations with custom transformations (translate, rotate, scale) using the AnimationManager.

GeoJSON Extrusions

Create 3D extruded shapes from GeoJSON features or point arrays with full styling control.

Performance Optimized

Efficient caching system and multi-layer support to render thousands of objects smoothly.

​
What Makes This Fork Special

This fork builds on the amazing work from @peterqliu with significant enhancements:
  • Updated to Three.js r132 with Mapbox GL JS v2.2.0 and Azure Maps v2.0.31
  • 20+ examples showcasing all features
  • Enhanced camera optimization for pixel-precision raycasting and depth synchronization
  • Multi-layer and multi-floor design support
  • Customizable FOV and orthographic view options
  • CSS2D labels and rich HTML tooltips
  • Style change support while preserving 3D objects
  • Terrain layer compatibility with automatic height adaptation

​
Use Cases

Display buildings, landmarks, and urban planning projects with realistic lighting and shadows at any location on Earth.
Animate vehicles, drones, or packages along routes with real-time position updates and interactive controls.
Create driving games, flight simulators, or location-based experiences with WASD controls and physics interactions.
Extrude 3D charts, heatmaps, and statistical data from GeoJSON with custom heights, colors, and animations.

Installation

Get started with npm, CDN, or local bundle installation

Quick Start

Build your first 3D map in minutes with a complete example

Examples

Explore 20+ examples on GitHub

​
Browser Compatibility

Threebox requires WebGL support and works in all modern browsers. For the best experience, use the latest version of Chrome, Firefox, Safari, or Edge.

​
Dependencies

  • Three.js r132 (bundled into the Threebox build)
  • Mapbox GL JS v1.11.1+ or v2.0.1+ (some features like sky layers require v2.0.1+)
  • Azure Maps v2.0.31 (for Azure Maps integration)

​
Community & Support

Check out the changelog to see what’s new in the latest release.

Build docs developers (and LLMs) love

Get started for freeTalk to us