私はこのような何かを実装しようとしている画像変換

Question

4ポイント：https://math.stackexchange.com/questions/296794/finding-the-transform-matrix-from-4-projected-points-with-javascript

が、私は基本的に4点を与えられたとき透視正しい方法で画像を変換したいです。私の3D変換の知識はかなり限られていますので、私は既にPerspectiveCameraを使っている間に画像を正しく配置するのに苦労しています。

私は終点をドラッグする必要はありません、私はちょうどその種の変換を簡単に定義したいと思います。

私はthree.jsでこれを行うのをやめ、CSS変換を使用しない理由は、より高いブラウザサポートと後で画像を保存する機能が必要なためです。CanvasRendererを使用すると思いました。

Answer 1

多くの試行の後、私は大部分が動作する方法を見つけました。

この実装からこのコードを使用してCSS変換http://jsfiddle.net/dFrHS/1/に変更し、Matrix4を返すように変更しました。これはperfektly作品

 var imageWidth = 650; 
     var imageHeight = 925; 
     var texture = new THREE.TextureLoader().load("2b. neue Anzeige für BP.jpg"); 
     var material = new THREE.MeshBasicMaterial({map: texture, overdraw: 0.5}); 
     var planeGeometry = new THREE.PlaneGeometry(imageWidth, imageHeight, 10, 10); 
     var image = new THREE.Mesh(planeGeometry, material); 

     image.matrixAutoUpdate = false; 
     image.applyMatrix(new THREE.Matrix4().makeTranslation(imageWidth/2, imageHeight/2, 0)); 
     image.applyMatrix(transform2d(
       imageWidth, imageHeight, 
       -180, -373, 
       72, -242, 
       -395, -63, 
       -145, 35 
     )); 

：

 function adj(m) { // Compute the adjugate of m 
      return [ 
       m[4]*m[8]-m[5]*m[7], m[2]*m[7]-m[1]*m[8], m[1]*m[5]-m[2]*m[4], 
       m[5]*m[6]-m[3]*m[8], m[0]*m[8]-m[2]*m[6], m[2]*m[3]-m[0]*m[5], 
       m[3]*m[7]-m[4]*m[6], m[1]*m[6]-m[0]*m[7], m[0]*m[4]-m[1]*m[3] 
      ]; 
     } 
     function multmm(a, b) { // multiply two matrices 
      var c = Array(9); 
      for (var i = 0; i != 3; ++i) { 
       for (var j = 0; j != 3; ++j) { 
        var cij = 0; 
        for (var k = 0; k != 3; ++k) { 
         cij += a[3*i + k]*b[3*k + j]; 
        } 
        c[3*i + j] = cij; 
       } 
      } 
      return c; 
     } 
     function multmv(m, v) { // multiply matrix and vector 
      return [ 
       m[0]*v[0] + m[1]*v[1] + m[2]*v[2], 
       m[3]*v[0] + m[4]*v[1] + m[5]*v[2], 
       m[6]*v[0] + m[7]*v[1] + m[8]*v[2] 
      ]; 
     } 
     function basisToPoints(x1, y1, x2, y2, x3, y3, x4, y4) { 
      var m = [ 
       x1, x2, x3, 
       y1, y2, y3, 
       1, 1, 1 
      ]; 
      var v = multmv(adj(m), [x4, y4, 1]); 
      return multmm(m, [ 
       v[0], 0, 0, 
       0, v[1], 0, 
       0, 0, v[2] 
      ]); 
     } 
     function general2DProjection(
       x1s, y1s, x1d, y1d, 
       x2s, y2s, x2d, y2d, 
       x3s, y3s, x3d, y3d, 
       x4s, y4s, x4d, y4d 
     ) { 
      var s = basisToPoints(x1s, y1s, x2s, y2s, x3s, y3s, x4s, y4s); 
      var d = basisToPoints(x1d, y1d, x2d, y2d, x3d, y3d, x4d, y4d); 
      return multmm(d, adj(s)); 
     } 
     function project(m, x, y) { 
      var v = multmv(m, [x, y, 1]); 
      return [v[0]/v[2], v[1]/v[2]]; 
     } 
     function transform2d(w, h, x1, y1, x2, y2, x3, y3, x4, y4) { 
      var t = general2DProjection 
      (0, 0, x1, y1, w, 0, x2, y2, 0, h, x3, y3, w, h, x4, y4); 
      for(i = 0; i != 9; ++i) t[i] = t[i]/t[8]; 
      var matrix = new THREE.Matrix4(); 
      matrix.fromArray([ 
       t[0], t[3], 0, t[6], 
       t[1], t[4], 0, t[7], 
       0 , 0 , 1, 0 , 
       t[2], t[5], 0, t[8] 
      ]); 
      return matrix; 
     } 

それから私は、私はこのように変換したい画像を作成することができます。そのトリックは、image.applyMatrix(new THREE.Matrix4().makeTranslation(imageWidth/2, imageHeight/2, 0));であり、algorythmが期待していた方法で変換元を移動させました。この例にはtransform-origin: 0 0;が含まれていて、それは私の最初の試みでは見つからなかった。

カメラはちょっと単純です。THREE.OrthographicCameraそこには問題がありません。

この解決策の唯一の問題は次のとおりです。Three.jsのProjectionを使用すると、正しくフィットしない画像が表示されるようです。そのため私が元々計画していた通りCanvasRendererを使用すると正しく動作しません。

イメージを調整して、もう一度フィットするようにできましたが、webglレンダラーは今のところ私と一緒です。しかし、今キャンバスを持っているので、私はtoBlobメソッドを使用して、私が望むすべてのサーバーラウンドトリップなしでユーザーにイメージを保存させることができます。