Làm thế nào để đảo ngược kỹ sư chuyển đổi ma trận web3d

Question

Tôi có một phần tử khối được xoay và dịch trong không gian 3d.

Tôi muốn tìm hiểu chỉ phần xoay của biến đổi này tại một thời điểm nhất định. Điều này có thể không?

tôi có:

var cube = document.getElementById("cube"); 
var transform = getComputedStyle(cube).webkitTransform; 

//the value of transform is: 
// matrix3d(-1, 0, 0.00000000000000012246467991473532, 0, 
//   0, 1, 0, 0, 
//   -0.00000000000000012246467991473532, 0, -1, 0, 
//   0, 0, 0, 1) 

Trợ giúp? :-)

Answer 1

Nếu đối tượng của bạn chỉ được xoay về Y, thì có, phép quay đơn giản để tính - đó là arccos of Matrix elements 1,1 hoặc 3,3 hoặc arsin của - (phần tử 3,1) hoặc arcsin của phần tử 1 , 3. Trong ví dụ cụ thể của bạn, nó là khoảng 180 độ. Nếu phép quay không chỉ là trục y, thì bạn phải bắt đầu theo dõi các phép quay trước đó và nó có thể trở nên lộn xộn hơn.

Bản dịch của bạn sẽ chỉ là hàng dưới cùng của ma trận đầu ra, 0,0,0 trong trường hợp này.

Xem ví dụ trên http://www.inversereality.org/tutorials/graphics%20programming/3dwmatrices.html

Answer 2

Bạn có thể lấy thông tin chuyển đổi với chức năng "WebKitCSSMatrix mới". Ví dụ:

var matrix = new WebKitCSSMatrix($('#element').css('-webkit-transform')); 
var translateZ = matrix.m43; 

Mỗi phần của ma trận là giải thích ở đây: http://9elements.com/html5demos/matrix3d/ Bạn có thể lấy các thuộc tính Complexe giống như rotationX, cho ma trận 3d với mớ hỗn độn toán:

var rotationX = Math.acos(matrix.a) * (180/Math.PI); 
var rotationY = Math.asin(matrix.b) * (180/Math.PI); 

Answer 3

chức năng Với quyết định rotation*, transform* và scale cho phần tử DOM đã cho trình duyệt chéo.

Nếu bạn muốn một cái gì đó nhiều hơn, hoặc tìm lỗi trong toán học, nó là một cuộc thảo luận về math.stackexchange.com

Tested trên các trình duyệt được liệt kê trong http://caniuse.com/transforms3d:

var reverseEngineerTransform3d = function (domElement, parameterName) { 

     parameterName = parameterName.toLowerCase(); 

     var computedStyle = window.getComputedStyle(domElement), 
      matrixStyle = computedStyle.transform || computedStyle.WebkitTransform || computedStyle.MozTransform || computedStyle.msTransform || computedStyle.OTransform; 

     if (matrixStyle) { 
      matrixStyle = matrixStyle.trim(); 
     } 

     if (matrixStyle === 'none') { 
      if (parameterName.indexOf('rotate') === 0) { 
       return '0deg'; 
      } else if (parameterName.indexOf('translate') === 0) { 
       return '0px'; 
      } else if (parameterName === 'scale') { 
       return 1; 
      } else { 
       throw "Unsupported 3D parameter " + parameterName; 
      } 
     } 

     else if (!matrixStyle || matrixStyle.substr(0, 9) !== 'matrix3d(') { 
      //return something or die ????? 
      throw "Something is wrong with 3D transform style. Probably no style applied at all OR unknown CSS3 vendor OR unknown/unsupported 3D matrix representation string OR CSS3 3D transform is not fully supported in this browser"; 
     } 

     var matrix = window.WebKitCSSMatrix && (new WebKitCSSMatrix(matrixStyle)) || 
       window.MozCSSMatrix && (new MozCSSMatrix(matrixStyle)) || 
       window.MsCSSMatrix && (new MsCSSMatrix(matrixStyle)) || 
       window.OCSSMatrix && (new OCSSMatrix(matrixStyle)) || 
       window.CSSMatrix && (new CSSMatrix(matrixStyle)); // sorry 4 copy-paste my friends 

     if (!matrix || isNaN(matrix.a) || isNaN(matrix.b) || isNaN(matrix.c) || isNaN(matrix.m41) || isNaN(matrix.m42) || isNaN(matrix.m43) || isNaN(matrix.m11)) { 
      throw "Could not catch CSSMatrix constructor for current browser, OR the constructor has returned a non-standard matrix object (need .a, .b, .c and mXX numerical properties to work)"; 
     } 


     // todo: giving a parameters array (and returning an array) is a good idea, or we could return everything if no parameters given 

     switch (parameterName) { 

      case 'rotatey': // in degrees 
       return Math.acos(matrix.m11)*180/Math.PI * (matrix.m13 > 0 ? -1 : 1) + 'deg'; 

      case 'rotatex': // in degrees 
       return Math.asin(matrix.m22)*180/Math.PI + 'deg'; 

      case 'rotatez': // in degrees 
       throw "TODO: Sorry, math people. I really need help here! Please implement this case for me. This will help you: http://9elements.com/html5demos/matrix3d/"; 

      case 'translatex': // in pixels 
       return matrix.m41 + 'px'; 

      case 'translatey': // in pixels 
       return matrix.m42 + 'px'; 

      case 'translatez': // in pixels 
       return matrix.m43 + 'px'; 

      case 'scale': // no units 
       if (matrix.m11 === matrix.m22 && matrix.m22 === matrix.m33) { 
        return matrix.m11; 
       } else { 
        throw "I'm not so smart to calculate scale from this matrix"; 
       } 

      // todo: anything else? skew ???? 

      default: 
       throw "This function accepts 3d-parameter name (case-insensitive string) as the second argument. Currently supported: 'rotate[xyz]', 'translate[xyz]', 'scale'. This parameter is unsupported: " + parameterName; 
     } 
    };