@ecogis/gis-threebox-plugin NPM

`Threebox`

npm

A Three.js plugin for Mapbox GL JS and Azure Maps using the CustomLayerInterface feature. Provides convenient methods to manage objects in lnglat coordinates, and to synchronize the map and scene cameras.

Latest release

GitHub Release Date
Latest code release is , please review the Change log for more details.

Threebox is also available as an nmp package

npm i threebox-plugin

New Update (till 03/03/2025)

Enable IFC format for map
Add click event
Add animation for model when being added to map
At a new tooltip as a logo to model.
Custom CSS2DRenderer, allow logo to be scaled when camera zooming.
Game mode
Point cloud data: ply, xyz, e57, pts

Documentation

All the Threebox Documentation has been completely updated, including all the methods, properties and events implemented in Threebox and objects, but still 'work in progress' adding better documented examples and images to illustrate Threebox capabilities.

Compatibility/Dependencies

Three.js 132. (already bundled into the Threebox build). If desired, other versions can be swapped in and rebuilt here, though compatibility is not guaranteed.
Mapbox-gl-js v1.11.1. or v.2.0.1. Warning: Despite v1.11.1 still supported, if used, some features from mapbox v.2.0.1 won't be obviously available such as sky layers.
Azure Maps v2.0.31.

Getting started

You can use threebox in three different ways.

NPM install

Add threebox to your project via npm package :

npm install threebox-plugin

Then you will need to import Threebox object in your code. Depending your javascript framework this might be different.

import { Threebox } from "threebox-plugin";

Depending the framework, wrapper or bundler you ar using, try with this:

import { Threebox } from "threebox-plugin/dist/threebox";

Use the bundle locally

Download the bundle from dist/threebox.js or dist/threebox.min.js and include it in a <script> tag on your page.
If you want to use styles predefined, add the link to the cascade style sheet, just ensure the src and href attributes are pointing to relative or absolute url path.

<script src="../dist/threebox.js" type="text/javascript"></script>
<link href="../dist/threebox.css" rel="stylesheet" />

Public CDNs

Threebox can be also used from different public CDNs:

jsdelivr

This CDN has the particularity that always requires the version of the package to download individual files.

<script
  src="https://cdn.jsdelivr.net/gh/jscastro76/threebox@v.2.2.2/dist/threebox.min.js"
  type="text/javascript"
></script>
<link
  href="https://cdn.jsdelivr.net/gh/jscastro76/threebox@v.2.2.2/dist/threebox.css"
  rel="stylesheet"
/>

unpkg

Despite this CDN admits version, if omitted, it will download always the last one published.

<script
  src="https://unpkg.com/threebox-plugin/dist/threebox.min.js"
  type="text/javascript"
></script>
<link
  href="https://unpkg.com/threebox-plugin/dist/threebox.css"
  rel="stylesheet"
/>

For an specific version (i.e. v2.2.1) use the followin:

<script
  src="https://unpkg.com/threebox-plugin@2.2.1/dist/threebox.min.js"
  type="text/javascript"
></script>
<link
  href="https://unpkg.com/threebox-plugin@2.2.1/dist/threebox.css"
  rel="stylesheet"
/>

Test the samples

Several introductory examples are here.
To run them, create a config.js file with your Mapbox-gl-js access token, alongside and in the format of the template.

Contributing

Clone the Github repo.
Build the library with npm run build to get the minimized version, or npm run dev to get the development version and rebuild continuously as you develop.
Both commands will output a bundle in dist/ folder.

Unit tests

Tests live here.

Build first the test bundle with npm run test, this will create tests\threebox-tests-bundle.js
Then in your preferred browser navigate to threebox-tests.html and check the console for test results.

How to build the project in Visual Studio

Sample to get a full build from scratch for Visual Studio:

Install Node.js
Clone the repo and open a new Project using main.js
Install / Update the packages browserify, tape, ncp, uglyfy, watchify.
Right click on the project at the Solution Explorer > Open Node.js Interactive Window:
execute .npm [ProjectName] init -y
execute .npm [ProjectName] install
execute .npm [ProjectName] i
execute .npm [ProjectName] run dev or .npm run build