Perspektive in Flash

Question

Ich habe ein 2D-Bild, das ich in echten 3D zeichnen möge, und Drehung um seinen Mittelpunkt.

Ich bin mit Actionscript 3-Code (eigentlich Haxe, keine IDE), und ich bin zu kämpfen, die Werte durch Versuche zu entdecken.

Ich habe einen Display. Wenn ich rotateZ = 45 verwenden, wird das Objekt dreht sich um seinen linken oberen Ecke, anstatt Zentrum; mehr Display.transform.matrix Dinge wie rotate(Math.PI/4) Arbeit die gleiche Art und Weise kompliziert. Wie kann ich drehen sich auf der Z-Achse um den XY-Center Display?

Und wie bekomme ich dann die Perspektive zu arbeiten? Ist die Perspektive in Bezug auf die Eltern oder das Objekt nach der Rotation?

Was Rotation und Position verwende ich auf der Display Instanz? Was sind die Werte für die perspektivische Transformation, und auf welches Objekt kann ich sie anwenden?

Answer 1

Ein sehr gebräuchlicher Ansatz ist einen Pivot-Display zu haben, fügen Sie Ihre aktuelle Ebene in diesen Container, und es aus der Mitte versetzt. Dann drehen Sie tatsächlich den Behälter.

var pivot : DisplayObjectContainer;

// plane is a display object (e.g. Sprite) that has been created previuosly
// and contains your 2D image.
plane.x = -plane.width/2;
plane.y = -plane.height/2;
pivot.addChild(plane);

pivot.rotationY = 45;

Hier ist die Ebene in den Container mit dem Namen gesetzt wird Dreh und Offset um die Hälfte es die Breite und Höhe. Dies bedeutet, dass die Mitte des ebenen Anzeigeobjekt wird mit der Registrierpunkt (origin) des Behälters ausgerichtet werden. Drehen des Behälters ( Dreh ) um den Ursprung wird nun alle Kinder es drehen, einschließlich der Ebene, um die gleiche Stelle.

Dies ist in der Regel einfacher zu arbeiten als mit Matrixtransformationen. Gerade als 3D-Matrizen können leicht hart werden zu folgen, es sei denn, Sie mit der Mathematik leicht vertraut sind.

Außerdem nur Modifizieren der plane.transform.matrix3D Matrix-Objekt wird das Anzeigeobjekt nicht beeinflussen, bis Sie die Matrix zurück. Dies kann sehr mühsam sein, wenn Sie einen Tween-Motor zum Beispiel verwenden, in dem Sie ein UPDATE-Ereignishandler haben müssen möglicherweise, dass setzt die Matrix jedes Mal, etwa so:

plane.transform.matrix3D = myModifiedMatrix3D;

den Pivot-Ansatz verwenden, können Sie einfach tweenen die rotationX / Y / Z-Eigenschaften.

Answer 2

ich Ihre Frage etwas verwirrt, aber es ist interessant dennoch.

Haben Sie etwas isometrischen Arbeits haben und wollen eine perspektivische Ansicht projiziert oder umgekehrt machen? Sie haben eine perspektivische Ansicht und wollen isometrische gehen?

In den Flash CS4 IDE können Sie mit einem '3D' einigen Parametern spielen. Ich habe einen Haufen Movieclip in einen Würfel zusammengesetzt, den Punkt zu veranschaulichen.

Hier ist der Würfel, bei 45 Grad auf Y drehen, dann bei 45 Grad auf X, wie Sie in dem Transform-Panel sehen können:

Dies ist der gleiche Würfel, mit der Perspektive von unten geändert in der 3D-Position und Ansicht Gruppe im Eigenschafteninspektoren auf dem rechten Seite.

Die Eigenschaft in der IDE kann durch Actionscript gesteuert werden. Jede Display hat eine Transformations Eigenschaft, die Referenzen für Objekte Steuern der 2D- und 3D-Eigenschaften wie hält. Matrix, Matrix3D, PerspectiveProjection und andere

Sie können die Perspektive steuern Verzerrung durch die fieldOfView Eigenschaft PerspectiveProjection.

die Box Clip Unter der Annahme, heißt Box , ich konnte es die fieldOfView zu etwas wirklich klein (als erlaubten Werten größer als 0 und kleiner als 180 nur) gesetzt und das wäre es.

z.

