创建地球网格

WebGL开发中最常用到的对象就是网格了。网格是由一系列的多边形组成的，每个多边形都是由三个或者更多个3D空间中的顶点来描述。一个网格既可以是一个简单的三角形，也可以是一个极端复杂的真实世界的物体。例如汽车、飞机、人等等。

要绘制地球，先创建一个球形网格。可以使用Three.js中的THREE.SphereGeometry(param1,param2,param3) 方法来创建

phereGeometry

使用时配置前三个参数即可，第一个参数表示球体半径，第二个参数和第三个参数要用多少个交叉区域组成球体表面。数值越高，球体越逼真。

球形网格

创建纹理贴图

除了几何体外，要想渲染球体网格还需要定义它的材质，用于描述网格表面属性。网格包含若干参数，例如基色、透明度和反光度。材质中还可以包含一个或多个纹理，用位图的方式来覆盖网格表面。纹理还可以仅仅用于指定表面的颜色，也可以用多张纹理组合在一起创造更加复杂的效果。

先找到一张世界地理纹理贴图，然后用THREE.ImageUtils.loadTexture()方法载入位图文件。虽然是2D位图，Three.js内置了将2D纹理的具体位置映射到3D球体网格各个顶点位置的算法。接下来使用THREE.MeshBasicMaterial()方法将2D位图转换为3D映射。

绘制地球代码

地球

使用多重纹理创建更具真实的场景

真实的地球还有一个特点，那就是有高山、平原的起伏感。另外还有大范围的敏感区域，以及大气层。接下来将使用THREE.ShaderMaterial的材质。这种材质允许开发者自定义一段着色器的代码。但开发者不必手写它，Three.js内置了库，其中包含了一些常用的视觉效果。在这里，我们将使用3张纹理贴图来实现更加逼真的效果。

颜色贴图

也叫漫反射贴图，主要提供最基本的像素颜色。

颜色贴图

法线贴图

也叫凹凸贴图。法线贴图本质上是将一种额外的网格属性——也就是法线，编码成RGB值存储在一张位图文件中。法线决定了光照到网格表面的亮度。明暗程度取决于法线值。相对于定义顶点属性，法线可以以较高性能和更小资源消耗实现网格表现崎岖不平的效果。f

法线贴图

高光贴图

镜面高光是指网格表面的反光程度和反光量，和法线贴图类似，高光贴图也是一种高效的数据存储方式。

高光贴图

接下来将使用三张纹理图绘制一个更具真实感的地球

多重纹理贴图代码

光源种类

最后说一下光源种类。光源是物体呈现的必备条件，Three.js支持不同类型的光源

环境光：这是一种无论在任何位置都会照亮整个场景的常态光源；点光源：一种从一个特定的点向四周所有方向照射光线的光源，光照受距离限制；聚光灯：从一个特点的点向一个特定的方向照射光线的光源，光照受距离限制；平行光：向特定的方向照射光线的光源，光照不受距离限制，并且与光源位置无关。