js实现炫酷的3d动画_滴滴官网首页3d地球动画反译实现

最近有个页面的效果需求，要实现一个 3D 地球的动画效果，在寻找效果参考时看到 didiGlobel 官网的效果很好，所以就想把这个效果拿下来参考一下。以下就是一个反译+学习的过程记录。

写在前面

访问 官方地址 可以看到下面的 3D 地球效果

image.png

获取效果资源

首先查看一下官网实现的源码

image.png

发现都是经过混淆压缩过的，但从中可以分析出采用的技术栈如下：

• React
• Threejs
• Shader

可以看到文件的可读性很差，有4个js 文件，首先是要找到哪个文件是用来制作这个地球的。

我们回到 Elements 标签页，找到对应的 html 源码

image.png

从上面可以看到，地球是渲染到 canvas 中，parent id 是 container，那么我们只要在混淆的源码中，找到渲染方法就能确定哪个 js 是主要制作地球的，这样就能再进行分析。

经过关键词查询

image.png

找到了对应的js，但由于这js 文件比较大，并且源码可读性太差，就需要借助一些工具来帮我们去反译。

这里用的是 jsNice 反译之后的效果还是可以的，有一定可读性。