Threelibre

A Three.js plugin for MapLibre 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

Threelibre is available as an npm package

npm i threelibre-plugin

Example

|Models built-in & custom animations |Mouse over/out, Selected, Drag&Drop, Drag&Rotate, Wireframe ---------|----------------------- ||

|Tooltips using altitude|Optimization of camera perspective and depth |----------|------- ||

|Runtime style change|Optimized performance through cache |----------|------- ||

|Customizable FOV|Geojson and Points Extrusions |---------|------- ||

|Sunlight illumination for a given datetime and lnglat|Models built-in shadows and sky layer synced with Sunlight |---------|------- ||

Documentation

All the ThreeLibre 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.

• Using ThreeLibre
• Loading a 3D Model
• ThreeLibre methods
• Object methods
• Examples

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.
• Maplibre-gl v4.1.3.
• Azure Maps v2.0.31.

Getting started

You can use threelibre in three different ways.

NPM install

Add threelibre to your project via npm package

npm install threelibre-plugin

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

import { Threebox } from 'threelibre-plugin'; 

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

import { Threebox } from 'threelibre-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:

unpkg

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

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

For an specific version (i.e. v0.0.1) use the followin:

<script src="https://unpkg.com/[email protected]/dist/threebox.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/[email protected]/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