Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jscastro76/threebox/llms.txt

Use this file to discover all available pages before exploring further.

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