перспектива во Flash - PullRequest
       36

перспектива во Flash

3 голосов
/ 21 декабря 2009

У меня есть 2D-изображение, которое я хочу нарисовать в реальном 3D, и вращаться вокруг его центра.

Я использую код Actionscript 3 (на самом деле Haxe, без IDE), и я изо всех сил пытаюсь обнаружить значения экспериментально.

У меня есть объект DisplayObject. Если я использую rotateZ = 45, объект вращается вокруг его верхнего левого угла, а не центра; более сложные Display.transform.matrix вещи типа rotate(Math.PI/4) работают так же. Как я могу вращаться вокруг оси Z вокруг центра XY объекта DisplayObject?

А как мне тогда заставить перспективу работать? Является ли перспектива относительно родителя или объекта после поворота?

Какой поворот и положение я использую в экземпляре DisplayObject? Каковы значения для преобразования перспективы и к какому объекту я их применяю?

Ответы [ 3 ]

5 голосов
/ 21 декабря 2009

Очень распространенный подход состоит в том, чтобы иметь сводную 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 ) вокруг начала координат повернёт всех его дочерних элементов, включая плоскость, вокруг этой же точки.

С этим обычно легче работать, чем с матричными преобразованиями. Тем более, что за трехмерными матрицами можно легко следить, если вы не хорошо знакомы с математикой.

Кроме того, простое изменение объекта матрицы plane.transform.matrix3D не повлияет на экранный объект, пока вы не сбросите матрицу. Это может быть очень утомительно, если вы используете движок анимации, например, где вам может понадобиться обработчик события UPDATE, который каждый раз сбрасывает матрицу, например:

plane.transform.matrix3D = myModifiedMatrix3D;

Используя метод поворота, вы можете просто изменять свойства вращения X / Y / Z.

3 голосов
/ 21 декабря 2009

Я слегка озадачен вашим вопросом, но, тем не менее, он интересный.

Есть ли у вас что-то изометрическое, работающее, и вы хотите сделать перспективный проецируемый вид или наоборот? У вас есть перспективный вид и вы хотите изометрии?

В IDE Flash CS4 вы можете играть с несколькими «3D» параметрами. Я собрал несколько мувиклипов в куб, чтобы проиллюстрировать это.

Вот куб, поверните на 45 градусов по оси Y, затем на 45 градусов по оси X, как вы можете видеть на панели трансформации:

flash perspective

Здесь тот же куб с углом перспективы, измененным в группе 3D Положение и вид в Инспекторе свойств справа.

flash isometric

Свойством в IDE можно управлять с помощью actionscript. Каждый DisplayObject имеет свойство transform, которое содержит ссылки для объектов, управляющих свойствами 2D и 3D, такими как: Matrix, Matrix3D, PerspectiveProjection и другие.

Вы можете контролировать искажение перспективы с помощью свойства fieldOfView в PerspectiveProjection.

Предполагая, что клип блока имеет имя box , я мог бы установить его fieldOfView на что-то очень маленькое (допустимые значения больше 0 и меньше 180), и это было бы так.

* * Например, тысяча двадцать восемь
var isometric:PerspectiveProjection = new PerspectiveProjection();
isometric.fieldOfView = 0.00001;
box.transform.perspectiveProjection = isometric;

Обращайтесь к этой статье на devnet . Это также объясняет подход к орбите. В зависимости от того, чего вы пытаетесь достичь, это может быть статья Ральфа Хауверта «Арбол» .

Вот несколько изометрических библиотек as3, таких как FFilmation и as3isolib , но Я не уверен, что именно вам нужно. Как сказал Antpaw, если вы работаете над чем-то большим, вы можете использовать гибкие 3D API, такие как Papervision или Away3D .

В беспокоя мы сделали забавный изометрический интерфейс для визуализации твитов под названием Twigital . Для этого мы использовали papervision.

UPDATE

Кажется, вам нужно динамически вращаться вокруг оси. Вы можете сделать это с помощью матрицы преобразования. Вот как вы это делаете в 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;
    }

Код не мой, хотя это Adobe (Роберт Пеннер, я думаю), часть класса MatrixTransformer .

Теперь для 3D это еще проще, потому что класс Matrix3D имеет такие методы вращения, как prependRotation и appendRotation , которые принимают 3 параметра:

  • градусы: Number
  • ось: Vector3D
  • pivotPoint: Vector3D

Таким образом, вы можете легко повернуть прямоугольник на 30 градусов по оси X примерно на 0,0,0 с помощью чего-то вроде:

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

Опять же, ознакомьтесь со статьями devnet, классом Matrix3D и классом Vector3D .

Если вы хотите получить более глубокие знания о векторах, матрицах и преобразованиях, вы можете проверить 3D Math Primer , все это действительно хорошо объяснено, и это просто математика, так что вещи, которые вы Learn удобны в любой 3D-настройке (чистая as3, away3d, papervision, openGL и т. д.).

НТН, George

0 голосов
/ 21 декабря 2009

вы можете изменить перспективу с помощью rotationX, rotationY, rotationZ свойств объекта, но он работает только во flashplayer> 9, если у вас не будет больше контроля, я предлагаю вам использовать библиотеку papervision3d (например, камера, увеличение масштаба изображения).

...