注：文章译自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的额外说明，我会加上［lufy：］，另外，鄙人webgl研究还不够深入，一些专业词语，如果翻译有误，欢迎大家指正。

本次的demo的运行结果

立体的模型

这次稍微喘口气，开始绘制立体模型。
这里说的［喘口气］是指本次的文章中没有出现任何新的技术知识点。只是利用到现在为止所介绍过的内容，来绘制一个立体的圆环体。
到现在为止，只绘制了三角形和四边形，当然，在三维空间中绘制简单的多边形也没什么不对，但是缺点儿说服力。这次绘制一个圆环体，体验一下像样的3D绘图。
要说圆环体的定义的话，不太好解释，其实就是一个跟“甜甜圈”一样形状的模型(lufy:什么？不知道“甜甜圈”？科普一下吧，甜甜圈百科)。准备圆环体模型数据的时候，需要使用正弦和余弦来计算三维空间中顶点的位置。
具体的话，首先在距离原点开始一定距离R的地方开始画一个圆。

如上图，是三维空间的一个横切面。
接着，以Y轴为中心，像圆规一样旋转，不断的添加顶点。

如上图所示的效果，旋转一周的话，就能定义出“甜甜圈”形状的顶点了，这次用程序来模拟一下。

圆环体的顶点数据的生成

function torus(row, column, irad, orad){
    var pos = new Array(), col = new Array(), idx = new Array();
    for(var i = 0; i <= row; i++){
        var r = Math.PI * 2 / row * i;
        var rr = Math.cos(r);
        var ry = Math.sin(r);
        for(var ii = 0; ii <= column; ii++){
            var tr = Math.PI * 2 / column * ii;
            var tx = (rr * irad + orad) * Math.cos(tr);
            var ty = ry * irad;
            var tz = (rr * irad + orad) * Math.sin(tr);
            pos.push(tx, ty, tz);
            var tc = hsva(360 / column * ii, 1, 1, 1);
            col.push(tc[0], tc[1], tc[2], tc[3]);
        }
    }
    for(i = 0; i < row; i++){
        for(ii = 0; ii < column; ii++){
            r = (column + 1) * i + ii;
            idx.push(r, r + column + 1, r + 1);
            idx.push(r + column + 1, r + column + 2, r + 1);
        }
    }
    return [pos, col, idx];
}

HSV色彩模式到RGB色彩模式的转换

function hsva(h, s, v, a){
    if(s > 1 || v > 1 || a > 1){return;}
    var th = h % 360;
    var i = Math.floor(th / 60);
    var f = th / 60 - i;
    var m = v * (1 - s);
    var n = v * (1 - s * f);
    var k = v * (1 - s * (1 - f));
    var color = new Array();
    if(!s > 0 && !s < 0){
        color.push(v, v, v, a); 
    } else {
        var r = new Array(v, n, m, m, k, v);
        var g = new Array(k, v, v, n, m, m);
        var b = new Array(m, m, k, v, v, n);
        color.push(r[i], g[i], b[i], a);
    }
    return color;
}

总结

绘制立体模型（圆环体）

http://wgld.org/s/sample_008/

转载请注明：转自lufy_legend的博客http://blog.csdn.net/lufy_legend