堆棧內存溢出
  簡體   English   中英

有沒有辦法從 4x4 矩陣計算 X 和 Y 軸上的 3D 旋轉

[英]Is there a way to calculate 3D rotation on X and Y axis from a 4x4 matrix

 原文  2019-07-05 09:20:49  1   1    javascript/ math/ matrix/ rotation/ euler-angles

問題描述

首先，我根本不是數學專家。 請容忍我的數學錯誤並在必要時糾正我，我很樂意學習。

我有一個立方體，它使用帶有變換的 css 動畫旋轉：matrix3d(4x4)。 我還可以手動旋轉立方體，將用戶操作轉換為相同的 matrix3d 轉換。

當用戶停止從用戶離開它的地方開始交互時，我想要的是一個帶有 css 的旋轉立方體。 這是我通過獲取多維數據集的變換 matrix3d 值並使用乘法動態設置 css 的關鍵幀來成功完成的事情。

然而，當用戶開始與立方體交互時，立方體會跳轉到它最后一個已知的手動旋轉點並從那里繼續，因為我無法弄清楚如何從 4x4 矩陣獲得 X 和 Y 軸上的旋轉。

我目前正在使用以下庫Rematrix ，它可以幫助我從手動旋轉到 css 旋轉，如上所述。

我一直在研究關於歐拉的文章，以及如何從歐拉到矩陣，反之亦然，但就像我之前提到的，這是我缺乏數學知識阻礙我思考的地方。 我似乎無法弄清楚。

作為參考，這里有一些我讀過的文章，試圖解決我的問題。

最后一個來源對我來說最有意義，但是，如果我是對的，在這種情況下沒有用，因為它是關於 2D 轉換，而不是 3D。

我通過以下方式獲得當前的 matrix3d：

const style = getComputedStyle(this.element).transform
const matrix = Rematrix.parse(style)

對於手動旋轉，我使用基於用戶鼠標位置（positionY、positionX）的矩陣乘法。

const r1 = Rematrix.rotateX(this.positionY)
const r2 = Rematrix.rotateY(this.positionX)

const transform = [r1, r2].reduce(Rematrix.multiply)

this.element.style[userPrefix.js + 'Transform'] = Rematrix.toString(transform)

從手動到 css 旋轉，我使用以下函數：

const setCssAnimationKeyframes = (lastTransform, animationData) => {
  const rotationIncrement = 90

  let matrixes = []

  for (let i = 0; i < 5; i++) {
    const rX = Rematrix.rotateX(rotationIncrement * i)
    const rY = Rematrix.rotateY(rotationIncrement * i)

    const matrix = [lastTransform, rX, rY].reduce(Rematrix.multiply);

    matrixes.push(matrix)
  }

  animationData.innerHTML = `
    @keyframes rotateCube {
      0% {
        transform: ${Rematrix.toString(matrixes[0])};
      }
      25% {
        transform: ${Rematrix.toString(matrixes[1])};
      }
      50% {
        transform: ${Rematrix.toString(matrixes[2])};
      }
      75% {
        transform: ${Rematrix.toString(matrixes[3])}};
      }
      100% {
        transform: ${Rematrix.toString(matrixes[4])};
      }
    }
  `;
}

請提供任何有用信息的答案或評論。 盡管這是最受歡迎的，但我不希望您提供一個完整的代碼示例。 任何形式的任何有用信息都非常感謝。

1 個解決方案

解決方案1
 4 已采納  2019-07-09 10:03:48

先讀：

因為我使用那里的術語。

好吧，我懶得將所有內容與我的環境等同起來，但基於此：

對於任何旋轉順序，生成的m 3D 旋轉子矩陣將始終具有以下溫度：

(+/-)sin(a)
(+/-)sin(b)cos(a)
(+/-)cos(b)cos(a)
(+/-)sin(c)cos(a)
(+/-)cos(c)cos(a)

