Question

所以我有一个XML文档，我解析它是为了在WebGL场景中执行操作。所以我有可以或不可以动画的节点。然后我有一个CircularAnimation有一个中心（x，y，z），节点应该旋转，与该中心的半径距离。动画的时间跨度，饱和角度和旋转角度。

<ANIMATION id="cir1" span="5" type="circular" center="0 0 0" radius="3" startang="0" rotang="360"/>

在我的CircularAnimation类中，我有一个使对象移动并更新它的水平方向的功能。类似于地球在太阳上旋转的方式。

我使用Animation类中定义的currTime来计算跨度是否已经结束。

if(this.beg_time == null) this.beg_time = currTime;
else 
{
    if((currTime-this.beg_time) >= this.span) return;
    else 
    {
        // Calculates angles to rotate
        var ang_inc = (this.angle_rot*(currTime-this.beg_time))/this.span;
        var total_rot = ang_inc+this.angle_beg;

        // Rotates node Matrix from the Matrix_Beg
        mat4.rotateY(this.node.matrix, this.node.beg_matrix, total_rot);


        // Moves the node to the desired center
        mat4.translate(this.node.matrix, this.node.matrix, [this.x, this.y, this.z]);

        // Moves the node according to the given radius
        mat4.translate(this.node.matrix, this.node.matrix, [this.radius*Math.cos(ang_inc), 0, this.radius*Math.sin(ang_inc)]);
    }
}

然而，这似乎不正常，任何想法为什么？

Answer 1

首先考虑以下案例：

如果您有一个顶点v应该由beg_matrix转换为v'，则矩阵乘法将类似于v' = beg_matrix * v。如果您希望按矩阵v'翻译T以获得v''，则公式将类似：v'' = T * v'。现在，如果我们想直接从顶点v到顶点v''，我们可以将两个方程混合在一起（替换v'）并得到v'' = T * beg_matrix * v。这基本上就是你要做的事情，除了T需要是一个产生围绕中心点旋转的矩阵。

我相信当你似乎使用的glMatrix库应用转换时，转换应用于前一个矩阵（v'' = beg_matrix * T * v）的右侧侧，它应用了新的转换之前的任何一个（不是你想要的）。

如果您反转所有转换并将它们应用到新矩阵，然后将此新矩阵乘以beg_matrix的左侧侧，我相信它应该让您更接近你在寻找什么。

我没有运行此代码，因为它显然是未提供的大型项目的一部分，但它应该得到重点。

if(this.beg_time == null) this.beg_time = currTime;
else 
{
    if((currTime - this.beg_time) >= this.span) return;
    else
    {
        // Calculates angles to rotate
        var ang_inc = (angle_rot * (currTime - this.beg_time)) / this.span;
        var total_rot = ang_inc + this.angle_beg;

        // Start with the identity matrix and no transformations.
        // Our end goal is a matrix M where M = T * C * R * beg_matrix.
        // T - radial translation
        // C - translation to center point
        // R - rotation by angle
        // beg_matrix - previous transformations
        mat4.identity(this.node.matrix);

        // Moves the node according to the given radius
        // M = T
        mat4.translate(this.node.matrix, this.node.matrix, [this.radius*Math.cos(total_rot), 0, this.radius*Math.sin(total_rot)]);

        // Moves the node to the desired center
        // M = T * C
        mat4.translate(this.node.matrix, this.node.matrix, [this.x, this.y, this.z]);

        // Rotates node Matrix from the Matrix_Beg
        // M = T * C * R
        // (negative angle since the library rotates clockwise along [0, 1, 0]?)
        mat4.rotateY(this.node.matrix, this.node.beg_matrix, -total_rot);

        // apply previous transformations
        // M = T * C * R * beg_matrix
        mat4.multiply(this.node.matrix, this.node.matrix, this.node.beg_matrix);
    }
}

同样在您之前的代码中，您在余弦和正弦计算中使用了ang_inc，我想您可能想要total_rot？无论如何希望这有帮助！干杯！

WebGL在给定中心上旋转

1 个答案: