Question

我一直在玩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角度值并查看浏览器如何处理它），我认为可能会更容易看到可以从中推断算法的模式，但是我没有看到任何东西。粘贴在下面，因为它可以帮助其他人。

Face    Angle (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)

Answer 1

旋转多维数据集时，某些样式会添加到id="cube"

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

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

Answer 2

你可以尝试这样的开头：

// 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样式属性在浏览器中是否一致。此外，由于它只是一个开始，它不会找到顶部和底部。

试图弄清楚如何获得立方体的当前面

2 个答案: