如何构建 webGL 地球动画，如 Piano.io 网站所示

Question

我最近一直在探索 webGL 和 Threejs，并注意到 Piano.io 网站的地球动画非常好。

有很多创建点状地球仪的示例，但我想知道如何实现这两个部分 - (1) 在各个点上显示卡片和点，(2) 地震？或类似脉冲的效果动画。

如果有一个最小的 glsl 代码示例或策略来实现这两个，我将非常感激。 （我会用react和typescript或js来编写）

这是实际的动画链接：https://piano.io/

Answer 1

在您的示例中，如果您检查网络，点云是 3D 模型

point-cloud.bin

。

但是使用代码的方法是可能的，就像我在这个网站上所做的那样，https://benbdetroit.com/。 步骤：

• 你得到了一个地图纹理；
• 您在该纹理上选取点并将其投影到球体上。

对于“地震”效果：

• 有一个圆圈在增大；
• 这个圆与点碰撞，并且它们在轴上以相对于中心和随机比例的随机偏移量增长。