3

真の 3D で描画したい 2D 画像があり、その中心を中心に回転します。

私は Actionscript 3 コード (実際には Haxe、IDE なし) を使用しており、実験によって値を発見するのに苦労しています。

私は DisplayObject を持っています。を使用するrotateZ = 45と、オブジェクトは中央ではなく左上を中心に回転します。より複雑なDisplay.transform.matrixものもrotate(Math.PI/4)同じように機能します。DisplayObject の XY 中心を中心に Z 軸上で回転するにはどうすればよいですか?

そして、どうすればパースペクティブを機能させることができますか? パースペクティブは親に対して相対的ですか、それとも回転後のオブジェクトに対して相対的ですか?

DisplayObject インスタンスで使用する回転と位置は? 透視変換の値は何ですか? また、どのオブジェクトに適用しますか?

4

3 に答える 3

5

非常に一般的なアプローチは、ピボット DisplayObjectContainer を用意し、実際の平面をそのコンテナーに追加して、中心からオフセットすることです。次に、実際にコンテナを回転させます。

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;

ここでは、平面はpivotという名前のコンテナー内に配置され、幅と高さの半分だけオフセットされます。これは、平面表示オブジェクトの中心がコンテナーの登録点 (原点) に位置合わせされることを意味します。原点を中心にコンテナを回転 ( pivot ) すると、平面を含むすべての子が同じ点を中心に回転するようになりました。

これは通常、マトリックス変換よりも簡単に操作できます。特に、数学に精通していない限り、3D 行列を理解するのは簡単ではありません。

また、plane.transform.matrix3Dマトリックス オブジェクトを変更しても、マトリックスをリセットするまで表示オブジェクトには影響しません。たとえば、次のように、毎回マトリックスをリセットする UPDATE イベント ハンドラーが必要なトゥイーン エンジンを使用している場合、これは非常に面倒な作業になる可能性があります。

plane.transform.matrix3D = myModifiedMatrix3D;

ピボット アプローチを使用すると、rotationX/Y/Z プロパティを簡単にトゥイーンできます。

于 2009-12-21T14:31:06.590 に答える
3

私はあなたの質問に少し混乱していますが、それでも興味深いものです。

アイソメ図が機能していて、透視投影ビューまたはその逆をレンダリングしたいですか？あなたは透視図を持っていて、アイソメ図に行きたいですか？

Flash CS4 IDEでは、「3D」のいくつかのパラメーターで遊ぶことができます。ポイントを説明するために、一連のMovieClipsを立方体に組み立てました。

これが立方体です。変換パネルに表示されているように、Yで45度、次にXで45度回転します。

フラッシュパースペクティブ

これは同じ立方体ですが、右側のプロパティインスペクターの[3D位置とビュー]グループでパースペクティブ角度が変更されています。

フラッシュアイソメ

IDEのプロパティは、actionscriptを介して制御できます。各DisplayObjectには、Matrix、Matrix3D、PerspectiveProjectionなどの2Dおよび3Dプロパティを制御するオブジェクトの参照を保持する変換プロパティがあります。

PerspectiveProjectionのfieldOfViewプロパティを使用して、パースペクティブの歪みを制御できます。

ボックスクリップの名前がboxであるとすると、fieldOfViewを非常に小さい値に設定できます（許可される値が0より大きく180より小さい場合のみ）、それだけです。

例えば

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

軌道を回るには、 devnetのこの記事をチェックしてください。軌道へのアプローチについても説明します。達成しようとしていることによっては、ラルフ・ハウワートのアークボールの記事かもしれません。

FFilmationやas3isolibなどのas3アイソメトリックライブラリがいくつかありますが、正確に何が必要かわかりません。antpawが言っていたように、より大きなものに取り組んでいる場合は、PapervisionやAway3Dなどの柔軟性のある3DAPIを使用できます。

Disturbでは、Twigitalと呼ばれるツイートを視覚化するための楽しいアイソメトリックインターフェイスを作成しました。そのためにペーパービジョンを使用しました。

アップデート

ピボットを中心に動的に回転する必要があるようです。これは、変換行列を使用して行うことができます。これが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;
    }

コードは私のものではありませんが、それはMatrixTransformerクラスの一部であるAdobe（Robert Pennerの私が推測している）です。

Matrix3Dクラスには、3つのパラメーターを受け入れるprependRotationやappendRotationなどの回転メソッドがあるため、 3Dの場合はさらに簡単になります。

  • 度：数
  • axis：Vector3D
  • ピボットポイント：Vector3D

したがって、次のようなものを使用して、ボックスをX軸上で0,0,0を中心に30度簡単に回転させることができます。

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

繰り返しになりますが、devnetの記事、Matrix3DクラスおよびVector3Dクラスを確認してください。

ベクトル、行列、変換についてより深い知識を得たい場合は、3D Math Primerをチェックしてください。すべてが非常によく説明されており、単なる数学なので、学習した内容は3Dセットアップで便利です（純粋as3、away3d、papervision、openGLなど）。

HTH、ジョージ

于 2009-12-21T11:45:31.377 に答える
0

オブジェクトのプロパティを使用してパースペクティブを変更できますが、rotationX, rotationY, rotationZ9を超えるフラッシュプレーヤーでのみ機能します。より詳細な制御が必要な場合は、papervision3dライブラリ（カメラの視野、ズームなど）を使用することをお勧めします。

于 2009-12-21T10:54:57.907 に答える