只有它們的符號和位置會隨着變換順序和約定而改變。 因此，要識別它們，請執行以下操作：

  1. 讓我們先設置一些重要的歐拉角

    他們的|sin| , |cos| 值必須不同，所以 6 個值都不相同，否則這將不起作用！！！

    我選擇了這些：

     ex = 10 [deg] ey = 20 [deg] ez = 30 [deg]

  2. 計算旋轉矩陣m

    因此，按順序在單位矩陣上應用 3 次歐拉旋轉。 在我的設置中，結果矩陣如下所示：

     double m[16] = { 0.813797652721405, 0.543838143348694,-0.204874128103256, 0, // Xx,Xy,Xz,0.0 -0.469846308231354, 0.823172926902771, 0.318795770406723, 0, // Yx,Yy,Yz,0.0 0.342020153999329,-0.163175910711288, 0.925416529178619, 0, // Zx,Zy,Zz,0.0 0 , 0 , 0 , 1 // Ox,Oy,Oz,1.0 };

    請注意，我使用 OpenGL 約定，基向量X,Y,Z和原點O由矩陣線表示，矩陣是直接的。

  3. 識別(+/-)sin(a)熱

    a可以是任何歐拉角，所以打印它們的sin ：

     sin(ex) = 0.17364817766693034885171662676931 sin(ey) = 0.34202014332566873304409961468226 sin(ez) = 0.5

    現在看到m[8] = sin(ey)所以我們找到了我們的熱量……現在我們知道了：

     ey = a = asin(m[8]);

  4. 識別(+/-)???(?)*cos(a) therms

    只需為未使用的角度打印 cos(?)*cos(ey) 。 所以如果ey是 20 度，我會打印 10 度和 30 度...

     sin(10 deg)*cos(20 deg) = 0.16317591116653482557414168661534 cos(10 deg)*cos(20 deg) = 0.92541657839832335306523309767123 sin(30 deg)*cos(20 deg) = 0.46984631039295419202705463866237 cos(30 deg)*cos(20 deg) = 0.81379768134937369284469321724839

    當我們再次查看m時，我們可以交叉匹配：

     sin(ex)*cos(ey) = 0.16317591116653482557414168661534 = -m[9] cos(ex)*cos(ey) = 0.92541657839832335306523309767123 = +m[10] sin(ez)*cos(ey) = 0.46984631039295419202705463866237 = -m[4] cos(ez)*cos(ey) = 0.81379768134937369284469321724839 = +m[0]

    從中我們可以計算角度......

     sin(ex)*cos(ey) = -m[ 9] cos(ex)*cos(ey) = +m[10] sin(ez)*cos(ey) = -m[ 4] cos(ez)*cos(ey) = +m[ 0] ------------------------ sin(ex) = -m[ 9]/cos(ey) cos(ex) = +m[10]/cos(ey) sin(ez) = -m[ 4]/cos(ey) cos(ez) = +m[ 0]/cos(ey)

    所以最后：

     --------------------------------------------- ey = asin(m[8]); ex = atan2( -m[ 9]/cos(ey) , +m[10]/cos(ey) ) ez = atan2( -m[ 4]/cos(ey) , +m[ 0]/cos(ey) ) ---------------------------------------------

就是這樣。 如果你有不同的布局/約定/轉換順序，這種方法仍然應該有效......只有索引和符號發生了變化。 這里有一個小的C++/VCL OpenGL示例，我對此進行了測試（ X,Y,Z順序）：

//---------------------------------------------------------------------------
#include <vcl.h>
#include <math.h>
#pragma hdrstop
#include "Unit1.h"
#include "gl_simple.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
bool _redraw=true;                  // need repaint?

//---------------------------------------------------------------------------
double m[16]=               // uniform 4x4 matrix
    {
    1.0,0.0,0.0,0.0,        // Xx,Xy,Xz,0.0
    0.0,1.0,0.0,0.0,        // Yx,Yy,Yz,0.0
    0.0,0.0,1.0,0.0,        // Zx,Zy,Zz,0.0
    0.0,0.0,0.0,1.0         // Ox,Oy,Oz,1.0
    };
double e[3]={0.0,0.0,0.0};  // euler angles x,y,z order
//---------------------------------------------------------------------------
const double deg=M_PI/180.0;
const double rad=180.0/M_PI;
void matrix2euler(double *e,double *m)
    {
    double c;
    e[1]=asin(+m[ 8]);
    c=cos(e[1]); if (fabs(c>1e-20)) c=1.0/c; else c=0.0;
    e[0]=atan2(-m[ 9]*c,m[10]*c);
    e[2]=atan2(-m[ 4]*c,m[ 0]*c);
    }
//---------------------------------------------------------------------------
void gl_draw()
    {
    _redraw=false;
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    glMatrixMode(GL_PROJECTION);
//  glLoadIdentity();
    glMatrixMode(GL_TEXTURE);
    glLoadIdentity();
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
    glTranslated(0.0,0.0,-10.0);    // some distance from camera ...

    glDisable(GL_DEPTH_TEST);
    glDisable(GL_TEXTURE_2D);

    int i;
    // draw source matrix:
    glMatrixMode(GL_MODELVIEW);
    glPushMatrix();
    glTranslated(-1.0,0.0,0.0); // source matrix on the left
    glMultMatrixd(m);
    glBegin(GL_LINES);
    glColor3f(1.0,0.0,0.0); glVertex3d(0.0,0.0,0.0); glVertex3d(1.0,0.0,0.0);
    glColor3f(0.0,1.0,0.0); glVertex3d(0.0,0.0,0.0); glVertex3d(0.0,1.0,0.0);
    glColor3f(0.0,0.0,1.0); glVertex3d(0.0,0.0,0.0); glVertex3d(0.0,0.0,1.0);
    glEnd();
    glPopMatrix();

    // draw source matrix:
    glMatrixMode(GL_MODELVIEW);
    glPushMatrix();
    glTranslated(m[12],m[13],m[14]);    // source matrix in the middle
    glBegin(GL_LINES);
    glColor3f(1.0,0.0,0.0); glVertex3d(0.0,0.0,0.0); glVertex3dv(m+0);
    glColor3f(0.0,1.0,0.0); glVertex3d(0.0,0.0,0.0); glVertex3dv(m+4);
    glColor3f(0.0,0.0,1.0); glVertex3d(0.0,0.0,0.0); glVertex3dv(m+8);
    glEnd();
    glPopMatrix();

    // draw euler angles
    matrix2euler(e,m);
    glMatrixMode(GL_MODELVIEW);
    glPushMatrix();
    glTranslated(+1.0,0.0,0.0); // euler angles on the right
    glRotated(e[0]*rad,1.0,0.0,0.0);
    glRotated(e[1]*rad,0.0,1.0,0.0);
    glRotated(e[2]*rad,0.0,0.0,1.0);
    glBegin(GL_LINES);
    glColor3f(1.0,0.0,0.0); glVertex3d(0.0,0.0,0.0); glVertex3d(1.0,0.0,0.0);
    glColor3f(0.0,1.0,0.0); glVertex3d(0.0,0.0,0.0); glVertex3d(0.0,1.0,0.0);
    glColor3f(0.0,0.0,1.0); glVertex3d(0.0,0.0,0.0); glVertex3d(0.0,0.0,1.0);
    glEnd();
    glPopMatrix();

//  glFlush();
    glFinish();
    SwapBuffers(hdc);
    }
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner):TForm(Owner)
    {
    gl_init(Handle);
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
    glRotated(10.0,1.0,0.0,0.0);
    glRotated(20.0,0.0,1.0,0.0);
    glRotated(30.0,0.0,0.0,1.0);
    glGetDoublev(GL_MODELVIEW_MATRIX,m);
    }
