FLEX4.6三维旋转轴

Question

我试图在图片上执行一些3D旋转，但它比它看上去更难。事实上，当你在X和/或Y轴上旋转一幅图片时，它看起来是拉伸的(但它是正常的)。但是当你从Z轴旋转时，图片围绕屏幕的Z轴旋转，而不是它自己的轴。所以它看起来就像一张拉长的图片，它绕着一个轴旋转，而不是从一个侧面看，然后把它的中心旋转。

因为我知道这有点让人费解，下面是我使用的函数。你可以尝试一个圆形的图片，以获得更好的“效果”。想象一下你想要一个旋转的圆圈，而不是方向。你会看到图片围绕着屏幕的轴旋转，而不是它自己的轴。

public function rotate(target:IVisualElement, x:Number = 0, y:Number = 0, z:Number = 0, duration:Number = 1000):void
{
    var rotation:Rotate3D = new Rotate3D();
    rotation.autoCenterTransform = true;
    rotation.angleXTo = x;
    rotation.angleYTo = y;
    rotation.angleZTo = z;
    rotation.duration = duration;
    rotation.target = target;

    rotation.play();
}

有没有一个简单的方法来执行这些旋转而不必重新开发车轮？

Answer 1

最后，我成功地拥有了一个完美的、没有外部库的东西。这个诀窍太简单了，我不明白为什么我以前没试过。

我不对同一个元素应用X、Y和Z转换，而是在容器上应用X和Y旋转，在容器内的图片上应用Z轴。

像这样，Z旋转不再干扰另一个轴。

下面是工作测试代码：

<fx:Script>
    <![CDATA[
        private function init():void
        {
            moveZ();
            var timer:Timer = new Timer(5000);
            timer.addEventListener(TimerEvent.TIMER, repeat);
            timer.start();
        }

        private function repeat(e:TimerEvent):void
        {
            moveZ();
        }

        private function moveX():void
        {
            rotX += 20;
            fx.angleXTo = rotX;
            fx.angleYTo = rotY;
            fx.angleZTo = 0;
            fx.duration = 1000;
            fx.play(new Array(container));
        }
        private function moveY():void
        {
            rotY += 20;
            fx.angleXTo = rotX;
            fx.angleYTo = rotY;
            fx.angleZTo = 0;
            fx.duration = 1000;
            fx.play(new Array(container));
        }
        private function moveZ():void
        {
            rotZ += 360;
            fx.angleXTo = 0;
            fx.angleYTo = 0;
            fx.angleZTo = rotZ;
            fx.duration = 5000;
            fx.play(new Array(image));
        }
    ]]>
</fx:Script>

<fx:Declarations>
    <fx:Number id="rotX">0</fx:Number>
    <fx:Number id="rotY">0</fx:Number>
    <fx:Number id="rotZ">0</fx:Number>
    <s:Rotate3D id="fx" autoCenterProjection="true" autoCenterTransform="true"/>
</fx:Declarations>
<s:VGroup id="vGroup" left="10" top="10">
    <s:Button label="X" buttonDown="moveX()"/>
    <s:Button label="Y" buttonDown="moveY()"/>
</s:VGroup>
<s:BorderContainer id="container" width="200" height="200" horizontalCenter="0"
                   verticalCenter="0">
    <s:BitmapImage id="image" width="200" height="200" horizontalCenter="0" smooth="true"
                   source="@Embed('assets/circle.png')" verticalCenter="0"/>
</s:BorderContainer>

​