Installation Threebox can be installed in three different ways depending on your project setup and preferences. Choose the method that best fits your workflow.
npm Package The recommended way to install Threebox is via npm. This is ideal for modern JavaScript projects using bundlers like Webpack, Vite, or Rollup.
Install the package
Install the threebox-plugin package from npm: npm install threebox-plugin
Import in your code
Import the Threebox object in your JavaScript file: ES6 Import
Alternative Path
import { Threebox } from 'threebox-plugin' ;
The import path may vary depending on your JavaScript framework, bundler, or wrapper. If you encounter issues, try the alternative path shown above.
Import the CSS (optional)
If you want to use Threebox’s predefined styles for tooltips and labels: import 'threebox-plugin/dist/threebox.css' ;
CDN (Public Hosting) For quick prototyping or simple projects, you can load Threebox directly from a CDN. This doesn’t require any build tools or npm installation.
jsDelivr jsDelivr requires specifying the version in the URL. Replace v.2.2.2 with your desired version.
<! DOCTYPE html > < html > < head > <!-- Mapbox GL JS --> < link href = "https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel = "stylesheet" > < script src = "https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js" ></ script > <!-- Threebox --> < script src = "https://cdn.jsdelivr.net/gh/jscastro76/[email protected] /dist/threebox.min.js" ></ script > < link href = "https://cdn.jsdelivr.net/gh/jscastro76/[email protected] /dist/threebox.css" rel = "stylesheet" /> </ head > < body > <!-- Your map container --> </ body > </ html >
unpkg unpkg can be used with or without a version number. If omitted, it will always download the latest published version.
Latest Version
Specific Version
<!-- Automatically loads the latest version --> < script src = "https://unpkg.com/threebox-plugin/dist/threebox.min.js" ></ script > < link href = "https://unpkg.com/threebox-plugin/dist/threebox.css" rel = "stylesheet" />
When using CDN links in production, it’s recommended to specify a version number to ensure consistency and avoid breaking changes from automatic updates.
Local Bundle For maximum control and offline development, you can download the bundle files directly and host them yourself.
Download the bundle
Download the files from the GitHub repository:
Add to your project
Place the files in your project directory and include them in your HTML: <! DOCTYPE html > < html > < head > <!-- Mapbox GL JS --> < link href = "https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel = "stylesheet" > < script src = "https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js" ></ script > <!-- Threebox (local) --> < script src = "../dist/threebox.js" ></ script > < link href = "../dist/threebox.css" rel = "stylesheet" /> </ head > < body > < div id = "map" ></ div > </ body > </ html >
Ensure the src and href attributes point to the correct relative or absolute path where you saved the files.
Azure Maps Setup Threebox also works with Azure Maps. Simply replace the Mapbox GL JS references with Azure Maps:
<! DOCTYPE html > < html > < head > <!-- Azure Maps --> < link rel = "stylesheet" href = "https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" /> < script src = "https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js" ></ script > <!-- Threebox --> < script src = "https://unpkg.com/threebox-plugin/dist/threebox.min.js" ></ script > < link href = "https://unpkg.com/threebox-plugin/dist/threebox.css" rel = "stylesheet" /> </ head > < body > < div id = "map" ></ div > </ body > </ html >
Verify Installation To verify that Threebox is installed correctly, check that the Threebox constructor is available:
// After importing import { Threebox } from 'threebox-plugin' ; console . log ( typeof Threebox ); // Should output: 'function'
The current stable version is 2.2.7 . You can check the npm package page for the latest release, or view the changelog for detailed version history.
For npm installations, you can check your installed version with: Next Steps Now that you have Threebox installed, proceed to the Quick Start guide to create your first 3D map with interactive objects.