lufylegend:图形变形3

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

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

http://lufylegend.com/lufylegend

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

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

earthBitmapData = new LBitmapData("#ffffff", 0, 0, 500, 300);
var i, j;
vertices = new Array();
for(i=0;i<=cols;i++){
    for(j=0;j<=rows;j++){
        vertices.push(i*15,j*15);
    }
}
indices = new Array();
for (i = 0; i < cols; i++) {
    for (j = 0; j < rows; j++) {
        indices.push(i * (rows + 1) + j, (i + 1) * (rows + 1) + j, i * (rows + 1) + j + 1);
        indices.push((i + 1) * (rows + 1) + j, i * (rows + 1) + j + 1, (i + 1) * (rows + 1) + j + 1);
    }
}
uvtData = new Array();
for (i = 0; i <= cols; i++) {
    for (j = 0; j <= rows; j++) {
        uvtData.push(i / cols, j / rows);
    }
}

earthBitmapData = new LBitmapData("#ffffff", 0, 0, 500, 300);
var i, j;
vertices = new Array();
for(i=0;i<=cols;i++){
	for(j=0;j<=rows;j++){
		vertices.push(i*15,j*15);
	}
}
indices = new Array();
for (i = 0; i < cols; i++) {
	for (j = 0; j < rows; j++) {
		indices.push(i * (rows + 1) + j, (i + 1) * (rows + 1) + j, i * (rows + 1) + j + 1);
		indices.push((i + 1) * (rows + 1) + j, i * (rows + 1) + j + 1, (i + 1) * (rows + 1) + j + 1);
	}
}
uvtData = new Array();
for (i = 0; i <= cols; i++) {
	for (j = 0; j <= rows; j++) {
		uvtData.push(i / cols, j / rows);
	}
}

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

backLayer = new LSprite();
addChild(backLayer);
backLayer.graphics.clear();
backLayer.graphics.beginBitmapFill(earthBitmapData);
backLayer.graphics.drawTriangles(vertices, indices, uvtData, 2);

backLayer = new LSprite();
addChild(backLayer);
backLayer.graphics.clear();
backLayer.graphics.beginBitmapFill(earthBitmapData);
backLayer.graphics.drawTriangles(vertices, indices, uvtData, 2);

得到效果如下图。

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

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

var a = Math.sin(angle);
if((90-180*j/rows)%90==0 && (90-180*j/rows)%180!=0)a=(90-180*j/rows)>0?1:-1;
var y =  -r*a;
var sa = Math.cos(angle);
var r1 =  Math.abs(r*sa);

var a = Math.sin(angle);
if((90-180*j/rows)%90==0 && (90-180*j/rows)%180!=0)a=(90-180*j/rows)>0?1:-1;
var y =  -r*a;
var sa = Math.cos(angle);
var r1 =  Math.abs(r*sa);

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

for(i=0;i<=cols;i++){
    for(j=0;j<=rows;j++){
        var angle = (90-180*j/rows)*Math.PI/180;
        var a = Math.sin(angle);
        if((90-180*j/rows)%90==0 && (90-180*j/rows)%180!=0)a=(90-180*j/rows)>0?1:-1;
        if((90-180*j/rows)%180==0)a=0;
        var sy =  -r*a;
        vertices.push(i*15,sy);
    }
}

for(i=0;i<=cols;i++){
	for(j=0;j<=rows;j++){
		var angle = (90-180*j/rows)*Math.PI/180;
		var a = Math.sin(angle);
		if((90-180*j/rows)%90==0 && (90-180*j/rows)%180!=0)a=(90-180*j/rows)>0?1:-1;
		if((90-180*j/rows)%180==0)a=0;
		var sy =  -r*a;
		vertices.push(i*15,sy);
	}
}

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

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

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

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

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

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

for(i=0;i<=cols;i++){
    for(j=0;j<=rows;j++){
        var sa = Math.cos(angle);
        if((90-180*j/rows)%180==0)sa=1;
        var sr =  Math.abs(r*sa);
        var angle2 = 360*(i+1)/cols;
        var b = Math.cos(angle2*Math.PI/180);
        if(angle2%360==0)b=1;
        else if(angle2%180==0)b=-1;
        var sx =  sr*b;
        vertices.push(sx,j*15);
    }
}

