第六节 WebGL画球算法

桃扇骨 2022-06-05 11:55 208阅读 0赞

## 学习交流欢迎加群：789723098，博主会将一些demo整理共享 ##

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

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

![Center][]

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

![Center 1][]

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

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

![Center 2][]

代码实现如下：

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);
        }
    }

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

![Center 3][]

[Center]: /images/20220605/346d5da206ef4991a87ad59489e1c882.png
[Center 1]: /images/20220605/576d647670f049469e24a8b3cd68a19c.png
[Center 2]: /images/20220605/2500de777bdd43d89ead8918e9c89ad5.png
[Link 1]: http://blog.csdn.net/qq_37338983/article/details/78556125
[Center 3]: /images/20220605/b35531ea7d124bf2a96bc2c01a47b382.png