//---------------------------------------------------------------------------
void __fastcall TForm1::FormDestroy(TObject *Sender)
    {
    gl_exit();
    }
//---------------------------------------------------------------------------
void __fastcall TForm1::FormPaint(TObject *Sender)
    {
    gl_draw();
    }
//---------------------------------------------------------------------------
void __fastcall TForm1::Timer1Timer(TObject *Sender)
    {
    if (_redraw) gl_draw();
    }
//---------------------------------------------------------------------------
void __fastcall TForm1::FormResize(TObject *Sender)
    {
    gl_resize(ClientWidth,ClientHeight);
    _redraw=true;
    }
//---------------------------------------------------------------------------
void __fastcall TForm1::FormKeyDown(TObject *Sender, WORD &Key, TShiftState Shift)
    {
//  Caption=Key;
    const double da=5.0;
    if (Key==37){ _redraw=true; glMatrixMode(GL_MODELVIEW); glPushMatrix(); glLoadMatrixd(m); glRotated(+da,0.0,1.0,0.0); glGetDoublev(GL_MODELVIEW_MATRIX,m); glPopMatrix(); }
    if (Key==39){ _redraw=true; glMatrixMode(GL_MODELVIEW); glPushMatrix(); glLoadMatrixd(m); glRotated(-da,0.0,1.0,0.0); glGetDoublev(GL_MODELVIEW_MATRIX,m); glPopMatrix(); }
    if (Key==38){ _redraw=true; glMatrixMode(GL_MODELVIEW); glPushMatrix(); glLoadMatrixd(m); glRotated(+da,1.0,0.0,0.0); glGetDoublev(GL_MODELVIEW_MATRIX,m); glPopMatrix(); }
    if (Key==40){ _redraw=true; glMatrixMode(GL_MODELVIEW); glPushMatrix(); glLoadMatrixd(m); glRotated(-da,1.0,0.0,0.0); glGetDoublev(GL_MODELVIEW_MATRIX,m); glPopMatrix(); }
    }
