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

Question

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).

我尝试通过删除当前的 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 文档中的各种 'animate a 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/

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

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

mapbox

mapbox-gl-js

mapbox-gl