Skip to main content
Threebox includes over 20 examples demonstrating different features and capabilities. These examples range from simple sphere rendering to complex animations, 3D models, and interactive features.

​
Getting Started

​
Basic Examples

01 - Basic Sphere

The simplest Threebox use case - rendering a single sphere with mouse events

02 - Line Arcs

Create line arcs from a central point to multiple destinations

03 - Tube Geometry

Spiral tube geometry with selection, dragging, and rotation capabilities

04 - Mercator Projection

100 spheres around the world demonstrating height calculations based on latitude

​
3D Models & Animation

05 - Logistics Truck

Animated truck following paths from the Mapbox Directions API

06 - 3D GLB Model

Load and display a 3D GLB model (soldier) on the map

11 - Animation

Combine embedded model animations with Threebox path animations

12 - Add 3D Model

Replica of Mapbox’s example with real sunlight and shadows

​
Interaction & Selection

09 - Raycaster

Advanced raycasting with selection, dragging, and rotation of 3D objects

08 - 3D Buildings

Select and interact with fill-extrusion building layers

18 - Extrusions

Create custom extrusions from Vector2 points and GeoJSON

​
Advanced Features

13 - Eiffel Tower

Landmarks with real sunlight positioning and dynamic shadows

14 - Building Shadows

Real sunlight and shadows on fill-extrusion buildings

15 - Performance

Performance test with up to 1000 objects in a single layer

16 - Multi Layer

Multiple layers with different zoom ranges and resource optimization

​
Map Integration

07 - Alignment Test

Camera perspective and depth alignment with fill-extrusions

10 - Style Change

Change map styles without affecting 3D objects

17 - Azure Maps

Use Threebox with Azure Maps instead of Mapbox

19 - Fixed Zoom

Fixed scale objects that preserve size at specific zoom levels

​
Interactive Experiences

20 - Game

Simple driving game with WASD controls and collision detection

21 - Terrain

3D models automatically adapting to terrain layers

21 - Multi Floor

Indoor mapping with multiple floor levels

​
Example Details

​
Basic Sphere

File: 01-basic.html The simplest Threebox example showing:
  • Basic Threebox initialization
  • Creating a sphere geometry
  • Mouse over/out events
  • Positioning objects at coordinates

​
Line Arcs

File: 02-line.html Demonstrates line creation with:
  • 50 randomly generated line arcs
  • Color based on latitude
  • Random widths
  • Arc elevation calculations

​
Tube Geometry

File: 03-tube.html Shows advanced object interactions:
  • Spiral tube geometry
  • Built-in object selection (enableSelectingObjects)
  • Drag and move with [Shift] key (enableDraggingObjects)
  • Rotation with [Alt] key (enableRotatingObjects)
  • Altitude tooltips (enableTooltips)
  • Help labels for interactions

​
Mercator

File: 04-mercator.html Illustrates mercator projection effects:
  • 100 spheres at identical heights
  • Visual differences based on latitude
  • Global distribution

​
Logistics

File: 05-logistics.html Animated truck example featuring:
  • Loading OBJ/GLB 3D models
  • Mapbox Directions API integration
  • Path following animation with followPath()
  • ObjectChanged event handling
  • Dynamic line rendering

​
Object3D

File: 06-object3d.html Basic 3D model loading:
  • GLB format support
  • Soldier model display
  • Model positioning

​
Alignment Test

File: 07-alignmentTest.html Tests camera alignment:
  • Fill-extrusion depth perspective
  • Object3D camera alignment
  • Atmospheric sky layer (sky: true)

​
Buildings

File: 08-3dbuildings.html Interactive building features:
  • Fill-extrusion selection (enableSelectingFeatures)
  • Building tooltips
  • Feature change events
  • Dynamic FOV adjustment
  • Mapbox popup comparison

​
Raycaster

File: 09-raycaster.html Comprehensive raycasting demo:
  • Select buildings and 3D objects
  • Drag objects with [Shift] (translation) and [Ctrl] (altitude)
  • Rotate objects with [Alt]
  • Custom tooltips and labels
  • FOV and camera mode switching
  • Embedded model animations

