Как получить масштаб (x, y, z) вместе с вращением (x, y, z) на matrix3d?

Question

Я немного борюсь с scale(x,y,z) против rotation(x,y,z) в матричном расчете. В настоящее время я создаю программу 3D-моделирования в JS, я использовал флаги CSS для преобразований, но я решил перейти к матрице.

var a1=1,a2=0,a3=0,a4=0,
    a5=0,a6=1,a7=0,a8=0,
    a9=0,a10=0,a11=1,a12=0,
    a13=0,a14=0,a15=0,a16=1,
        Rx=45,Ry=45,matrix=true;

var objMatrix = [];
var MDN = MDN || {};
        MDN.matrixArrayToCssMatrix = function (array) {
          return "matrix3d(" + array.join(',') + ")";
        }   

       var angX=Rx,angY=Ry,
                    MCpx=Math.cos(angX * Math.PI / 180),
                    MSpx=Math.sin(angX * Math.PI / 180),
                    MSnx=Math.sin(-angX * Math.PI / 180),
                    MCpy=Math.cos(angY * Math.PI / 180),
                    MSpy=Math.sin(angY * Math.PI / 180),
                    MSny=Math.sin(-angY * Math.PI / 180);
                if (matrix==true) {
                    a1= MCpy,
                    a2 = MSpx*MSpy,
                    a3= MCpx*MSpy,
                    a6 = MCpx,
                    a7 = MSnx,
                    a9 = MSny,
                    a10 = MSpx*MCpy,
                    a11 = MCpx*MCpy;
                     }

                    objMatrix = [
                    a1,   a2,    a3,   a4,
                    a5,   a6,    a7,   a8,
                    a9,   a10,   a11,  a12,
                    a13,  a14,   a15,  a16
                ];
                return objMatrix;
                }

function transform(){ 
            matrix(objMatrix); 
        var matrixToCSS = MDN.matrixArrayToCssMatrix( matrix(objMatrix) ); 
            document.getElementById("foo").style.transform = matrixToCSS; 
 }

Пока что с кодом выше я получил translate(X,Y,Z) и rotate(X,Y), остальное я просто не смог понять.

Answer 1

Я нашел решение здесь, просто создав 3 матрицы по порядку и затем умножив (конкатенируя), получим результат.

Ссылка PDF: ссылка !

var objMatrix = [];
var MDN = MDN || {};
        function matrix(objMatrix) {
        MDN.matrixArrayToCssMatrix = function (array) {
          return "matrix3d(" + array.join(',') + ")";
        }  
    var PIh=Math.PI / 180;
    var angX=Rx,angY=Ry,angZ=rt,
        cosz=Math.cos(angZ * PIh),sinzp=Math.sin(angZ * PIh),sinzn=Math.sin(-angZ * PIh),
        cosx=Math.cos(angX * PIh),sinxp=Math.sin(angX * PIh),sinxn=Math.sin(-angX * PIh),
        cosy=Math.cos(angY * PIh),sinyp=Math.sin(angY * PIh),sinyn=Math.sin(-angY * PIh),
        a1=cosy,a2=sinxp*sinyp,a3=cosx*sinyp,a4=0,
        a5=0,a6=cosx,a7=sinxn,a8=0,
        a9=sinyn,a10=sinxp*cosy,a11=cosx*cosy,a12=0,
        a13=X,a14=Y,a15=Z,a16=1;    
   m1 = [
        [SX, 0,   0,  0],
        [0,  SY,  0,  0],
        [0,  0,   SZ, 0],
        [X,  Y,   Z,  1]];
   m2 = [
        [a1,  a2,  a3, a4],
        [a5,  a6,  a7, a8],
        [a9, a10, a11, a12],
        [0,  0,   0,   a16]];
   m3 = [
        [cosz,  sinzn, 0,   0],
        [sinzp, cosz,  0,   0],
        [0,     0,     1,   0],
        [0,     0,     0,   a16]];
    var m1row = m1.length, 
        m1col = m1[0].length, 
        m2col = m2[0].length,
        m3col = m3[0].length,
        proto = new Array(m1row);
      for (var r = 0; r < m1row; ++r) {
        proto[r] = new Array(m2col); 
        for (var c = 0; c < m2col; ++c) {
          proto[r][c] = 0;
          for (var i = 0; i < m1col; ++i) {
            proto[r][c] += m1[r][i] * m2[i][c];
          }
        }
      }
     var protorow = proto.length, 
         protocol = proto[0].length, 
          objMatrix = new Array(protorow);
      for (var r = 0; r < protorow; ++r) {
        objMatrix[r] = new Array(m3col); 
        for (var c = 0; c < m3col; ++c) {
          objMatrix[r][c] = 0;
          for (var i = 0; i < protocol; ++i) {
            objMatrix[r][c] += proto[r][i] * m3[i][c];
          }
        }
      }


      return objMatrix;
    }
document.getElementById("foo").style.transform = MDN.matrixArrayToCssMatrix( objMatrix );

примечание: порядок важен M1 X M2 X M3 X P.