var isometric:PerspectiveProjection = new PerspectiveProjection();
isometric.fieldOfView = 0.00001;
box.transform.perspectiveProjection = isometric;

Für umkreisen, lesen Sie in diesem Artikel auf DevNet . Es wird erläutert, einen Ansatz als auch zu umkreisen. Je nachdem, was Sie versuchen zu erreichen, es könnte Ralph Hauwert der Arcball Artikel .

Hier sind einige AS3 isometrische Bibliotheken da draußen wie FFilmation und as3isolib , aber Ich bin mir nicht sicher, was Sie genau brauchen. Wie antpaw sagte, wenn Sie auf etwas arbeiten größer, könnten Sie die Flexibilität, 3D-APIs wie Papervision oder Away3D .

disturb wir Spaß isometrische Schnittstelle gemacht für die Visualisierung Tweets genannt Twigital . Wir verwenden Papervision für die.

UPDATE

Es scheint, Sie müssen dynamisch einen Drehpunkt drehen sich um. Sie können tun, dass die Matrix-Transformation. Hier ist, wie Sie es tun in 2D :

/**
     * Rotates a matrix about a point defined inside the matrix's transformation space.
     * This can be used to rotate a movie clip around a transformation point inside itself. 
     *
     * @param m A Matrix instance.
     *
     * @param x The x coordinate of the point.
     *
     * @param y The y coordinate of the point.
     *
     * @param angleDegrees The angle of rotation in degrees.
     * @playerversion Flash 9.0.28.0
     * @langversion 3.0
     * @keyword Matrix, Copy Motion as ActionScript    
     * @see flash.geom.Matrix         
     */
    public static function rotateAroundInternalPoint(m:Matrix, x:Number, y:Number, angleDegrees:Number):void
    {
        var point:Point = new Point(x, y);
        point = m.transformPoint(point);
        m.tx -= point.x;
        m.ty -= point.y;
        m.rotate(angleDegrees*(Math.PI/180));
        m.tx += point.x;
        m.ty += point.y;
    }



    /**
     * Rotates a matrix about a point defined outside the matrix's transformation space.
     * This can be used to rotate a movie clip around a transformation point in its parent. 
     *
     * @param m A Matrix instance.
     *
     * @param x The x coordinate of the point.
     *
     * @param y The y coordinate of the point.
     *
     * @param angleDegrees The angle of rotation in degrees.
     * @playerversion Flash 9.0.28.0
     * @langversion 3.0
     * @keyword Matrix, Copy Motion as ActionScript    
     * @see flash.geom.Matrix       
     */
    public static function rotateAroundExternalPoint(m:Matrix, x:Number, y:Number, angleDegrees:Number):void
    {
        m.tx -= x;
        m.ty -= y;
        m.rotate(angleDegrees*(Math.PI/180));
        m.tx += x;
        m.ty += y;
    }

Der Code ist nicht obwohl meine, es ist Adobes (Robert Penner ist vermute ich), ein Teil der Klasse Matrixtransformer.

Jetzt für 3D , ist es noch einfacher, weil die Matrix3D-Klasse Rotationsverfahren hat wie prependRotation und appendRotation , die 3 Parameter akzeptieren:

• Grad: Zahl
• Achse: Vector3D
• pivotpoint: Vector3D

So können Sie leicht eine Schachtel 30 Grad auf der X-Achse drehen kann, um 0,0,0 mitso etwas wie:

var m:Matrix3D = box.transform.matrix3D;
m.prependRotation(30,Vector3D.X_AXIS,new Vector3D(0,0,0));

Auch die DevNet Artikel auszuchecken, die Matrix3D-Klasse und die Vector3D Klasse.

Wenn Sie mehr in die Tiefe Wissen über Vektoren, Matrizen und Transformationen erhalten möchten, können Sie überprüfen 3D Math Primer , ist das ganze wirklich gut erklärt, und es ist nur Mathematik, so dass die Dinge, die Sie sind in jedem 3D-Setup (reine aS3, Away3D, Papervision, openGL, etc.).

praktisch lernen

HTH, George

Answer 3

Sie können die Perspektive mit rotationX, rotationY, rotationZ Objekteigenschaften ändern, aber es ist nur in Flashplayer arbeiten> 9, wenn Sie mehr wonna haben Kontrolle Ich schlage vor, Sie papervision3d Bibliothek verwenden (zum Beispiel Kamera FOV, Zoom ect.).