Javascript 在给定中心上旋转的WebGL

所以我有一个XML文档，我解析它以便在WebGL场景中执行操作。 因此，我有可以或不能设置动画的节点。 然后我有一个圆形，它有一个中心（x，y，z），节点应该围绕这个中心旋转一个半径距离。动画的时间跨度、旋转角度和旋转角度

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

---

然而，这似乎不起作用，你知道为什么吗？

先了解一下背景，以防万一：

如果您有一个顶点

v

，该顶点应通过

beg_矩阵

进行变换以获得

v'

，则矩阵乘法将类似于

v'=beg_矩阵*v

。然后，如果您想通过矩阵

T

来转换

v'

，得到

v'

，等式将类似：

v'=T*v'

。现在，如果我们想直接从顶点

v

到顶点

v'

，我们可以将这两个方程混合在一起（代替

v'

），得到

v'=T*beg_矩阵*v

。这基本上就是您正在尝试做的，除了

T

需要是一个矩阵，该矩阵产生围绕中心点的旋转

我相信，当您似乎正在使用的glMatrix库应用转换时，转换将应用于上一个矩阵的右侧（

v'=beg_matrix*T*v

），该矩阵将新转换应用于之前的任何转换（而不是您想要的）

如果你把所有的变换都倒过来，应用到一个新的矩阵上，然后在

beg_matrix

的左边乘以这个新矩阵，我相信这会让你更接近你想要的

我没有运行这段代码，因为它显然是一个更大的项目的一部分，没有提供，但它应该能让人明白这一点

if（this.beg_time==null）this.beg_time=currTime；
其他的
{
如果（（currTime-this.beg_time）>=this.span）返回；
其他的
{
//计算要旋转的角度
var ang_inc=（angle_rot*（currTime-this.beg_time））/this.span；
var total_rot=ang_inc+此角度；
//从单位矩阵开始，不要变换。
//我们的最终目标是矩阵M，其中M=T*C*R*beg_矩阵。
//径向平移
//C-到中心点的平移
//R-按角度旋转
//beg_矩阵-以前的变换
mat4.标识（this.node.matrix）；
//根据给定半径移动节点
//M=T
mat4.translate（this.node.matrix，this.node.matrix，[this.radius*Math.cos（total_rot），0，this.radius*Math.sin（total_rot）]；
//将节点移动到所需的中心
//M=T*C
mat4.translate（this.node.matrix，this.node.matrix，[this.x，this.y，this.z]）；
//从矩阵旋转节点矩阵
//M=T*C*R
//（由于库沿[0,1,0]顺时针旋转，因此为负角度）
mat4.rotateY（this.node.matrix，this.node.beg_矩阵，-total_rot）；
//应用以前的转换
//M=T*C*R*beg_矩阵
mat4.乘法（this.node.matrix，this.node.matrix，this.node.beg_matrix）；
}
}

---

同样，在您以前的代码中，您在余弦和正弦计算中使用了

ang_inc

，我想您可能想要

total_rot

？无论如何，希望这有帮助！干杯

先来点背景，以防万一：

如果您有一个顶点

v

，该顶点应通过

beg_矩阵

进行变换以获得

v'

，则矩阵乘法将类似于

v'=beg_矩阵*v

。然后，如果您想通过矩阵

T

来转换

v'

，得到

v'

，等式将类似：

v'=T*v'

。现在，如果我们想直接从顶点

v

到顶点

v'

，我们可以将这两个方程混合在一起（代替

v'

），得到

v'=T*beg_矩阵*v

。这基本上就是您正在尝试做的，除了

T

需要是一个矩阵，该矩阵产生围绕中心点的旋转

我相信，当您似乎正在使用的glMatrix库应用转换时，转换将应用于上一个矩阵的右侧（

v'=beg_matrix*T*v

），该矩阵将新转换应用于之前的任何转换（而不是您想要的）

如果你把所有的变换都倒过来，应用到一个新的矩阵上，然后在

beg_matrix

的左边乘以这个新矩阵，我相信这会让你更接近你想要的

我没有运行这段代码，因为它显然是一个更大的项目的一部分，没有提供，但它应该能让人明白这一点

if（this.beg_time==null）this.beg_time=currTime；
其他的
{
如果（（currTime-this.beg_time）>=this.span）返回；
其他的
{
//计算要旋转的角度
var ang_inc=（angle_rot*（currTime-this.beg_time））/this.span；
var total_rot=ang_inc+此角度；
//从单位矩阵开始，不要变换。
//我们的最终目标是矩阵M，其中M=T*C*R*beg_矩阵。
//径向平移
//C-到中心点的平移
//R-按角度旋转
//beg_矩阵-以前的变换
mat4.标识（this.node.matrix）；
//根据给定半径移动节点
//M=T
mat4.translate（this.node.matrix，this.node.matrix，[this.radius*Math.cos（total_rot），0，this.radius*Math.sin（total_rot）]；
//将节点移动到所需的中心
//M=T*C
mat4.translate（this.node.matrix，this.node.matrix，[this.x，this.y，this.z]）；
//从矩阵旋转节点矩阵
//M=T*C*R
//（由于库沿[0,1,0]顺时针旋转，因此为负角度）
mat4.rotateY（this.node.matrix，thi
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)]);
    }
}