Question

我有一个2D图像，我想用真正的3D绘制，并围绕它的中心旋转。

我正在使用Actionscript 3代码（实际上是Haxe，没有IDE），我正在努力通过实验发现这些值。

我有一个DisplayObject。如果我使用rotateZ = 45，则对象围绕它的左上角而不是中心旋转;更复杂的Display.transform.matrix之类的内容rotate(Math.PI/4)的工作方式相同。如何围绕DisplayObject的XY中心在Z轴上旋转？

然后我如何让观点发挥作用？相对于父项的透视图，还是旋转后的对象？

我在DisplayObject实例上使用什么旋转和位置？透视变换的值是什么，以及我应用它们的对象是什么？

Answer 1

一种非常常见的方法是使用一个旋转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;

使用pivot方法，您可以简单地补间rotationX / Y / Z属性。

Answer 2

我对你的问题感到有些困惑，但它仍然是一个有趣的问题。

你有等距工作的东西，想要渲染透视投影视图或反过来？你有一个透视图，想要去等轴测？

在Flash CS4 IDE中，您可以使用“3D”参数进行播放。我已经将一堆MovieClip组装成一个立方体来说明这一点。

这是立方体，在Y上旋转45度，然后在X上旋转45度，如您在变换面板中看到的那样：

flash perspective

这是同一个立方体，右侧属性检查器中的“3D位置和视图”组中的“透视角度”已更改。

flash isometric

IDE中的属性可以通过actionscript来控制。每个DisplayObject都有一个transform属性，用于保存控制2D和3D属性的对象的引用，如：Matrix，Matrix3D， PerspectiveProjection 等。

您可以通过PerspectiveProjection的fieldOfView属性控制透视失真。

假设盒子剪辑被命名为 box ，我可以将它的fieldOfView设置为非常小的值（因为你的允许值大于0且小于180），那就是它。

e.g。

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

有关轨道运行，请查看此article on devnet。它解释了轨道运行的方法。根据您要实现的目标，可能会Ralph Hauwert's Arcball article。

这里有一些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的（Robert Penner，我猜），是MatrixTransformer类的一部分。

现在，对于3D ，它更容易，因为Matrix3D类具有prependRotation和appendRotation等旋转方法，它们接受3个参数：

度：编号
轴：的Vector3D
pivotPoint：的Vector3D

因此，你可以轻松地将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等）。

HTH，乔治

Answer 3

您可以使用rotationX, rotationY, rotationZ对象属性更改透视图，但它仅适用于flashplayer＆gt; 9，如果你有更多的控制权我建议你使用papervision3d库（例如相机fov，缩放等）。

Flash中的透视图

3 个答案: