3D骰子的随机变换-掷骰子结果 [英] Random Transform of 3d dice- get dice throw result

问题描述

电笔(可在线购买，此处未做任何更改) https://codepen.io/SteveJRobertson/pen/zxEwrK

Code pen (available online, have not made any changes here) https://codepen.io/SteveJRobertson/pen/zxEwrK

JavaScript

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;
   }

我想要的- 骰子转换完成后，它会面对您.有没有办法弄清楚这是哪张脸?(我正在考虑把这张脸作为掷骰子的输出)

What I want- after the dice finishes transition, it finishes with a face facing you. Is there a way to get which face this is?(i am considering this face as the output of the dice throw)

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

What I did- I could not find the solution. Do after the dice finishes transition, I force it to another transition I want so that it finishes where I want it to. (

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

将使立方体降落在其正面

will make the cube land on its front side

推荐答案

您可能需要一些复杂的矩阵数学来弄清楚这一点，但是快速了解操作方式可以为您提供一个简单的解决方案.

You could have some complex matrix maths to figure that out but a quick look at how things are done can give you a simple solution.

首先要注意的是所有面孔的初始位置.这些面的位置不像真实的骰子那样(相对的面之和等于7，例如1相对于6).

The first thing to make sure to note is the initial position of all the faces. The faces are not positioned like on a real dice (the sum of opposite faces would equal 7, e.g. 1 opposed to 6).

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

Another thing is that the rotation only happens on 2 axes, each by a multiple of 90 degrees (a quarter of turn). And 4 quarters of turns (i.e. 1 full turn) is equivalent to no turn at all, so it is a repeating pattern and we can work with modulos.

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

Now for the actual rotation, I find it easier to work with fixed origins (not moving with the object), which means you need to read the CSS transform values from right to left.
First you are rotating the cube around the Y axis (front face moving towards the left / right) a certain number of times.
Once that is done you are rotating the cube around the X axis (front face moving up /down).

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

If you try to picture that you might notice that no matter what we do during the first step the top face will stay at the top (5 here) and the bottom one at the bottom (6 here). Which means with the second and last rotation we can easily tell if the cube finished on 5, 6, or a different number.

在其他情况下，这只是基于第一个Y旋转选择正确的值的问题(同时不要忘记X轴旋转180度会显示相反的面).

For the other cases this is just a matter of picking the correct value based on the first Y rotation (while not forgetting that a 180 degrees rotation on the X axis will show the opposite face).

// 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

Fork of the pen logging the result to the console: codepen

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

You will notice that this shuffling method will not give each result an equal probability. The top and bottom faces (5 and 6) will be more likely to appear (1 time out of 4 each, while all the other faces will appear 1 time out of 8).

这篇关于3D骰子的随机变换-掷骰子结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！