例:遠近法投影

Flash Player 10 以降、Adobe AIR 1.5 以降

次の例は、遠近法投影を使用した 3D 空間の作成を示しています。消失点を変更し、 projectionCenter プロパティを通じて空間の遠近法投影を変更する方法を示します。この変更により、 focalLength fieldOfView が、変更に伴う 3D 空間の歪みによって強制的に再計算されます。

この例では、次の処理を行います。

  1. center という名前のスプライトを、十字線の付いた円として作成します。

  2. center スプライトの座標をルートの transform プロパティの perspectiveProjection プロパティの projectionCenter プロパティに割り当てます。

  3. center オブジェクトの位置の後になるように projectionCenter を変更するハンドラーを呼び出すマウスイベントのイベントリスナーを追加します。

  4. 遠近法空間の壁面を形成するアコーディオンスタイルの 4 つのボックスを作成します。

この ProjectionDragger.swf という例をテストする場合は、円を別の位置にドラッグします。消失点が円に続いて移動し、ドロップされた位置に配置されます。空間の伸縮を囲むボックスを観察し、ステージの中心から離れた方向に投影の中心を移動した場合に歪むことを確認します。

このサンプルのアプリケーションのファイルを入手するには、 www.adobe.com/go/learn_programmingAS3samples_flash_jp を参照してください。 ProjectionDragger アプリケーションファイルは、Samples/ProjectionDragger フォルダーにあります。

package 
{ 
    import flash.display.Sprite; 
    import flash.display.Shape; 
    import flash.geom.Point; 
    import flash.events.*; 
    public class ProjectionDragger extends Sprite 
    { 
        private var center : Sprite; 
        private var boxPanel:Shape; 
        private var inDrag:Boolean = false; 
         
         public function ProjectionDragger():void 
        { 
            createBoxes(); 
            createCenter(); 
        }  
         public function createCenter():void 
         {   
              var  centerRadius:int = 20; 
     
              center = new Sprite(); 
     
              // circle 
              center.graphics.lineStyle(1, 0x000099); 
              center.graphics.beginFill(0xCCCCCC, 0.5); 
              center.graphics.drawCircle(0, 0, centerRadius); 
              center.graphics.endFill(); 
              // cross hairs 
              center.graphics.moveTo(0, centerRadius); 
              center.graphics.lineTo(0, -centerRadius); 
              center.graphics.moveTo(centerRadius, 0); 
              center.graphics.lineTo(-centerRadius, 0); 
              center.x = 175; 
              center.y = 175; 
              center.z = 0; 
              this.addChild(center); 
     
              center.addEventListener(MouseEvent.MOUSE_DOWN, startDragProjectionCenter); 
              center.addEventListener(MouseEvent.MOUSE_UP, stopDragProjectionCenter); 
              center.addEventListener( MouseEvent.MOUSE_MOVE, doDragProjectionCenter); 
              root.transform.perspectiveProjection.projectionCenter = new Point(center.x, center.y); 
        } 
        public function createBoxes():void 
        { 
            // createBoxPanel(); 
            var boxWidth:int = 50; 
            var boxHeight:int = 50; 
            var numLayers:int = 12; 
            var depthPerLayer:int = 50; 
             
            // var boxVec:Vector.<Shape> = new Vector.<Shape>(numLayers); 
            for (var i:int = 0; i < numLayers; i++) 
            { 
                this.addChild(createBox(150, 50, (numLayers - i) * depthPerLayer, boxWidth, boxHeight, 0xCCCCFF)); 
                this.addChild(createBox(50, 150, (numLayers - i) * depthPerLayer, boxWidth, boxHeight, 0xFFCCCC)); 
                this.addChild(createBox(250, 150, (numLayers - i) * depthPerLayer, boxWidth, boxHeight, 0xCCFFCC)); 
                this.addChild(createBox(150, 250, (numLayers - i) * depthPerLayer, boxWidth, boxHeight, 0xDDDDDD)); 
            } 
        } 
         
        public function createBox(xPos:int = 0, yPos:int = 0, zPos:int = 100, w:int = 50, h:int = 50, color:int = 0xDDDDDD):Shape 
        { 
            var box:Shape = new Shape(); 
            box.graphics.lineStyle(2, 0x666666); 
            box.graphics.beginFill(color, 1.0); 
            box.graphics.drawRect(0, 0, w, h); 
            box.graphics.endFill(); 
            box.x = xPos; 
            box.y = yPos; 
            box.z = zPos; 
            return box; 
        } 
        public function startDragProjectionCenter(e:Event)  
        {  
            center.startDrag(); 
            inDrag = true; 
        } 
         
        public function doDragProjectionCenter(e:Event)  
        {  
            if (inDrag) 
            { 
                root.transform.perspectiveProjection.projectionCenter = new Point(center.x, center.y); 
            } 
        } 
         
        public function stopDragProjectionCenter(e:Event) 
        { 
            center.stopDrag();  
            root.transform.perspectiveProjection.projectionCenter = new Point(center.x, center.y); 
            inDrag = false; 
        } 
    } 
}

より複雑な遠近法投影の場合は、Matrix3D クラスを使用します。