1

divを生成するこのコードがあります。マトリックスを使用して css 変換プロパティを適用することにより、div を適切に配置して、立方体の 3 つの面を取得します。問題は左側の div にあります。配列 leftArr スケール (d * スケール) を設定すると、一番上の div の左側の div を垂直方向に正しく配置できません。立方体のシミュレーションを取得する最良の方法を教えてください。

ありがとうございました。

CSS:

.face {
        height: 50px;
        overflow: hidden;
        position: absolute;
        width: 50px;
      }

JS:

var angle = 45,
    r = parseFloat(angle) * (Math.PI / 180),
    cos_theta = Math.cos(r),
    sin_theta = Math.sin(r);

var a = cos_theta,
    b = sin_theta,
    c = -sin_theta,
    d = cos_theta;


var face = 50, //reference to .face class
    k = 0,
    j = 100; //constant

var scale = 3;
var dX = face * Math.SQRT2 * scale;
var dY = face * Math.SQRT2;


for(var i = 0; i < 3; i++){

    var tx = j + k;
    var ty = j;
    var lx = j + k - dX/4;
    var ly = ty;

    var topArr = [a * scale, b, c * scale, d, tx, ty];
    var leftArr = [a * scale, b, 0, d * scale, lx, ly];

    var top = 'matrix(' + topArr.join(',') + ')';
    var left = 'matrix(' + leftArr.join(',') + ')';

    k += dX;

    $('<div/>', {
                 id : 'top_'+i,
                 'class' : 'face',
                 css : {
                         'background' : 'hsla( ' + parseInt(Math.random() * 90) + ', 100%, 50%, 0.5 )',
                         'transform' : top
                       }
                 }).appendTo('body');

     $('<div/>', {
                  id : 'left_'+i,
                  'class' : 'face',
                  css : {
                          'background' : 'hsla( ' + parseInt(Math.random() * 90) + ', 100%, 50%, 0.5 )',
                          'transform' : left
                         }
                  }).appendTo('body');                    
}

例：

スケール = 1

スケール = 1

スケール = 2

スケール = 2

スケール = 3

スケール = 3

アップデート：

いくつかのテストの後：

var ly = ty + dY/2 + ( ( (dY/2)*(scale-1) ) / 2);

コードは理にかなっていますが、より良い解決策があれば、助けていただければ幸いです。

4

1 に答える 1

1

2D変換を使用して3Dで回転しています。洗練されたソリューションが必要な場合は、次元4の3D行列を使用する必要があります。次に、左側を下側から90度回転させます。同じ翻訳がそれに適用されます。

2D変換を使用する場合は、各面の2D変換を事前に計算するのが最善の方法です。次に、すべての立方体の変換行列を計算します（1つの行列のみ、すべての面を同時に移動します）。各面の行列は、変換行列と面行列の積になります。（これは互換性がないことに注意してください。順序が重要です）

于 2013-01-21T21:25:18.270 に答える