为什么我的3D立方体不能按预期旋转？

Question

我正在做一个3D骰子,当你刷它的脸时旋转.问题是它在某些情况下表现得非常奇怪.例如,如果您运行代码段并向左滑动两次然后向下滑动,则会进行疯狂的旋转...

这是代码:

$(function() {
  
  var X = 0,
    Y = 0;
  
  var hammertime = new Hammer($(".thirdDimension")[0], {domEvents: true});
  
  hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
  
  function rotate(what) {
    switch (what) {
      case "X":
        $(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg)");
        break;
      case "Y":
        $(".cube").css("transform", "rotateY(" + Y +"deg) rotateX(" + X + "deg)");
        break;
    }
    $("#debug").html($("#debug").html() + $(".cube").attr("style") + "<br>").scrollTop($("#debug")[0].scrollHeight);
  }
  
  $(".thirdDimension").on("swipeleft", function(e){
    Y -= 90;
    rotate("Y");
  });

  $(".thirdDimension").on("swiperight", function(e){
    Y += 90;
    rotate("Y");
  });
  
  $(".thirdDimension").on("swipeup", function(e){
    X += 90;
    rotate("X");
  });
  
  $(".thirdDimension").on("swipedown", function(e){
    X -= 90;
    rotate("X");
  });
  
});

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  font-family: sans-serif;
}
.tableContainer, .vcenter {
  height: 100%;
  width: 100%;
}
.tableContainer {
  display: table;
}
.vcenter {
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.thirdDimension {
  perspective: 500px;
	perspective-origin: 50% 100px;
}
.cube {
  margin: 0 auto;
  position: relative;
	width: 200px;
  height: 200px;
	transform-style: preserve-3d;
}
.cube div {
	position: absolute;
	width: 200px;
	height: 200px;
  box-shadow: inset 0 0 30px black;
  font-size: 72pt;
  padding-top: 35px;
  text-align: center;
  background-color: black;
}

.right {
  transform: rotateY(-270deg) translateX(100px);
	transform-origin: top right;
}
.left {
	transform: rotateY(270deg) translateX(-100px);
	transform-origin: center left;
}
.up {
	transform: rotateX(90deg) translateY(-100px);
	transform-origin: top center;
}
.down {
	transform: rotateX(-90deg) translateY(100px);
	transform-origin: bottom center;
}
.front {
	transform: translateZ(100px);
}
.back {
	transform: translateZ(-100px) rotateY(180deg);
}
.cube {
  -webkit-transition: .3s all linear;
  cursor: pointer;
}
.cube div:after {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  content: "";
  border: 1px solid;
}
.front:after {
  top: 0;
  right: 0;
  background-color: green;
}
.back:after {
  bottom: 0;
  right: 0;
  background-color: blue;
}
.right:after {
  top: 0;
  left: 0;
  background-color: red;
}
.left:after {
  bottom: 0;
  left: 0;
  background-color: DarkOrange;
}
.up:after {
  right: 0;
  bottom: 0;
  background-color: white;
}
.down:after {
  bottom: 0;
  left: 0;
  background-color: yellow;
}
#debug {
  position: fixed;
  background-color: cyan;
  overflow: auto;
  height: 50px;
  width: 100%;
}
/*
.cube {
  animation: linear 5s rotate infinite;
}
@-webkit-keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(720deg);
  }
}
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id='debug'></div>
<div class='tableContainer'>
  <div class='vcenter'>
    <div class='thirdDimension'>
      <div class='cube'>
        <div class='up'></div>
        <div class='front'></div>
        <div class='right'></div>
        <div class='left'></div>
        <div class='back'></div>
        <div class='down'></div>
      </div>
    </div>
  </div>
</div>

编辑:此链接:http://greensock.com/forums/topic/7811-3d-rotation-fixed-axsis/表示旋转的顺序很重要.我稍微改变了我的代码,但它意外地继续旋转......

Answer 1

您的问题更多的是您如何概念化旋转，而不是任何编码错误。

如果你旋转Y(90)，然后旋转X(90) - 那么当你旋转X(90)时，你的X轴已经旋转了90度，所以它不再是从左到右，而是进/出屏幕。所以你的东西看起来就像是在那个特定的实例中进行二维旋转。

更进一步来说，如果用户现在从左向右滑动，他们实际上是沿着 Z 轴滑动，您需要旋转 Z。

要解决此问题，您需要跟踪已完成的旋转，并以更动态的方式将用户界面映射到立方体。从左向右滑动并不总是意味着旋转 Y，它意味着沿着当前从左到右定向的轴旋转。

我建议你找到一个魔方或类似的东西，并标记每个轴的边（例如，红色边是 X 轴），模拟滑动，然后这应该会让事情变得更清楚，因为你会看到这些轴围绕立方体移动。