點擊下載
本文文檔

當(dāng)前位置：首頁 - 科技 - 知識百科 - 正文

HTML5高級編程之圖形扭曲及其應(yīng)用三(擴(kuò)展篇)

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 15:12:18

HTML5高級編程之圖形扭曲及其應(yīng)用三(擴(kuò)展篇)

HTML5高級編程之圖形扭曲及其應(yīng)用三(擴(kuò)展篇):本篇是該系列文章第三篇，前兩篇介紹了在html5中實現(xiàn)圖片扭曲效果的原理，以及drawtriangles函數(shù)的詳細(xì)用法，下面來看看drawtriangles函數(shù)的擴(kuò)展。利用drawtriangles函數(shù)來實現(xiàn)一個旋轉(zhuǎn)的3D地球，效果如下因為lufylegend1.5.0版的drawtr

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀HTML5高級編程之圖形扭曲及其應(yīng)用三(擴(kuò)展篇):本篇是該系列文章第三篇，前兩篇介紹了在html5中實現(xiàn)圖片扭曲效果的原理，以及drawtriangles函數(shù)的詳細(xì)用法，下面來看看drawtriangles函數(shù)的擴(kuò)展。利用drawtriangles函數(shù)來實現(xiàn)一個旋轉(zhuǎn)的3D地球，效果如下因為lufylegend1.5.0版的drawtr

本篇是該系列文章第三篇，前兩篇介紹了在html5中實現(xiàn)圖片扭曲效果的原理，以及drawtriangles函數(shù)的詳細(xì)用法，

下面來看看drawtriangles函數(shù)的擴(kuò)展。利用drawtriangles函數(shù)來實現(xiàn)一個旋轉(zhuǎn)的3D地球，效果如下

因為lufylegend1.5.0版的drawtriangles函數(shù)有個bug，所以我悄悄的更新了lufylegend1.5.1版，大家可以到官網(wǎng)下載，地址如下

http://lufylegend.com/lufylegend

其實繪制3d球體效果的話，首先就是繪制一個平面，然后將這個平面分成一個一個的小三角形，然后再用這些小三角形拼湊成一個圓球就可以了

現(xiàn)在，我先創(chuàng)建一個空白的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函數(shù)將LBitmapData對象繪制到畫面上

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

得到效果如下圖。

要想將這個平面編程一個圓，就需要計算圖中每個小三角形的坐標(biāo)，先來看看y坐標(biāo)應(yīng)該如何計算，看下面一張圖，是一個球的垂直切面

利用三角函數(shù)，計算圖中的y坐標(biāo)，和y坐標(biāo)所在位置的球的水平切面圓的半徑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坐標(biāo)帶入到vertices數(shù)組中

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的坐標(biāo)，所以得到一個特殊圖形，如下

接著，看看x的坐標(biāo)如何計算，首先將半徑為r1的平面切面拿出來，如下圖

利用三角函數(shù)，計算圖中的x坐標(biāo)

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

這時，如果只將計算好的x坐標(biāo)帶入到vertices數(shù)組中的話

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的坐標(biāo)，所以得到一個很有意思的圖形，如下

如果將計算好的x坐標(biāo)和y坐標(biāo)，同時帶入到vertices數(shù)組中的話

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圖形了

下面，該讓這個地球轉(zhuǎn)動起來了，根據(jù)上一篇介紹的內(nèi)容，傳入drawtriangles函數(shù)的uvtData數(shù)組中的元素是每個小三角形在原圖片中的相對位置，它們決定了繪制圖片的開始位置，如果將一組位置比如0123，變換其中的位置成為1230，再繼續(xù)變換成2301，這樣不斷的進(jìn)行位置變換，那么從視覺上，其實就已經(jīng)實現(xiàn)了旋轉(zhuǎn)了，那么在代碼中，只需要將分割完的數(shù)組的按照每一列進(jìn)行移動，每次都將第一列的兩組三角形移到最后一列，這樣第二列的兩組三角形就變?yōu)榱说谝涣校@樣不停的變換就能讓一個地球轉(zhuǎn)動起來

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

備注：

再次說明一下，本篇所介紹的內(nèi)容需要HTML5開源引擎lufylegend的1.5.1版或以上版本的支持，lufylegend1.5.1版發(fā)布地址如下

http://lufylegend.com/lufylegend

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

HTML5高級編程之圖形扭曲及其應(yīng)用三(擴(kuò)展篇)

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽： html5 扭曲擴(kuò)展

熱門焦點

HTML5高級編程之圖形扭曲及其應(yīng)用三(擴(kuò)展篇)

HTML5高級編程之圖形扭曲及其應(yīng)用三(擴(kuò)展篇)

HTML5高級編程之圖形扭曲及其應(yīng)用三(擴(kuò)展篇)

最新推薦

猜你喜歡

熱門推薦