threebox

Threebox is an open-source JavaScript library that enables the rendering of three-dimensional graphics from the Three.js ecosystem within Mapbox maps. It provides a bridge between Three.js, a general 3D rendering library, and Mapbox GL JS, a web mapping framework, allowing developers to place and manipulate 3D objects in geographic space with correct alignment to the map.

Core features include support for placing 3D meshes and models at geographic coordinates, extruded geometries, and basic lighting. It manages the projection and synchronization of a Three.js scene with the Mapbox camera and transform, so objects respond to pan, zoom, and tilt. It also supports loading external 3D assets and applying materials and lighting to achieve realistic visualization.

The library is designed for web mapping use cases such as architectural visualization, urban planning, game-like map experiences, and interactive demonstrations. It is typically used by initializing a Threebox instance with a Mapbox map, creating a Three.js scene, adding objects, and updating the scene on each render frame to reflect changes in map state.

As an open-source project, Threebox has a community-driven development model with contributors who maintain compatibility with Mapbox GL JS versions and Three.js. Documentation and examples are commonly hosted on its GitHub repository, enabling developers to review API usage, tutorials, and best practices.