绘制平面
要让地球转动得起来，首先咋弄？当然是画出一个地球模型。接着将它切分为小三角形，这样每一片都像是地球的零件了。最后再给这个新装扮一下，一个活灵活现的地球就在你眼前呈现出来！
咱们要动笔画画先准备个空荡荡的LBitmapData作为绘画用具。然后，把大图像分割成一个个正方体小块，这样就能看到它们各自长得怎么样~
试试这个小程序Drawtriangles，超容易上手，很快就能做出”平面效果“！平时出门办个事也很实用！
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);
}
}
计算y坐标
要把平面变成圆？那可得把每个小三角形摆好哦～首先，弄清楚Y轴挺重要的！利用三角函数计算，咱们就能知道小三角形上下两头的高Y跟圆形正前面的半径r1。
backLayer = new LSprite(); addChild(backLayer); backLayer.graphics.clear(); backLayer.graphics.beginBitmapFill(earthBitmapData); backLayer.graphics.drawTriangles(vertices, indices, uvtData, 2);
记住了y值以后，直接扔进 vertices 里面去，每个小三角在哪儿就搞定！下面就是看它表现的时候了。
计算x坐标
来，我们先搞定X轴。找个半径为r1的圆当切面就行，然后用三角函数算出这三角形在这个平面上的X坐标。
只是加个X还不够，得把Y也搞定，这样才能全都放进去喔~
var a = Math.sin(angle); if((90-180*j/rows)%90==0 && (90-180*j/rows)0!=0)a=(90-180*j/rows)>0?1:-1; var y = -r*a; var sa = Math.cos(angle); var r1 = Math.abs(r*sa);
按照下面这几个简单的步骤走，你很快就能看到超级逼真的3D地球了哟~别忘了按顺序操作！
绘制地球
for(i=0;i<=cols;i++){
for(j=0;j0?1:-1;
if((90-180*j/rows)0==0)a=0;
var sy = -r*a;
vertices.push(i*15,sy);
}
}
行，动手做，让我们弄个能换地图的编程小项目。然后跑起来，瞧，一颗真实的地球就在你眼前呈现出来
你知道吗？只要简单调整下LSPrite的scaleX和scaleY，就能随意改变地球大小！设计师们也可以随心所欲发挥想象力，创作出各种各样的炫酷模型！
旋转地球
想让地球转快点不？你们没学过drawtriangles里那个叫uvtData啥的玩意儿能调图的位置？那就试试换换那些数字，看看会咋样！说不定地球真的能飞起来哩！
这不是换个地方吗？每一排的数字小三角往下挪一格就行了。这么一搞，画面都漂亮多了！是不是感觉像地球在转动？
var b = Math.cos(angle*Math.PI/180); var x = r1*b;
来，咱们来点几下屏幕，让地球动起来呗！是不是很酷？而且还是立体的，保证你看得爱不释手～
调整大小与测试
for(i=0;i<=cols;i++){
for(j=0;j<=rows;j++){
var sa = Math.cos(angle);
if((90-180*j/rows)0==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(angle20==0)b=-1;
var sx = sr*b;
vertices.push(sx,j*15);
}
}
想让地球变大变小，太简单了！只需动一动LSprite里面的scaleX和scaleY，立马就可以搞定。这样，你想怎么调整都可以，而且保证不走形哦～
哥们儿，快来看看这个！要玩 preach 功能是不是？那你得用咱们 HTML5 的开源引擎 LufyLegend 1.5.1版本以上！感兴趣吗？别犹豫赶紧去官网搞个最新版试哈子！
。
评论0