Flash与数学：球体曲面

最新推荐文章于 2025-03-11 22:48:42 发布

原创最新推荐文章于 2025-03-11 22:48:42 发布 · 916 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flash #function #import #vector #list #class

FLEX 专栏收录该内容

49 篇文章

订阅专栏

参考了一个源码，大概了解3d球体的做法，借用了球体曲面的参数方程式，我们可以做出这种球面的图片分布效果出来。了解这种球面分布了解到每一张图片倾斜的角度是多少。当初看到这个源码，也让人觉得兴奋，因为他的原理其实不难。了解了数学模型背后的意义时候，大概会明白到这种图片效果是如何制作。主要涉及到角度的分布，和图片数量的分布。当中一些窍门之处都在处理图片角度倾斜，只要知道怎样倾斜。大概就会明白。

下面是一些简化版的清单，初步能够模拟不错的3D球效果。至于这个球体应用一些问题，会继续跟踪下去。

其中photo 是库链接出来的元件。只是一个图片。

view plaincopy to clipboardprint?
package
{

    import flash.display.Sprite;
    import flash.events.*;
    import flash.geom.*;
    import flash.display.DisplayObject;

    public class Main extends Sprite
    {

        private var R:int=240;//球体半径
        private var centerX:Number=stage.stageWidth/2;
        private var centerY:Number=stage.stageHeight/2;
        private var contain:Sprite=new Sprite();//创建容器
        private var angle:Number=30*Math.PI/180;
        private var list:Array=new Array();

        private var photoCount:Array=[1,6,10,12,10,6,1];//图片数目
        private var angleX:Array=[90,60,30,0,-30,-60,-90];//倾斜的x值
        private var angleY:Array=[0,60,36,30,36,60,0];//倾斜的y值

        private var speedx:Number=0;
        private var speedy:Number=0;
        public function Main()
        {
            addChild(contain);
            contain.x=centerX;
            contain.y=centerY;
            contain.z=300;
            createSphere();//创建球体分布
            addEventListener(Event.ENTER_FRAME,Run);
            stage.addEventListener(MouseEvent.MOUSE_MOVE,onMove);
        }

        private function createSphere():void
        {
            for (var i:int=0; i<7; i++)
            {
                for (var j:int=0; j<photoCount[i]; j++)
                {

                    var ball:Photo=new Photo();
                    contain.addChild(ball);
                    list.push(ball);
                    ball.x=R*Math.sin(i*angle)*Math.cos(j*angleY[i]*Math.PI/180);//球体公式表现
                    ball.z=R*Math.sin(i*angle)*Math.sin(j*angleY[i]*Math.PI/180);
                    ball.y=R*Math.cos(i*angle);

                    ball.rotationX= angleX[i];//偏移角度计算
                    ball.rotationY=-j*angleY[i]+270;//

                }
            }

        }
        //鼠标交互
        private function onMove(event:MouseEvent):void
        {
            speedx=(mouseX-contain.x)*0.01;
            speedy=(mouseY-contain.y)*0.01;
        }

        private function Run(event:Event):void
        {

            contain.rotationY+=speedx;
            contain.rotationX+=speedy;
            sortZ();
        }

        //深度排序管理
        private function sortZ():void
        {
            list.sort(depthSort);

            for (var i:int=0; i<list.length; i++)
            {
                var myimage:Photo=list[i];
                contain.setChildIndex(myimage,i);

            }

        }

        private function depthSort(objA:DisplayObject,objB:DisplayObject):int
        {
            var posA:Vector3D=objA.transform.matrix3D.position;
            posA=contain.transform.matrix3D.deltaTransformVector(posA);

            var posB:Vector3D=objB.transform.matrix3D.position;
            posB=contain.transform.matrix3D.deltaTransformVector(posB);
            return posB.z-posA.z;
        }

    }
}