//---------------------------------------------------------------------------

它唯一重要的東西是matrix2euler函數將矩陣m轉換為x,y,z順序的歐拉角。 它呈現 3 個坐標系軸。 左邊是m用作模型視圖矩陣，中間是使用恆等模型視圖的m基向量，右邊是由計算的歐拉角構建的模型視圖......

所有 3 個都應該匹配。 如果左側和中間不匹配，那么您將獲得不同的矩陣或布局約定。

這里預覽(10,20,30) [deg]測試用例：

預覽

即使經過多次旋轉（箭頭鍵），它仍然匹配......

gl_simple.h可以在這里找到：

附注。 根據平台/環境，計算可能需要一些邊緣情況處理，例如大於1 asin舍入幅度，除以零等。 atan2也有它的怪癖......

[Edit1] 這是自動完成所有這些的終極 C++ 示例：

//---------------------------------------------------------------------------
enum _euler_cfg_enum
    {
    _euler_cfg_a=0,
    _euler_cfg_b,
    _euler_cfg_c,
    _euler_cfg__sina,
    _euler_cfg_ssina,
    _euler_cfg__sinb_cosa,
    _euler_cfg_ssinb_cosa,
    _euler_cfg__cosb_cosa,
    _euler_cfg_scosb_cosa,
    _euler_cfg__sinc_cosa,
    _euler_cfg_ssinc_cosa,
    _euler_cfg__cosc_cosa,
    _euler_cfg_scosc_cosa,
    _euler_cfgs
    };
