3

我一直在玩Paul Hayes 的 3d Cube，试图找出一种算法，可以确定在任何给定时间当前面向用户的立方体的面。这是面部的相关CSS：

#cube .one  {
  -webkit-transform: rotateX(90deg) translateZ(200px);
}

#cube .two {
  -webkit-transform: translateZ(200px);
}

#cube .three {
  -webkit-transform: rotateY(90deg) translateZ(200px);
}

#cube .four {
  -webkit-transform: rotateY(180deg) translateZ(200px);
}

#cube .five {
  -webkit-transform: rotateY(-90deg) translateZ(200px);
}

#cube .six {
  -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
}

有人有想法么？

编辑：

我收集了一些样本数据（纯粹来自输入任意 x 和 y 角度值并查看浏览器如何处理它），我认为这些数据可能更容易看到可以从中推断出算法的模式，但到目前为止我我什么也没看到。粘贴在下面，因为它可能对其他人有帮助。

面角（xAngle，yAngle）
--------------------------------
1 (-90, 0) (-90, -90)
2 (0, 0) (180, 180)
3 (0, -90) (180, 90) (-180, 90)
4 (0, 180) (180, 0) (-180, 0) (0, -180)
5 (0, 90)
6 (90, 0) (90, 90) (90, 180)
4

2 回答 2

1

当您旋转立方体时，会添加一些样式id="cube"

<div id="cube" style="-webkit-transform: rotateX(90deg) rotateY(0deg);">

如果rotateX = ((270 + n*360)deg)面one将面向用户。与其他人类似。我不太了解 jQuery 或 JS，所以这只是纯数学。

于 2013-04-28T23:16:04.633 回答
0

你可以尝试这样的事情作为开始：

// cube and the pattern to extract the rotation values
var cube = document.getElementById('cube');
var pattern = /rotateX\(([-?\w\d]+)\)\s?rotateY\(([-?\w\d]+)\)/g;

// extract each value
result = pattern.exec(cube.style.transform); // rotateX(0deg) rotateY(-360deg)

// if we found a result
if(result){

    var x = parseInt(result[1]); // 0deg
    var y = parseInt(result[2]); // -360deg

    // the side we're looking for -3 -2 -1 0 1 2 3
    var side = (y/90) % 4;

    console.log(side)    
}
else{
    // the property hasn't been set on the cube so we must be on the first one
    console.log(0);
}

这适用于Firefox，我不确定transform样式属性是否在浏览器中保持一致。此外，由于这只是一个开始，它还不会找到顶部和底部。

于 2013-04-28T21:24:03.950 回答