HTML5高级编程之图形扭曲及其应用三

下面来看看drawtriangles函数的扩展。利用drawtriangles函数来实现一个旋转的3D地球，效果如下

因为lufylegend1.5.0版的drawtriangles函数有个bug，所以我悄悄的更新了lufylegend1.5.1版，大家可以到官网下载，地址如下

其实绘制3d球体效果的话，首先就是绘制一个平面，然后将这个平面分成一个一个的小三角形，然后再用这些小三角形拼凑成一个圆球就可以了

现在，我先创建一个空白的LBitmapData对象，然后将这个对象分割成N个小三角形，具体做法看下面代码

[html] view plaincopy

1.  earthBitmapData = new LBitmapData("#ffffff", 0, 0, 500, 300);  

2.  var i, j;  

3.  vertices = new Array();  

4.  for(i=0;i<=cols;i++){  

5.      for(j=0;j<=rows;j++){  

6.          vertices.push(i*15,j*15);  

7.      }  

8.  }  

9.  indices = new Array();  

10. for (i = 0; i < cols; i++) {  

11.     for (j = 0; j < rows; j++) {  

12.         indices.push(i * (rows + 1) + j, (i + 1) * (rows + 1) + j, i * (rows + 1) + j + 1);  

13.         indices.push((i + 1) * (rows + 1) + j, i * (rows + 1) + j + 1, (i + 1) * (rows + 1) + j + 1);  

14.     }  

15. }  

16. uvtData = new Array();  

17. for (i = 0; i <= cols; i++) {  

18.     for (j = 0; j <= rows; j++) {  

19.         uvtData.push(i / cols, j / rows);  

20.     }  

21. }  

接着，利用drawtriangles函数将LBitmapData对象绘制到画面上

[html] view plaincopy

1.  backLayer = new LSprite();  

2.  addChild(backLayer);  

3.  backLayer.graphics.clear();  

4.  backLayer.graphics.beginBitmapFill(earthBitmapData);  

5.  backLayer.graphics.drawTriangles(vertices, indices, uvtData, 2);  

得到效果如下图。

要想将这个平面编程一个圆，就需要计算图中每个小三角形的坐标，先来看看y坐标应该如何计算，看下面一张图，是一个球的垂直切面

利用三角函数，计算图中的y坐标，和y坐标所在位置的球的水平切面圆的半径r1

[javascript] view plaincopy

1.  var a = Math.sin(angle);  

2.  if((90-180*j/rows)%90==0 && (90-180*j/rows)%180!=0)a=(90-180*j/rows)>0?1:-1;  

3.  var y =  -r*a;  

4.  var sa = Math.cos(angle);  

5.  var r1 =  Math.abs(r*sa);  

于是，首先将计算好的y坐标带入到vertices数组中

[javascript] view plaincopy

1.  for(i=0;i<=cols;i++){  

2.      for(j=0;j<=rows;j++){  

3.          var angle = (90-180*j/rows)*Math.PI/180;  

4.          var a = Math.sin(angle);  

5.          if((90-180*j/rows)%90==0 && (90-180*j/rows)%180!=0)a=(90-180*j/rows)>0?1:-1;  

6.          if((90-180*j/rows)%180==0)a=0;  

7.          var sy =  -r*a;  

8.          vertices.push(i*15,sy);  

9.      }  

10. }  

因为还没有计算x的坐标，所以得到一个特殊图形，如下

 

接着，看看x的坐标如何计算，首先将半径为r1的平面切面拿出来，如下图

利用三角函数，计算图中的x坐标

[javascript] view plaincopy

1.  var b = Math.cos(angle*Math.PI/180);  

2.  var x =  r1*b;  

这时，如果只将计算好的x坐标带入到vertices数组中的话

[javascript] view plaincopy

1.  for(i=0;i<=cols;i++){  

2.      for(j=0;j<=rows;j++){  

3.          var sa = Math.cos(angle);  

4.          if((90-180*j/rows)%180==0)sa=1;  

5.          var sr =  Math.abs(r*sa);  

6.          var angle2 = 360*(i+1)/cols;  

7.          var b = Math.cos(angle2*Math.PI/180);  

8.          if(angle2%360==0)b=1;  

9.          else if(angle2%180==0)b=-1;  

10.         var sx =  sr*b;  

11.         vertices.push(sx,j*15);  

12.     }  

13. }  

因为没有计算y的坐标，所以得到一个很有意思的图形，如下

如果将计算好的x坐标和y坐标，同时带入到vertices数组中的话

[javascript] view plaincopy

1.  for(i=0;i<=cols;i++){  

2.      for(j=0;j<=rows;j++){  

3.          var angle = (90-180*j/rows)*Math.PI/180;  

4.          var a = Math.sin(angle);  

5.          if((90-180*j/rows)%90==0 && (90-180*j/rows)%180!=0)a=(90-180*j/rows)>0?1:-1;  

6.          if((90-180*j/rows)%180==0)a=0;  

7.          var sy =  -r*a;  

8.          var sa = Math.cos(angle);  

9.          if((90-180*j/rows)%180==0)sa=1;  

10.         var sr =  Math.abs(r*sa);  

11.         var angle2 = 360*(i+1)/cols;  

12.         var b = Math.cos(angle2*Math.PI/180);  

13.         if(angle2%360==0)b=1;  

14.         else if(angle2%180==0)b=-1;  

15.         var sx =  sr*b;  

16.         vertices.push(sx, sy);  

17.     }  

18. }  

接下来就简单了，将空白图片换成地球的平面图，代码如下

[javascript] view plaincopy

1.  earthBitmapData = new LBitmapData(imglist["earth"]);  

再次运行代码，就可以得到下面的3D图形了

下面，该让这个地球转动起来了，根据上一篇介绍的内容，传入drawtriangles函数的uvtData数组中的元素是每个小三角形在原图片中的相对位置，它们决定了绘制图片的开始位置，如果将一组位置比如0123，变换其中的位置成为1230，再继续变换成2301，这样不断的进行位置变换，那么从视觉上，其实就已经实现了旋转了，那么在代码中，只需要将分割完的数组的按照每一列进行移动，每次都将第一列的两组三角形移到最后一列，这样第二列的两组三角形就变为了第一列，这样不停的变换就能让一个地球转动起来

[javascript] view plaincopy

1.  for (i = 0; i <= rows; i++) {  

2.      uvtData.push(uvtData.shift());  

3.      uvtData.push(uvtData.shift());  

4.  }