//---------------------------------------------------------------------------
void matrix2euler_init(double *e,double *m,int *cfg)    // cross match euler angles e[3] and resulting m[16] transform matrix into cfg[_euler_cfgs]
    {
    int i,j;
    double a,tab[4];
    const double _zero=1e-6;
    for (i=0;i<_euler_cfgs;i++) cfg[i]=-1;      // clear cfg
    // find (+/-)sin(a)
    for (i=0;i<3;i++)                           // test all angles in e[]
        {
        a=sin(e[i]);
        for (j=0;j<16;j++)                      // test all elements in m[]
         if (fabs(fabs(a)-fabs(m[j]))<=_zero)   // find match in |m[j]| = |sin(e[i])|
            {                                   // store configuration
            cfg[_euler_cfg_a]=i;            
            cfg[_euler_cfg__sina]=j;
            cfg[_euler_cfg_ssina]=(a*m[j]<0.0);
            j=-1; break;
            }
        if (j<0){ i=-1; break; }                // stop on match found
        }
    if (i>=0){ cfg[0]=-1; return;   }           // no match !!!
    // find (+/-)???(?)*cos(a)
    a=cos(e[cfg[_euler_cfg_a]]);
    i=0; if (i==cfg[_euler_cfg_a]) i++; tab[0]=sin(e[i])*a; tab[1]=cos(e[i])*a; cfg[_euler_cfg_b]=i;
    i++; if (i==cfg[_euler_cfg_a]) i++; tab[2]=sin(e[i])*a; tab[3]=cos(e[i])*a; cfg[_euler_cfg_c]=i;

    for (i=0;i<4;i++)
        {
        a=tab[i];
        for (j=0;j<16;j++)                      // test all elements in m[]
         if (fabs(fabs(a)-fabs(m[j]))<=_zero)   // find match in |m[j]| = |tab[i]|
            {                                   // store configuration
            cfg[_euler_cfg__sinb_cosa+i+i]=j;
            cfg[_euler_cfg_ssinb_cosa+i+i]=(a*m[j]<0.0);
            j=-1; break;
            }
        if (j>=0){ cfg[0]=-1; return;   }       // no match !!!
        }
    }
//---------------------------------------------------------------------------
void matrix2euler(double *e,double *m,int *cfg) // compute euler angles e[3] from transform matrix m[16] using confing cfg[_euler_cfgs]
    {
    double c;
    //-----angle------         --------------sign--------------     ----------index----------
    e[cfg[_euler_cfg_a]]=asin ((cfg[_euler_cfg_ssina]?-1.0:+1.0) *m[cfg[_euler_cfg__sina     ]]);
    c=cos(e[cfg[_euler_cfg_a]]); if (fabs(c>1e-20)) c=1.0/c; else c=0.0;
    e[cfg[_euler_cfg_b]]=atan2((cfg[_euler_cfg_ssinb_cosa]?-c:+c)*m[cfg[_euler_cfg__sinb_cosa]],
                               (cfg[_euler_cfg_scosb_cosa]?-c:+c)*m[cfg[_euler_cfg__cosb_cosa]]);
    e[cfg[_euler_cfg_c]]=atan2((cfg[_euler_cfg_ssinc_cosa]?-c:+c)*m[cfg[_euler_cfg__sinc_cosa]],
                               (cfg[_euler_cfg_scosc_cosa]?-c:+c)*m[cfg[_euler_cfg__cosc_cosa]]);
    }
//---------------------------------------------------------------------------

用法：

const double deg=M_PI/180.0;
const double rad=180.0/M_PI;
// variables
double e[3],m[16];
int euler_cfg[_euler_cfgs];
// init angles
e[0]=10.0*deg;
e[1]=20.0*deg;
e[2]=30.0*deg;
// compute coresponding rotation matrix
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glRotated(e[0]*rad,1.0,0.0,0.0);
glRotated(e[1]*rad,0.0,1.0,0.0);
glRotated(e[2]*rad,0.0,0.0,1.0);
glGetDoublev(GL_MODELVIEW_MATRIX,m);
// cross match e,m -> euler_cfg
matrix2euler_init(e,m,euler_cfg);

// now we can use
matrix2euler(e,m,euler_cfg);

這適用於任何轉換順序和/或約定/布局。 init 只調用一次，然后您可以將轉換用於任何變換矩陣...您還可以根據您的環境的euler_cfg結果編寫自己的優化版本。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 可在X和Y軸上進行轉換的Javascript（CSS 3D） 基於4x4矩陣計算canvas context.setTransform矩陣 如何在JavaScript中計算旋轉3D立方體的x和y坐標？ 如何在Matrix3d上獲得比例尺（x，y，z）和旋轉量（x，y，z）？ 計算 x,y 坐標在旋轉中的分解 4x4矩陣乘法順序 將3X3變換矩陣變換為4X4矩陣，用於css變換matrix3d 如何通過平移和旋轉來計算（SVG）X / Y坐標（在JS / D3.js中）？ Three.js-禁用沿x，y和z軸的3d對象平移 三.JS：將帶有加速度計數據的 3D 立方體移動到 x y 軸上
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM