Have you explored the latest version of threebox?? It enables you to add as many models and 3D layers as you want on top of Mapbox using their support for 3D objects through CustomLayerInterface
with only a few lines of code
map.on('style.load', function () {
map.addLayer({
id: 'custom_layer',
type: 'custom',
renderingMode: '3d',
onAdd: function (map, mbxContext) {
window.tb = new Threebox(
map,
mbxContext,
{ defaultLights: true }
);
var options = {
obj: '/3D/soldier/soldier.glb',
type: 'gltf',
scale: 1,
units: 'meters',
rotation: { x: 90, y: 0, z: 0 } //default rotation
}
tb.loadObj(options, function (model) {
soldier = model.setCoords(origin);
tb.add(soldier);
})
},
render: function (gl, matrix) {
tb.update();
}
});
})
And you can do much more...
- 3D models built-in and custom animations

- Full raycast support MouseOver/Mouseout, Selected, Drag&Drop, Drag&Rotate, Wireframe

- CSS2D Tooltips and Labels that consider altitude

- Three.js and Mapbox cameras sync with depth adjustment

- Include geolocated models of monuments with sunlight & shadows build-in support

- Optimized to load thousands of 3D objects
