Constructor

Initialize a Threebox instance with Mapbox map and WebGL context

Constructor

Sets up a Threebox scene using a Mapbox map and WebGL rendering context.

var tb = new Threebox(map, glContext, options)

Parameters

map · mapboxgl.Map · required

Mapbox GL JS map instance

glContext · WebGLRenderingContext · required

WebGL rendering context, obtained from map.getCanvas().getContext('webgl') or from the onAdd(map, gl) method of a custom layer

options · object

Configuration options for the Threebox instance

defaultLights · boolean · default: "false"

Whether to add some default lighting to the scene. If no lighting added, most objects in the scene will render as black

realSunlight · boolean · default: "false"

Sets lights that simulate Sun position for the map center coords and user local datetime. This sunlight can be updated through tb.setSunlight method. Calls internally to suncalc module

realSunlightHelper · boolean · default: "false"

Sets if a light helper will be shown when realSunlight is true

passiveRendering · boolean · default: "true"

When true, Threebox only renders when the map moves or changes

preserveDrawingBuffer · boolean · default: "false"

Whether to preserve the drawing buffer after rendering. Required for map.getCanvas().toDataURL()

enableSelectingFeatures · boolean · default: "false"

Enables the mouseover and selection of fill-extrusion features. Fires the SelectedFeatureChange event

enableSelectingObjects · boolean · default: "false"

Enables the mouseover and selection of 3D objects. Fires the SelectedChange event. This value will set the options.bbox value of the objects created

enableDraggingObjects · boolean · default: "false"

Enables dragging of 3D objects. Fires the ObjectDragged event where draggedAction = 'translate' or draggedAction = 'altitude'

enableRotatingObjects · boolean · default: "false"

Enables rotation of 3D objects. Fires the ObjectDragged event where draggedAction = 'rotate'

enableTooltips · boolean · default: "false"

Enables the default tooltips on fill-extrusion features and 3D objects

enableHelpTooltips · boolean · default: "false"

Enables the default help tooltips when an object is being moved, rotated or measured

multiLayer · boolean · default: "false"

Enables the option for multi-layer pages where a default layer will be created internally that will manage the tb.update calls

orthographic · boolean · default: "false"

Enables the option to set a THREE.OrthographicCamera instead of a THREE.PerspectiveCamera which is the default in Mapbox

fov · number · default: "ThreeboxConstants.FOV_DEGREES"

Sets the FOV of the default THREE.PerspectiveCamera. This value has no effect if orthographic: true

sky · boolean · default: "false"

Sets a built-in atmospheric sky layer initially set with the time and the map center position. This layer is automatically updated if realSunlight is also true

terrain · boolean · default: "false"

Sets a built-in terrain layer initially set with the time and the map center position. This layer is automatically updated if realSunlight is also true

Returns

tb · Threebox

A Threebox instance with synchronized camera, scene, and renderer

Example

map.addLayer({
  id: 'custom_layer',
  type: 'custom',
  renderingMode: '3d',
  onAdd: function (map, gl) {
    window.tb = new Threebox(
      map,
      gl,
      { 
        defaultLights: true,
        enableSelectingObjects: true,
        enableDraggingObjects: true,
        enableRotatingObjects: true,
        enableTooltips: true
      }
    );
  },
  render: function (gl, matrix) {
    tb.update();
  }
});