JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6283
  • Score
    100M100P100Q122057F
  • License MIT

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

Package Exports

  • threebox-plugin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (threebox-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Threebox

GitHub release (latest by date) NPM version NPM license 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. threebox


Latest release

GitHub Release Date
Latest code release is GitHub release (latest by date), please review the Change log for more details.

Threebox is also available as an nmp package NPM version 

npm i threebox-plugin

ONLY in this Threebox fork

Models built-in & custom animations Mouse over/out, Selected, Drag&Drop, Drag&Rotate, Wireframe
threebox threebox
Tooltips using altitude Optimization of camera perspective and depth
threebox threebox
Models built-in shadows Optimized performance through cache
threebox threebox
Runtime style change Sunlight illumination for a given datetime and lnglat
threebox threebox

Only in this fork, there is a list of new features implemented on top of the amazing work from @peterqliu:

  • Updated to Three.js v117.
  • Updated to Mapbox-gl-js v1.11.1.
  • Updated to Azure Maps v2.0.31.
  • 18 examples with all the new features.
  • Support for multiple 3D format objects (FBX, GLTF/GLB, Collada, OBJ/MTL).
  • Support for CSS2D labels supporting rich HTML controls through a new LabelManager.
  • Support for CSS2D tooltips/title browser-like and mapbox-like.
  • Support for built-in shadows and real Sun light positioning for a given datetime and lnglat coords.
  • Support for built-in Raycaster in Object3D and fill-extrusions together.
  • Support for built-in MouseOver/Mouseout, Selected, Drag&Drop, Drag&Rotate, Wireframe in loadedObjects including events.
  • Support for GeoJson standard features format import and export in different layers.
  • Support for Object3D embedded animations, and custom animations on AnimationManager (i.e. embedded animation + translate + rotate).
  • Support for multi-floor/layer design of spaces.
  • Support for Non-AABB Non Axes Aligned Bounding Box and real model size.
  • Support for wireframing on any Object3D, removing them from the raycast.
  • Support for setLayerZoomRange and setLayoutProperty on Custom Layers (not available in Mapbox).
  • Support for removeLayer considering Object3D.
  • Support for style change through setStyle and keeping Object3D.
  • Support for partial and full dispose of Mapbox, Three and Threebox resources and memory.
  • Support for Object3D auto-centering, bounding box and floor projection.
  • Optimization for loading thousands of objects through cache.
  • Optimization of Camera perspective to have Raycast with pixel-precision level.
  • Available as npm package
  • Check out change log for more detail.

Documentation

threebox

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.r117 (already bundled into the Threebox build). If desired, other versions can be swapped in and rebuilt here, though compatibility is not guaranteed. (WARNING: v118.3 breaks compatibility in some cases)
  • Mapbox-gl-js v1.11.1.

Getting started

You can use threebox in two different ways.

NPM install

Add threebox to your project via npm package NPM version :

npm install threebox-plugin

Use the bundle

Download the bundle from dist/threebox.js or dist/threebox.min.js and include it in a <script> tag on your page.

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
  • Update the packages @turf, tape, 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] [LocalPath] install azure@4.2.3
  • execute .npm [ProjectName] run dev or .npm run build