Question

电笔（可在线购买，此处未做任何更改） https://stackblitz.com/edit/angular-ri29rm

JavaScript

var cube = document.getElementById('cube');

var min = 1;
var max = 24;

cube.onclick = function() {
    var xRand = getRandom(max, min);
    var yRand = getRandom(max, min);

    cube.style.webkitTransform = 'rotateX('+xRand+'deg) 
    rotateY('+yRand+'deg)';
    cube.style.transform = 'rotateX('+xRand+'deg) 
    rotateY('+yRand+'deg)';
  }

   function getRandom(max, min) {
   return (Math.floor(Math.random() * (max-min)) + min) * 
   90;
   }

我想要的- 骰子转换完成后，面对您的脸就结束了。有没有办法弄清楚这是哪张脸？（我正在考虑把这张脸作为掷骰子的输出）

我做了- 我找不到解决方案。在骰子完成过渡后执行操作，我将其强制执行到我想要的另一个过渡，以便它在我希望的位置完成。（

#cube.show-front {
   transform: translateZ(-100px) rotateY(   0deg);
}

将使立方体降落在其正面

Answer 1

您可能需要一些复杂的矩阵数学来找出答案，但是快速了解操作方式可以为您提供简单的解决方案。

首先要注意的是所有面孔的初始位置。这些面孔的位置不像一个真实的骰子（相对面孔的总和等于7，例如1相对于6）。

另一件事是，旋转仅发生在2个轴上，每个轴成90度（四分之一转）的倍数。而四分之四圈（即1整圈）完全等于无圈，因此它是重复的模式，我们可以使用模数。

现在，对于实际旋转，我发现使用固定原点（不随对象移动）更容易，这意味着您需要从右到左读取CSS转换值。
首先，您将立方体绕Y轴旋转（正面朝左/右移动）一定次数。
完成此操作后，您将绕X轴旋转多维数据集（正面向上/向下移动）。

如果您想像一下，您可能会注意到，无论我们在第一步中执行什么操作，顶面都将位于顶部（此处为5），底部为底部（此处为6）。这意味着通过第二次和最后一次旋转，我们可以轻松判断多维数据集是否以5、6或其他数字结束。

在其他情况下，这仅仅是基于第一次Y旋转选择正确的值的问题（同时不要忘记X轴旋转180度将显示相反的面）。

// modulo not giving negative results - see https://stackoverflow.com/q/4467539/1336843
function mod(n, m) {
    return ((n % m) + m) % m;
}

function getResult(rotX, rotY) {
    let countX = mod(rotX / 90, 4);
    if (countX === 1) {
        // Bottom face
        return 6;
    }
    if (countX === 3) {
        // Top face
        return 5;
    }
    // We add countX here to correctly offset in case it is a 180 degrees rotation
    // It can be 0 (no rotation) or 2 (180 degrees)
    let countY = mod(rotY / 90 + countX, 4);
    // Faces order
    return [1, 4, 2, 3][countY];
}

将结果记录到控制台的笔叉：codepen

您会注意到，这种改组方法不会使每个结果具有相等的概率。顶部和底部的面（5和6）将更可能出现（每4个中的1个出现，而其他所有面在8个中的1个出现）。

3D骰子的随机变换-掷骰子结果

1 个答案: