WebGL在給定的中心上旋轉

所以我有一個XML文檔，我解析爲了在WebGL場景中執行操作。所以我有可以或不可以動畫的節點。然後我有一個CircularAnimation，它有一個Center（x，y，z），Node應該以距離該中心的Radius距離旋轉。動畫的一段時間，一個可調角度和一個旋轉角度。WebGL在給定的中心上旋轉

<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)]); 
    } 
}

但是，這似乎沒有正常工作，任何想法爲什麼？

來源

2015-11-14 Carlos Pereira

首先給出一些背景，以防萬一：

如果你有一個頂點v應該由beg_matrix轉化得到v'，矩陣乘法的樣子v' = beg_matrix * 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？無論如何，希望這有助於！乾杯!

來源

2015-11-19 10:06:30

WebGL在給定的中心上旋轉

回答

相關問題