第六节 WebGL画球算法

很多学习WebGL的小伙伴，刚开始一直都是学怎么画立方体，等到立方体画的炉火纯青的时候，却被另一个东西难住了，那就是球。what,还会被一个球难住？。下面就给大家介绍一种画球的算法：

我们的地球现在被划分为很多经线和纬线，如下图所示：

由下面的图，我们来推导一下计算球面上点的坐标：

假设图中圆的半径R=1，由图可算出红点的坐标：x = R*cos theta, y = R * sin theta;那角度theta又是怎样得到的呢？

其实很简单，如果将一个球的经纬线都取为由5，再将其投影到平面圆，就得到在圆的边上的交点总共有10个，两个半圆，一半5个，其所对应的5个圆心角都是相等的，这个角即theta, 所以theta = PI/5, 如果取最中间的那条线为第一条线，那么第一条线上的交点所对的圆心角theta = 0; 如下图所示：

代码实现如下：

for (j = 0; j <= SPHERE_DIV; j++){//SPHERE_DIV为经纬线数

    aj = j * Math.PI/SPHERE_DIV;
    sj = Math.sin(aj);
    cj = Math.cos(aj);
    for(i = 0; i <= SPHERE_DIV; i++){
        ai = i * 2 * Math.PI/SPHERE_DIV;
        si = Math.sin(ai);
        ci = Math.cos(ai);

        points.push(si * sj);//point为顶点坐标
        points.push(cj);
        points.push(ci * sj);
    }
}点击打开链接

for(j = 0; j < SPHERE_DIV; j++){
    for(i = 0; i < SPHERE_DIV; i++){
        p1 = j * (SPHERE_DIV+1) + i;
        p2 = p1 + (SPHERE_DIV+1);

        indices.push(p1);//indices为顶点的索引
        indices.push(p2);
        indices.push(p1 + 1);

        indices.push(p1 + 1);
        indices.push(p2);
        indices.push(p2 + 1);
    }
}

本文只提供算法部分，绘制的部分可参考： 点击打开链接（里面绘制了一个可交互的立方体），最后我实现的效果如下：