之前一篇文章，我向大家介绍了如何将 netCDF 数据转换并打包为 Google Earth 支持的 KMZ 文件格式的方法。没有看过、并感兴趣的小伙伴们可以去阅读下。

nc数据转为谷歌地球的kml文件

那么我们能不能不用 Google Earth 的服务，自己搭建一个 3D 地球栅格数据展示的服务？当然是可以的，我们今天就来利用 Three.js 进行栅格数据的展示。

1.什么是 Three.js

Three.js 是一个跨浏览器的脚本，使用 JavaScript 函数库或 API 来在网页浏览器中创建和展示动画的三维计算机图形。Three.js 使用 WebGL 技术。

在 Three.js 的官网，你可以看到很多很多例子。例如 Github 首页的信息地球，NASA 的卫星和行星展示等，都是使用 Three.js 来实现的。

• 

• 

2.例示数据

本例中采用的 netCDF 例示数据与 nc2kml 相同。

本例采用的 nc 数据为（仅选取2018年逐月的数据演示）：

1979年1月至2018年12月的中国逐月太阳辐射数据集
lrad_CMFD_V0106_B-01_01mo_010deg_197901-201812.nc

本例采用的 nc4 数据为（仅选取1980年1月1日21时的数据演示）：

1980年1月1日的全球太阳辐射数据集
MERRA2_100.tavg1_2d_rad_Nx.19800101.nc4

这两个文件均可在 Release 页面下载。如何将 netCDF 数据导出成我们需要的图片，可以参考 nc2kml，里面有非常详细的说明。

3.栅格数据展示

根据上篇文章 《nc数据转为谷歌地球的kml文件》来看，我们从 netCDF Plot 出的栅格数据展示都是图片格式，而这些图片格式也具有一些特点：

• 图片上、下边界是南极和北极
• 图片左、右边界是国际日期变更线

所以，我们只要再找到地球的展开图作为地图，再把咱们的辐射数据叠加上去即可，都投射到原型球体的表面即可！

这样，我们第一版的栅格数据展示图就做好了（具体实现方法和代码，可在 Github Repo 获取）：

• GitHub

4.栅格数据展示的改进

我们还可以优化底图、增加一些地形视觉效果、动态云层效果等（具体实现方法和代码，可在 Github Repo 获取）：

• GitHub

你还可以自己写一个 JavaScript 脚本，来自动切换不同张栅格数据图，达到动态演示的效果：

这是一个例示代码，用于展示 “2016年1月 – 2017年12月” 的逐月太阳辐射栅格数据：

function startMovie() {
    document.getElementById("month-select").style.display = 'none';
    var month = 1;
    var year = 2016;
    setInterval(function () {
        console.log(month);
        document.getElementById("msg-left").innerHTML = year + ' 年';
        document.getElementById("msg-right").innerHTML = month + ' 月';

        datas.material.map = THREE.ImageUtils.loadTexture("earth/" + year + "-" + month + ".png");
        datas.material.needsUpdate = true;

        if (month >= 12) {
            month = 1; year += 1;
            if (year > 2017) { year = 2016 }
        }
        else {
            month += 1;
        }
    }, 400);
}