перспектива во флеше

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

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

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

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

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


person Will    schedule 21.12.2009    source источник
comment
Похоже, вы вращаетесь вокруг точки регистрации, которая находится в левом верхнем углу вашего объекта.   -  person Aaron    schedule 21.12.2009


Ответы (3)


Очень распространенный подход состоит в том, чтобы иметь поворотный 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;

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

person richardolsson    schedule 21.12.2009
comment
Это самый простой способ. Подтверждено, работает для меня и значительно упростило мой код. - person Will; 22.12.2009

Меня немного смущает ваш вопрос, но тем не менее он интересный.

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

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

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

вспышка в перспективе

Вот тот же куб с измененным углом перспективы в группе 3D Position And View в инспекторе свойств справа.

изометрическая вспышка

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

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

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

e.g.

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

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

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

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

ОБНОВЛЕНИЕ

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

  • градусы: число
  • ось:Вектор3D
  • 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 class и класс Vector3D.

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

ХТХ, Джордж

person George Profenza    schedule 21.12.2009
comment
спасибо Джордж; Я попытался немного перефразировать свой вопрос, чтобы уйти от изометрии. - person Will; 21.12.2009
comment
Я также пересмотрел свой ответ, как вы можете видеть в ОБНОВЛЕНИИ. Удачи! - person George Profenza; 21.12.2009

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

person antpaw    schedule 21.12.2009
comment
да, но каковы будут значения? Должен ли я устанавливать их в определенном порядке, например. установить преобразование перспективы в сцену перед добавлением растрового изображения или? - person Will; 21.12.2009