那么，我们是如何建立顶点位置、法线、纹理坐标和顶点索引，并给它们赋值，来绘制一个球体呢？秘密就在于下面这个函数中：initBuffers。
函数开始先定义了对象数组的全局变量，然后指定了经度带和纬度带的数量，以及球体的半径。如果你打算在你自己的WebGL页面中使用这些代码，你应当将经度带、纬度带和弧度都参数化，并且将数组对象储存在其他地方而不是全局变量中。这里我没有这么做只是为了演示起来方便简单，我可不想因此影响了你的良好的面对对象以及函数化的编程理念。
251 var moonVertexPositionBuffer;
总结一下，对于一个半径为r的球体，有m个纬线带和n个经线带，我们把从0到π的区间平均分成m等份就可以得到θ的取值范围，把0到2π的区间平均分成n等份就可以得到φ的取值范围，从而计算出坐标x,y,z的值。
x = r sinθ cosφ
y = r cosθ
z = r sinθ sinφ
以上就是我们如何计算出顶点的过程。那现在看看我们还需要哪些值，包括法线和纹理坐标。好吧，其实计算法线是相当容易的。你只要记住，法线就是一个直勾勾指向表面外部的一个长度为1的向量。对于一个半径为1的球体来说，法线就是从球体中心指向到表面的向量，而这个值我们已经在计算顶点的过程中计算出来了！事实上，计算顶点位置和法线向量的顺序应当是，在按照上面的公式运算中，在与半径相乘之前，先把结果储存一下，作为法线向量，然后再与半径相乘得到顶点位置。
纹理坐标，其实更简单。我们希望纹理贴图的提供者，提供给我们的是一张矩形图片。多说一句，WebGL（不是Javascript）会被其他形状的贴图搞晕。这样，我们就可以放心的假定，这张纹理图片的顶部和底部拉伸肯定是遵循墨卡托投影法则（Mercator Projection）的。这样就是说，我们可以从左到右按照经线平均分割纹理图片得出坐标u，从上到下按照纬线平均分割纹理图片得到坐标v。
好了，这就是全部的工作原理。对于Javascript来说，理解并运算以上原理是如此难以置信得简单方便！我们只需要循环遍历所有的纬线切片，在循环内我们再遍历所有的经线切片，之后我们就可以计算出法线、纹理坐标和顶点位置。唯一需要注意的是，在循环结束的条件中，循环变量必须大于经线或纬线的数量。所以这里我们必须使用小于等于而不是小于。也就是说，比如有30条经线，在每条纬线上就会产生31个顶点。因为根据三角函数的循环，最后一个顶点和第一个顶点的位置其实是相同的，这样的一个重叠让我们把所有东西都连接到了一起。
261 var vertexPositionData = [];
262 var normalData = [];
263 var textureCoordData = [];
264 for (var latNumber=0; latNumber <= latitudeBands; latNumber++) {
265 var theta = latNumber * Math.PI / latitudeBands;
266 var sinTheta = Math.sin(theta);
267 var cosTheta = Math.cos(theta);
268
269 for (var longNumber=0; longNumber <= longitudeBands; longNumber++) {
