javascript - 3D CSS Cube - 奇怪的旋转不一致(已解决:Gimbal Lock)
问题描述
我正在研究 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>
解决方案
这是使用称为Gimbal_lock的 3 轴进行 3D 旋转的正常问题
万向节锁定是三维、三万向节机构中一个自由度的损失,当三个万向节中的两个的轴被驱动成平行配置时,就会发生这种情况,将系统“锁定”成退化的两轴旋转。维空间。
解决方案通常要么使用矩阵或四元数进行旋转,要么保持 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
推荐阅读
- flutter - 从 initState() 更新列表时未更新列表
- c# - 安装 Winforms 应用程序时出现 SQL Server 安装问题
- python - 使用路径参数从 python 代码运行 .exe 文件
- angular - 使用表单控制类时,下拉列表的外观正在发生变化 - Angular
- c# - Wix CustomAction 在 InstallFinalize 之前无法访问写入的文件
- c# - Quartz.net 调度程序收集垃圾
- python - Python Turtle/Tkinter 计时器加速
- python - 当一列被管道分隔时,如何在熊猫中读取CSV?
- python - MultipleObjectsReturned get() 返回多个 KVStore
- python - 我可以在同一个异步循环中写入和读取进程吗?