javascript - 3D CSS 立方体 - 奇怪的旋转不一致(已解决 : Gimbal Lock)

Question

我正在研究 3D CSS，但我无法解决这种不一致问题。

绕 Y 轴旋转后，使“正面”面向场景的右脸，“左”脸旋转到位成为场景正面，绕 X 轴或 Z 轴旋转旋转围绕 Z 轴的立方体。为什么会这样？

重现问题:

1.) 运行代码段

2.) 单击 Y 轴 (+)

3.) 再次点击 Y 轴 (+)

4.) 单击任意 X 或 Z 轴按钮

很奇怪吧？或者我只是错过了 3D 变换世界中一些非常简单的东西？

var rotation_degree = { 'X': 0, 'Y': 0, 'Z': 0 };

$(document).on ("click", "button", function (e)
{
    var degree = parseInt ($(this).attr ("data-degree"));
    var axis   = $(this).attr ("data-axis");
    
    // Animate on an unused property
    $(".cube").css ("text-indent", rotation_degree[axis]);
    
    $('.cube').animate (
    {
        textIndent: rotation_degree[axis] + degree
    },
    {
        step: function (now,fx) 
        {   
            rotation_degree[axis] = now;

            // Center cube in scene
            var transform = "translateZ(-125px)";

            // Add transform rotations in specific order: X, Y, Z
            for (var key in rotation_degree)
            {
                // Skip loop if the property is from prototype
                if (!rotation_degree.hasOwnProperty (key)) 
                    continue;

                transform += (" rotate" + key + "(" + rotation_degree[key] + "deg)");
            }

            // console.log (transform);
            // console.log ("--------------------------------------------------------------");

            $(this).css ('transform', transform);  
        },

        duration: 'slow'

    },
    
    'linear'
    
    );
    
});

html, body {
    width: 100%;
    height: 100%;
}

.scene {
    width: 250px;
    height: 250px;
    perspective: 250px;
    background-color: rgb(0,0,0);
}

.cube {
    width:100%;
    height:100%;
    position:relative;
    transform-style:preserve-3d;
    transform: translateZ(-125px);
    text-indent: 0;
  
}

.face {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(3, 121, 255, 0.5);
    color: #FFF;
    line-height: 250px;
    text-indent: 0;
    text-align: center;
}

.front  { transform: rotateY(0deg)    translateZ(125px); }
.right  { transform: rotateY(90deg)   translateZ(125px); }
.left   { transform: rotateY(-90deg)  translateZ(125px); }
.back   { transform: rotateY(180deg)  translateZ(125px); }
.top    { transform: rotateX(90deg)   translateZ(125px); }
.bottom { transform: rotateX(-90deg)  translateZ(125px); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene">

    <div class="cube">
    
        <div class="face front">front</div>
        <div class="face right">right</div>
        <div class="face left">left</div>
        <div class="face back">back</div>
        <div class="face top">top</div>
        <div class="face bottom">bottom</div>
        
    </div>
    
</div>

<button data-degree="45" data-axis="X">
    X-Axis (+)
</button>

<button data-degree="-45" data-axis="X">
    X-Axis (-)
</button>

<button data-degree="45" data-axis="Y">
    Y-Axis (+)
</button>

<button data-degree="-45" data-axis="Y">
    Y-Axis (-)
</button>

<button data-degree="45" data-axis="Z">
    Z-Axis (+)
</button>

<button data-degree="-45" data-axis="Z">
    Z-Axis (-)
</button>

Answer 1

这是使用 3 个轴的 3D 旋转的正常问题，称为 Gimbal_lock

Gimbal lock is the loss of one degree of freedom in a three-dimensional, three-gimbal mechanism that occurs when the axes of two of the three gimbals are driven into a parallel configuration, "locking" the system into rotation in a degenerate two-dimensional space.

解决方案通常要么使用矩阵或四元数进行旋转，要么保留 3 个轴但分解它们并重新组合以避免这些问题。

const rotation_degree = { 'X': 0, 'Y': 0, 'Z': 0 };
const axisIdToAxis = { 'X': [1, 0, 0], 'Y': [0, 1, 0], 'Z': [0, 0, 1] };
const currentMatrix = new DOMMatrix;

$(document).on ("click", "button", function (e)
{
    const degree = parseInt ($(this).attr ("data-degree"));
    const axis   = $(this).attr ("data-axis");
    
    // Animate on an unused property
    $(".cube").css ("text-indent", rotation_degree[axis]);
    
    $('.cube').animate (
    {
        textIndent: rotation_degree[axis] + degree
    },
    {
        step: function (now,fx) 
        {   
            rotation_degree[axis] = now;

            // Center cube in scene
            const transform = `translateZ(-50px) rotate${axis}(${now}deg) ${currentMatrix}`;
            $(this).css ('transform', transform);  
        },
        complete: function() {
            // apply rotation to currentMatrix
            currentMatrix.preMultiplySelf(
               new DOMMatrix().rotateAxisAngleSelf(
                  ...axisIdToAxis[axis], degree));
            // zero this out since we applied it above
            rotation_degree[axis] = 0;
        },

        duration: 'slow',
        
        queue: true,

    },
    
    'linear',
    
    );
    
});

html, body {
    width: 100%;
    height: 100%;
}

.scene {
    width: 100px;
    height: 100px;
    perspective: 100px;
    background-color: rgb(0,0,0);
}

.cube {
    width:100%;
    height:100%;
    position:relative;
    transform-style:preserve-3d;
    transform: translateZ(-50px);
    text-indent: 0;
  
}

.face {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(3, 121, 255, 0.5);
    color: #FFF;
    line-height: 100px;
    text-indent: 0;
    text-align: center;
}

.front  { transform: rotateY(0deg)    translateZ(50px); }
.right  { transform: rotateY(90deg)   translateZ(50px); }
.left   { transform: rotateY(-90deg)  translateZ(50px); }
.back   { transform: rotateY(180deg)  translateZ(50px); }
.top    { transform: rotateX(90deg)   translateZ(50px); }
.bottom { transform: rotateX(-90deg)  translateZ(50px); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene">

    <div class="cube">
    
        <div class="face front">front</div>
        <div class="face right">right</div>
        <div class="face left">left</div>
        <div class="face back">back</div>
        <div class="face top">top</div>
        <div class="face bottom">bottom</div>
        
    </div>
    
</div>

<button data-degree="45" data-axis="X">
    X-Axis (+)
</button>

<button data-degree="-45" data-axis="X">
    X-Axis (-)
</button>

<button data-degree="45" data-axis="Y">
    Y-Axis (+)
</button>

<button data-degree="-45" data-axis="Y">
    Y-Axis (-)
</button>

<button data-degree="45" data-axis="Z">
    Z-Axis (+)
</button>

<button data-degree="-45" data-axis="Z">
    Z-Axis (-)
</button>

请注意，上面的代码只是我能想到的最简单的更改。如果您在旋转完成之前单击按钮，它不会处理，但我不想重构所有代码来处理该问题。

PS:Chrome 中有一个与此相关的错误。请参阅:https://bugs.chromium.org/p/chromium/issues/detail?id=986110