Three.js 将画布中的三个js网格设置为mapbox贴图的动画

我在三个js画布中创建了浮动球体。 我想给这个浮动球体设置动画，使其朝 mapbox 3d地图平铺的表面

我明白 可以在mapbox和customlayer中创建三个网格 我知道如何仅使用three.js canvas制作三个网格

但是，我想不出在三个js空间中为网格设置动画的方法来映射到mapbox贴图

我如何做到这一点

我制作的原型在下面的链接中。

在本演示中，球体向下移动到平面上。（该平面最终必须是mapbox map）

-总结-

1.如果可能，我想将原型中的地图替换为mapbox地图。 2.我想做一个过渡，将浮动球体移动到地图盒地图，地图上有相应的坐标，就像原型一样

（例如，[40.7128，-74.0060]，如果球体应位于纽约市） 我可以在mapbox的自定义层中通过

mapboxgl.MercatorCoordinate.fromLngLat(
    // type in coordinate informatino of model
    [148.9825, -35.39847],

    // height of model, normally 0 cause it will stand on the surface. if I wanna try to lift it up i can increase it
    // lets test this altitude later.
    modelAltitude
);

---

但是我不能离开这个自定义层，在仅有的三个js画布和mapbox自定义层之间进行转换。

你试过了吗？这将从mapbox和层中提取您，并允许您设置动画、旋转和平移任何3D对象或对象model@jscastro我刚刚选中了threebox，它看起来像是一个库，简化了mapbox的“customlayer”定制。它是，并且还为对象添加了动画和Threejs功能的简化。查看一些演示中的GIF，了解在场景的任何部分制作3D对象动画是多么容易map@jscastro非常感谢。我想知道是否有可能使背景地图不可见如果你只需要地理定位部分，你只需要一个空的mapbox样式文件。事实上，如果您不需要样式，那么您甚至可以脱机运行它