Mapbox & ThreeJS Interaction Methods

TIP

Due to differences in the perspective camera used by ThreeJS and the camera mechanism and coordinate systems used by Mapbox, objects rendered with ThreeJS may exhibit offset issues when dragging the map. The following three methods use different algorithms to synchronize the ThreeJS camera, resulting in varying degrees of offset depending on the map's tilt. — The above explanation is purely based on personal understanding.

There are three ways to use ThreeJS with Mapbox:

1. Custom Mapbox custom layer, directly using ThreeJS, refer to the official example (https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/)
   • Requires including the ThreeJS library.
   • Implemented directly using a custom layer, allowing full use of the ThreeJS API.
   • Only applicable to the EPSG:3857 coordinate system (Web Mercator).
   • Requires manual conversion of latitude and longitude to ThreeJS coordinates.
2. Using Threebox, refer to the official example (https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model-threebox/)
   • Requires including the Threebox library. ThreeJS is already bundled within Threebox, limiting the flexibility to use different ThreeJS versions.
   • Simple and easy-to-use API.
   • Only applicable to the EPSG:3857 coordinate system.
3. Using SuperMap iClient plugin
   • Requires including the ThreeJS library.
   • Simple API.
   • Applicable to various coordinate systems.
   • Offset issues are very significant in non-EPSG:3857 coordinate systems.

3D File Formats

Recommended: GLB and GLTF formats

• OBJ format
• GLB or GLTF format
• FBX format