前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AS3 2D转3D【算法】

AS3 2D转3D【算法】

作者头像
py3study
发布2020-01-03 15:01:53
7330
发布2020-01-03 15:01:53
举报
文章被收录于专栏:python3

FLASH只是有二维的坐标.怎么把三维坐标转换成二维坐标:

(一).公式

    给定点:(x,y,z)     绕x轴旋转后的点(x1,y1,z1)     绕y轴旋转后的点(x2,y2,z2)     绕z轴旋转后的点(x3,y3,z3)

 1.x旋转(x不变):  x1=x  y1=y*cosb+z*sinb  z1=z*cosb-y*sinb

    2.y旋转(y不变):  x2=x*cosb-z*sinb  y2=y  z2=z*cosb+x*sinb

    3.z旋转(z不变)

    x3=x*cosb-y*sinb  y3=y*cosb+x*sinb  z3=z

(二).原理分析

1.三角形定理:

如上图,已知一个点(x,y,z),利用三角形相似的原理,可以得出下列结论:

  d/(d+z)=y1/y,推出:y1=d*y/(d+z),可在二维平面上来表现空间上的点的位置。进一步把它简化。提出因子d/(d+z),用ratio(比率)表示,这个公式就变为   ratio=d/(d+z);   y1=ratio*y;同理可推出   x1=ratio*x;

2.flash模拟3D坐标:

如上图,z轴表示一个物体离屏幕的远近,当物体的z轴位置增加时,物体朝远离屏幕的方向运动,当物体的z值减小时,物体朝接近屏幕的方向运动。在三维坐标中,当z值增大,也就是远离屏幕时,物体应越小,反之越大。我们可以用上面的ratio,当z增加时,ratio减少,因为在ratio中,z是作为分母的。反之,当z减少时,ratio增加。所以可用ratio来控制mc的大小。z值最大,物体应在最底层,最小,在最上层。

3.公式推导:

旋转有三种,x旋转:坐标x不变,y旋转:y不变,z旋转:z不变,我们先来推导z旋转。如上图:从点(x,y,0)转到(x1.y1.0),求点(x1.y1.0)

利用数学中的正弦、余弦公式得出

  x1=r*cos(a+b),而cos(a+b)=sina*cosb+cosa*sinb   推出:x1=r(cosa*cosb-sina*sinb)   又因为x=r*cosa,y=r*sina   所以x1=x*cosb-y*sinb   同样推出:y1=y*cosb+x*sinb

  这就是z旋转的公式。用同样的方法可推出x旋转,y旋转的公式。总结如下:

给定点:(x,y,z) 绕x轴旋转后的点(x1,y1,z1) 绕y轴旋转后的点(x2,y2,z2) 绕z轴旋转后的点(x3,y3,z3)

 x旋转(x不变)  x1=x  y1=y*cosb-z*sinb  z1=z*cosb+y*sinb

注:是先加后减,因为FLASH里的Y轴是反的,箭头向下的。 即:

 y1=y*cosb+z*sinb  z1=z*cosb-y*sinb

同理推出:

 y旋转(y不变)  x2=x*cosb-z*sinb  y2=y  z2=z*cosb+x*sinb

 z旋转(z不变)  x3=x*cosb-y*sinb  y3=y*cosb+x*sinb  z3=z

  从以上公式可看出,在flash要实现旋转,先要求x轴的旋转点,再求y轴的旋转点,最后再求出z轴的旋转点。

(三).实例应用

最后我们来一个y旋转的AS3应用(复制代码到时间轴即可)

// 全局变量 var mcNums:Number=3; var mcArr:Array = new Array(); var rocArr_x:Array=new Array(100,-100,0); var rocArr_y:Array=new Array(0,10,0); var rocArr_z:Array=new Array(-100,0,0); var hutu:Number=0.001;// 控制旋转的速度 var jiaodu:Number=hutu*180/Math.PI; var distance:int=1000;

initConfig(); //初始化 function initConfig():void { for (var i=1; i<=mcNums; i++) {     var t:MovieClip=doDrawRoundRect();      //t.angle = i * ((Math.PI*2)/mcNums); this.addChild(t);     mcArr.push( t );   }   addEventListener(Event.ENTER_FRAME, EnterFrame); } //刷频 function EnterFrame(e:Event) { for (var i = 0; i<mcNums; i++) { // 按公式计算     var x1=rocArr_x[i]*Math.cos(jiaodu)-rocArr_z[i]*Math.sin(jiaodu);     var y1=rocArr_y[i];     var z1=rocArr_z[i]*Math.cos(jiaodu)+rocArr_x[i]*Math.sin(jiaodu); //赋值     rocArr_x[i]=x1;     rocArr_y[i]=y1;     rocArr_z[i]=z1; // 更新数组元素     var ratio:Number = distance/(distance+z1);     var perspective_x=x1*ratio;     var perspective_y=y1*ratio;     var perspective_z=z1*ratio; // 赋值X Y坐标      mcArr[i].x=stage.stageWidth/2+perspective_x;     mcArr[i].y=stage.stageHeight/2-perspective_y; // mc的大小     mcArr[i].scaleX=mcArr[i].scaleY=80*ratio/100;     mcArr[i].alpha=50*ratio // mc的层次 this.setChildIndex(mcArr[i],ratio);   } } //产生随机颜色的矩形影片 function doDrawRoundRect():MovieClip {   var size:uint=80;   var bgColor:uint=Math.random()*0xffffff;   var borderColor:uint=0x666666;   var borderSize:uint=0;   var cornerRadius:uint=9;   var gutter:uint=5;   var child:MovieClip = new MovieClip();   child.graphics.beginFill(bgColor);   child.graphics.lineStyle(borderSize, borderColor);   child.graphics.drawRoundRect(0, 0, size, size, cornerRadius);   child.graphics.endFill(); return child; }

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/09/23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档