当前位置:Gxlcms > html代码 > HTML5高级编程之图形扭曲及其应用三(扩展篇)

HTML5高级编程之图形扭曲及其应用三(扩展篇)

时间:2021-07-01 10:21:17 帮助过:51人阅读

本篇是该系列文章第三篇,前两篇介绍了在html5中实现图片扭曲效果的原理,以及drawtriangles函数的详细用法,

下面来看看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);
	}
}

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

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

于是,首先将计算好的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);
	}
}

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


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


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

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

因为没有计算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);
	}
}

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


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

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

如果要改变这个地球的大小的话,就更简单了,改变LSprite对象的scaleX和scaleY属性就可以改变它的大小了,大家可以点击下面的连接,来测试一下它的效果

http://lufy.netne.net/lufylegend-js/3dearth/index.html


备注:

再次说明一下,本篇所介绍的内容需要HTML5开源引擎lufylegend的1.5.1版或以上版本的支持,lufylegend1.5.1版发布地址如下

http://lufylegend.com/lufylegend

以上就是HTML5高级编程之图形扭曲及其应用三(扩展篇)的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!

人气教程排行