​
Style Change

File: 10-stylechange.html Demonstrates style management:
  • Change map styles dynamically
  • Preserve 3D objects using tb.setStyle
  • Maintain layer state

​
Animation

File: 11-animation.html Combines multiple animation types:
  • Embedded GLB animations (soldier running)
  • Threebox path animations
  • Click-to-move functionality
  • Interactive controls (wireframe, play/pause)
  • Event listeners for all object states

​
Add 3D Model

File: 12-add3dmodel.html Advanced lighting and shadows:
  • Real sunlight positioning (realSunlight: true)
  • Cast shadows on models (castShadow: true)
  • Atmospheric sky layer
  • Dynamic time-based lighting (setSunlight())
  • Automatic day/night style switching
  • Interactive time slider

​
Eiffel

File: 13-eiffel.html Landmark visualization:
  • Eiffel Tower and Statue of Liberty models
  • Real-time sun position calculation
  • Shadow rendering on landmarks
  • Satellite imagery background
  • Sun times API integration

​
Building Shadows

File: 14-buildingshadow.html Fill-extrusion shadows:
  • Building shadow rendering (tb.setBuildingShadows)
  • Real sunlight on buildings
  • Day/night transitions

​
Performance

File: 15-performance.html Performance testing:
  • Up to 1000 objects
  • Stats.js integration
  • Single layer optimization
  • FPS monitoring

​
MultiLayer

File: 16-multilayer.html Multiple layer management:
  • Dynamic layer creation
  • Zoom range per layer (setLayoutZoomRange)
  • Multi-layer mode (multiLayer: true)
  • Resource optimization with single render call
  • Layer visibility controls

​
Azure Maps

File: 17-azuremaps.html Azure Maps integration:
  • Atlas Map Control setup
  • Space Needle model
  • Satellite style
  • Shadow casting
  • Compatible Threebox API

​
Extrusions

File: 18-extrusions.html Custom extrusion creation:
  • Star shape from Vector2 array
  • GeoJSON feature extrusion
  • Complex geometry handling

​
Fixed Zoom

File: 19-fixedzoom.html Fixed scale objects:
  • Preserve visual size at zoom levels
  • Camera panning to object
  • Dynamic zoom level adjustment
  • ObjectChanged event for map.panTo

​
Game

File: 20-game.html Interactive driving game:
  • WASD keyboard controls
  • Speed and inertia settings
  • Building collision detection
  • Dynamic building highlighting
  • Fill-extrusion interaction

​
Terrain

File: 21-terrain.html Terrain integration:
  • Mapbox terrain layers (terrain: true)
  • Automatic height adaptation
  • Glacier models
  • Terrain-synced sunlight
  • Sky layer synchronization

​
Multi Floor

File: 21-multifloor.html Indoor mapping:
  • Multiple floor levels
  • Floor switching
  • Indoor positioning

​
Running Examples

All examples require a configuration file:
  1. Copy config_template.js to config.js
  2. Add your Mapbox access token (or Azure Maps subscription key)
  3. Open the HTML file in a web browser
// config.js
var config = {
  accessToken: 'YOUR_MAPBOX_TOKEN',
  subscriptionKey: 'YOUR_AZURE_KEY' // for Azure Maps examples
}
All examples use Mapbox GL JS v2.2.0 and include Stats.js for performance monitoring.

​
Common Features

Many examples share these capabilities:
  • Selection: Click to select objects and buildings
  • Dragging: [Shift] + drag for translation, [Ctrl] + drag for altitude
  • Rotation: [Alt] + drag for vertical axis rotation
  • Tooltips: Automatic tooltips on hover
  • Animations: Built-in and custom animations
  • Shadows: Real-time shadow rendering
  • Sunlight: Accurate sun positioning by date/time

​
Next Steps

Basic Setup

Learn how to set up your first Threebox project

3D Models

Load and configure 3D models

Animations

Create path-based and embedded animations

Interactions

Enable selection, dragging, and rotation

Build docs developers (and LLMs) love

Get started for freeTalk to us