Javascript 如何在3D空间中计算简单骰子的结果

假设你有一个简单的骰子，在3D空间中有6个面。 骰子由标准HTML元素制成，并转换成3D对象。起始位置始终相同，1朝上，2朝左侧，3朝您（视口）

现在您可以使用transform旋转骰子：rotateX、rotateY、rotateZ。由于显而易见的原因，你只能将骰子向每个方向旋转90度（也可以是负数）。现在我要用什么样的公式来计算最终结果呢

比如说：X=3（270度），Y=1（90度），Z=2（180度）将导致投掷3

---

因为我似乎没有完全理解，所以您是否看到了其中涉及的任何逻辑。

让我们将所有这些数字表示为一个对象：

 const faces = { top: 1, left: 2, front: 3, bottom: 4, right: 5, back: 6 };

现在，如果将其向右旋转，例如，可以交换涉及的面：

const rotateToLeft = prev => ({
  top: prev.top,
  left: prev.front,
  front: prev.right,
  bottom: prev.bottom,
  right: prev.back,
  back: prev.left
});

现在，您可以在每个方向上执行此操作，然后只要旋转骰子即可获得结果：

 let result = faces;

 for(let turn = 0; turn < 4 + Math.floor((X % 360) / 90); turn++)
   result = rotateToLeft(result);

 // repeat for y and z

让结果=面；
对于（让转弯=0；转弯<4+数学楼层（（X%360）/90）；转弯++）
结果=向左旋转（结果）；
//重复y和z

你能解释一下你的例子是如何产生上述结果的吗？当然，所以我使用GSAP作为动画框架来处理旋转。为了模拟现实，我只想为每个轴掷90度的骰子。也就是说，如果我在X-asis上掷360度角，它会再次变成1。在我的代码中，1翻转意味着90度（可以上升到4度，也就是360度），从初始状态开始，以下每一项的结果是什么：x=1，y=0，z=0？x=0，y=1，z=0？x=0，y=0，z=1？我实际上在现实生活中使用了一个骰子并重新创建了它。这意味着初始状态为：顶部：1，前部：3，左侧：2，右侧：5，后部：4，底部：6，