如何在Mapbox GL JS中为3d模型的移动设置动画

Question

Mapbox GL JS文档中的3d model example让我想知道如何在地图上动画3d车辆的运动（例如Uber的AVS demo和Cesium）。

我尝试通过删除当前的3D模型，创建一个新模型，然后添加它来调整3d模型示例代码。然而，对于平滑动画来说，这个周期太慢了：

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

理想情况下，我希望看到平滑的动画 - 就像AVS演示或Mapbox GL JS文档中的各种“动画line / point / marker”示例一样。

Answer 1

对于像这些演示中那样的真实3D用例，使用3D工具而不是Mapbox GL JS会更好。它不是3D渲染器或真正的3D，所以这就是你没有得到你想要的东西的原因。至于Mapbox工具，最好的选择是Maps SDK for Unity。

Unity SDK中有一个示例，说明如何使用自定义模型替换3D建筑。你可以在这里找到它：https://docs.mapbox.com/unity/maps/examples/replace-features/