for(i=0;i<=cols;i++){
	for(j=0;j<=rows;j++){
		var sa = Math.cos(angle);
		if((90-180*j/rows)%180==0)sa=1;
		var sr =  Math.abs(r*sa);
		var angle2 = 360*(i+1)/cols;
		var b = Math.cos(angle2*Math.PI/180);
		if(angle2%360==0)b=1;
		else if(angle2%180==0)b=-1;
		var sx =  sr*b;
		vertices.push(sx,j*15);
	}
}

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

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

for(i=0;i<=cols;i++){
    for(j=0;j<=rows;j++){
        var angle = (90-180*j/rows)*Math.PI/180;
        var a = Math.sin(angle);
        if((90-180*j/rows)%90==0 && (90-180*j/rows)%180!=0)a=(90-180*j/rows)>0?1:-1;
        if((90-180*j/rows)%180==0)a=0;
        var sy =  -r*a;
        var sa = Math.cos(angle);
        if((90-180*j/rows)%180==0)sa=1;
        var sr =  Math.abs(r*sa);
        var angle2 = 360*(i+1)/cols;
        var b = Math.cos(angle2*Math.PI/180);
        if(angle2%360==0)b=1;
        else if(angle2%180==0)b=-1;
        var sx =  sr*b;
        vertices.push(sx, sy);
    }
}

for(i=0;i<=cols;i++){
	for(j=0;j<=rows;j++){
		var angle = (90-180*j/rows)*Math.PI/180;
		var a = Math.sin(angle);
		if((90-180*j/rows)%90==0 && (90-180*j/rows)%180!=0)a=(90-180*j/rows)>0?1:-1;
		if((90-180*j/rows)%180==0)a=0;
		var sy =  -r*a;
		var sa = Math.cos(angle);
		if((90-180*j/rows)%180==0)sa=1;
		var sr =  Math.abs(r*sa);
		var angle2 = 360*(i+1)/cols;
		var b = Math.cos(angle2*Math.PI/180);
		if(angle2%360==0)b=1;
		else if(angle2%180==0)b=-1;
		var sx =  sr*b;
		vertices.push(sx, sy);
	}
}

得到一个完整的球体图形，如下

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

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

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

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

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

for (i = 0; i <= rows; i++) {
    uvtData.push(uvtData.shift());
    uvtData.push(uvtData.shift());
}

for (i = 0; i <= rows; i++) {
	uvtData.push(uvtData.shift());
	uvtData.push(uvtData.shift());
}

