Beispiel: Perspektivische Projektion

Flash Player 10 und höher, Adobe AIR 1.5 und höher

Im folgenden Beispiel wird der Einsatz der perspektivischen Projektion zur Schaffung eines dreidimensionalen Raums veranschaulicht. Es wird gezeigt, wie Sie mit der projectionCenter-Eigenschaft den Fluchtpunkt und die perspektivische Projektion des Raums ändern können. Diese Änderung erzwingt eine Neuberechnung der Brennweite (focalLength) und des Sichtfeldes (fieldOfView) bei gleichzeitiger Verzerrung des 3D-Raums.

In diesem Beispiel geschieht Folgendes:

  1. Erstellung eines Sprite-Objekts mit dem Namen center als Kreis mit einem Fadenkreuz

  2. Zuweisung der Koordinaten des Sprite-Objekts center zur projectionCenter-Eigenschaft der perspectiveProjection-Eigenschaft der transform-Eigenschaft des Stammelements

  3. Definieren von Ereignis-Listenern für mehrere Mausereignisse, die Prozeduren aufrufen, die das projectionCenter so ändern, dass es der Position des Objekts center entspricht

  4. Erstellen von Rechtecken im Akkordeonstil, die die Wände des Perspektivraums bilden

Wenn Sie das Beispiel, ProjectionDragger.swf, testen, sollten Sie den Kreis auf verschiedene Positionen ziehen. Der Fluchtpunkt folgt dem Kreis und wird an der Position des Mauscursors abgesetzt, wenn Sie die Maustaste loslassen. Die Rechtecke, die den Raum umschließen, werden gestreckt und verzerrt, wenn Sie die Projektionsmitte weit von der Bühnenmitte entfernt absetzen.

Die Anwendungsdateien für dieses Beispiel finden Sie auf www.adobe.com/go/learn_programmingAS3samples_flash_de. Die Dateien der Anwendung „ProjectionDragger“ finden Sie im Ordner „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; 
        } 
    } 
}

Für komplexere perspektivischen Projektionen verwenden Sie die Matrix3D-Klasse.