CODEWITHSUNDEEP
mapboxmapbox-gl-jsmapbox-gl
Robert Kirby
Robert Kirby

Reputation: 55

How to animate movement of 3d models in Mapbox GL JS

The 3d model example in the Mapbox GL JS docs made me wonder how I could animate the movement of 3d vehicles across a map (e.g. Uber's AVS demo and Cesium).

I tried adapting the 3d model example code by removing the current 3d model, creating a new one and then adding that. However this cycle is much too slow for smooth animation:

const moveObject = () => {
  map.removeLayer('3d-model');
  modelOrigin = incrementCoords(modelOrigin);
  modelTransform = createModelTransform(modelOrigin);
  const customLayer = createCustomLayer(modelTransform);
  map.addLayer(customLayer);
};

Ideally I'd like to see smooth animation - like in the AVS demo or the various 'animate a line/point/marker' examples in the Mapbox GL JS docs.

Upvotes: 2

Views: 1814

Answers (1)

Jordy Webb
Jordy Webb

Reputation: 84

For a true 3D use case like in those demos, you'd be better off with a 3D tool rather than Mapbox GL JS. It's not a 3D renderer or true 3D so that's the reason you're not getting what you want. As for a Mapbox tool, the best option would be the Maps SDK for Unity.

There's an example in the Unity SDK of how to replace a 3D building with a custom model. You can find it here: https://docs.mapbox.com/unity/maps/examples/replace-features/

Upvotes: 3

Related Questions