如果要改变这个地球的大小的话，就更简单了，改变LSprite对象的scaleX和scaleY属性就可以改变它的大小了

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>3D</title>
        <script type="text/javascript" src="../lufylegend-1.7.6.min.js">
        </script>
        <script type="text/javascript">
            LSystem.screen(0.5);
        </script>
    </head>
    <body>
        <div id="legend">
        </div>
        <script>

            //初始化引擎
            init(50, "legend", 600, 500, main);

            var leftspeed = 0;
            var leftindex = 1;

            var upspeed = 10;
            var upindex = 1;
            //定义每个顶点的坐标  
            var vertices;
            //定义三角形，数组vertices中每三个顶点可以组成一个三角形
            var indices;
            //定义上面的每个顶点相对于整张图片的比例
            var uvtData;

            var backLayer;
            var bitmapData, earthBitmapData;
            //分割行数和列数
            var rows = 24, cols = 24;
            var mi = 0;
            var imgData = [{
                name: "earth",
                path: "earth.jpg"
            }];
            var imglist;
            function main() {
                //加载图片
                LLoadManage.load(imgData, null, gameInit);

                //var angle = (90 - 180 * 1 / 24) * Math.PI / 180;
                //var a = Math.sin(angle);
                //alert(a);
            }
            
            function gameInit(result){
                imglist = result;
                //获取图片数据
                earthBitmapData = new LBitmapData(imglist["earth"]);
                //earthBitmapData = new LBitmapData("#ffffff", 0, 0, 500, 300);
                
                var i, j;
                //地球半径
                var r = 100;

                //计算定点坐标
                vertices = new Array();
                for (i = 0; i <= cols; i++) {
                    for (j = 0; j <= rows; j++) {
                        //计算弧度
                        var angle = (90 - 180 * j / rows) * Math.PI / 180;

                        //计算定点Y坐标
                        var a = Math.sin(angle);
                        //if (j = 0) { alert(a); }
                        if ((90 - 180 * j / rows) % 90 == 0 && (90 - 180 * j / rows) % 180 != 0) 
                            a = (90 - 180 * j / rows) > 0 ? 1 : -1;
                        if ((90 - 180 * j / rows) % 180 == 0) 
                            a = 0;
                        var sy = -r * a;

                        //计算顶点X坐标
                        var sa = Math.cos(angle);
                        if ((90 - 180 * j / rows) % 180 == 0) sa = 1;
                        var sr = Math.abs(r * sa);
                        var angle2 = 360 * (i + 1) / cols;
                        var b = Math.cos(angle2 * Math.PI / 180);
                        if (angle2 % 360 == 0) 
                            b = 1;
                        else if (angle2 % 180 == 0) 
                            b = -1;
                        var sx = sr * b;
                        vertices.push(sx, sy);
                    }
                }

                //计算定点三角形位置
                indices = new Array();
                for (i = 0; i < cols; i++) {
                    for (j = 0; j < rows; j++) {
                        indices.push(i * (rows + 1) + j, (i + 1) * (rows + 1) + j, i * (rows + 1) + j + 1);
                        indices.push((i + 1) * (rows + 1) + j, i * (rows + 1) + j + 1, (i + 1) * (rows + 1) + j + 1);
                    }
                }

                //定义定点三角形比例
                uvtData = new Array();
                for (i = 0; i <= cols; i++) {
                    for (j = 0; j <= rows; j++) {
                        uvtData.push(i / cols, j / rows);
                    }
                }

                //创建一个Layer层
                backLayer = new LSprite();
                backLayer.x = 110;
                backLayer.y = 110;
                //添加对象
                addChild(backLayer);
                //使用Sprite的graphic绘图
                backLayer.graphics.clear();
                //填充背景
                backLayer.graphics.beginBitmapFill(earthBitmapData);
                //LGraphics类添加drawTriangles方法,用于呈现一组三角形
                backLayer.graphics.drawTriangles(vertices, indices, uvtData);
                
                //进入图之后，按帧速率调用onframe函数  
                backLayer.addEventListener(LEvent.ENTER_FRAME, onframe);
            }
            
            function onframe() {

                //变换绘制图片的开始位置，造成旋转动画
                if (leftspeed < 10 && leftindex++ > leftspeed) {
                    leftindex = 0;
                    for (i = 0; i <= rows; i++) {
                        uvtData.push(uvtData.shift());
                        uvtData.push(uvtData.shift());
                    }
                }
                if (upspeed < 10 && upindex++ > upspeed) {
                    upindex = 0;
                    for (var i = 1; i < uvtData.length; i += 2) {
                        uvtData[i] += 1 / rows;
                        if (uvtData[i] > 1) 
                            uvtData[i] -= 1;
                    }
                }
            }
            
            //调整旋转速度
            function runspeed(value){
                leftspeed = 10 - value;
            }

            //改变地球大小
            function runmax(value){
                backLayer.scaleX = value / 50;
                backLayer.scaleY = backLayer.scaleX;
            }
        </script>
        <div id="mylegend1" style="position:absolute;top:400px;400px;z-index:1;color: #ffffff;background-color:#000000;">
            旋转速度:<input type="number" max="10" min="0" value="10" onchange="runspeed(this.value);"/>
            <br/>
            伸缩:<input type="number" max="100" min="0" value="50" onchange="runmax(this.value);"/>%
        </div>
    </body>
</html>