БЛОГ НА HUSL


Проблема с правильным вращением трехмерного куба по краям с помощью функции rotate и translate

Автор вопроса: Alexandr_TT

Пожалуйста посмотрите мой jsfiddle

Для начала анимации кликнете по кубу

var xAngle = 0;
var yAngle = 0;
var xPos  = 0;
var yPos  = 0;

$('body').keydown(function(evt) {
    if(evt.keyCode == 37) 
    {
        //left
        yAngle -= 90;
        xPos -= 100;
        //rotate and translate the position of the cube
        $('#cube')[0].style["WebkitTransform"] = "translateX("+xPos+"px) translateY("+yPos+"px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
    }
    if(evt.keyCode == 39) 
    {
        //right
        yAngle -= -90;
        xPos -= -100;
        //rotate and translate the position of the cube
        $('#cube')[0].style["WebkitTransform"] = "translateX("+xPos+"px) translateY("+yPos+"px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
    }
    if(evt.keyCode == 38) 
    {
        //up
        xAngle -= -90;
        yPos -= 100;
        //rotate and translate the position of the cube
        $('#cube')[0].style["WebkitTransform"] = "translateX("+xPos+"px) translateY("+yPos+"px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
    }
    if(evt.keyCode == 40) 
    {
        //down
        xAngle -= 90;
        yPos -= -100;
        //rotate and translate the position of the cube
        $('#cube')[0].style["WebkitTransform"] = "translateX("+xPos+"px) translateY("+yPos+"px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
    }
});
#scene {
    padding: 10px;
    -webkit-perspective: 800;
}

#cube {
    position: relative;
    padding-top: 0;
    margin: 0 auto;
    height: 100px;
    width: 100px;
    -webkit-transition: -webkit-transform 0.4s linear;
    -webkit-transform-style: preserve-3d;

   
}

.face {
    position: absolute;
    height: 85px;
    width: 85px;
    border-style: solid;
    border-width: 5px;
    border-color: grey;
    padding: 5px;
    background-color: rgba(190, 190, 190, 0.7);
}

#cube .one  {
    -webkit-transform: rotateX(90deg) translateZ(50px);
}

#cube .two {
    -webkit-transform: translateZ(50px);
}

#cube .three {
    -webkit-transform: rotateY(90deg) translateZ(50px);
}

#cube .four {
    -webkit-transform: rotateY(180deg) translateZ(50px);
}

#cube .five {
    -webkit-transform: rotateY(-90deg) translateZ(50px);
}

#cube .six {
    -webkit-transform: rotateX(-90deg) translateZ(50px) rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<body>
<div id="scene">
    Press the arrow keys...
    <div id="cube">
        <div class="face one">
            Face 1
        </div>
        <div class="face two">
            Face 2
        </div>
        <div class="face three">
            Face 3
        </div>
        <div class="face four">
            Face 4
        </div>
        <div class="face five">
            Face 5
        </div>
        <div class="face six">
            Face 6
        </div>
    </div>
</div>
</body>
</html>

Как видите, у меня есть трехмерный куб css3, который можно вращать с помощью клавиш со стрелками. Вы можете вращать его влево, вправо, вверх и вниз. Для этого я сохраняю положение и угол в различных переменных:

var xAngle = 0;
var yAngle = 0;
var xPos  = 0;
var yPos  = 0;

Пример:

  1. Вначале нажимайте клавишу со стрелкой влево и вправо столько раз, сколько хотите.
    Куб ведет себя правильно
  2. Теперь нажмите один раз вниз, а затем дважды влево (или снова вправо). Куб теперь катится неправильно
  3. НО, если вы снова нажмете вверх или вниз, он снова скатится правильно, поднимаясь или опускаясь Таким образом, проблема только в том, чтобы идти налево или направо.

Как я могу это исправить?

Свободный перевод вопроса Problem keeping a 3D cube correctly roll on its edges using rotate and translate от участника @Maurice.


Источник

Ответы (1 шт):

Автор решения: Alexandr_TT

Вам нужно рассмотреть 3 вида вращения, которые означают 3 разные оси, а не 2, как вы делаете.

Вот обновленная версия вашего кода. Обратите внимание, как я обновляю углы одной оси на основе других осей.

Все еще не идеальное решение, поскольку я обнаружил некоторые странные движения (возможно, некоторые крайние случаи, которые я пропустил), но это хорошая отправная точка.

Кликнете по кубу для начала управления стрелками клавиатуры

var xAngle = 0;
var yAngle = 0;
var zAngle = 0;
var xPos = 0;
var yPos = 0;

$('body').keydown(function(evt) {
  if (evt.keyCode == 37) {
    //left
    if (xAngle % 180 == 0)
      yAngle -= 90;
    else
      zAngle -= 90;
    xPos -= 100;
  }
  if (evt.keyCode == 39) {
    //right
    if (xAngle % 180 == 0)
      yAngle -= -90;
    else
      zAngle -= -90;

    xPos -= -100;
  }
  if (evt.keyCode == 38) {
    //up
    if (yAngle % 180 == 0)
      xAngle -= -90;
    else
      zAngle -= -90;
    yPos -= 100;
  }
  if (evt.keyCode == 40) {
    //down
    if (yAngle % 180 == 0)
      xAngle -= 90;
    else
      zAngle -= 90;
    yPos -= -100;
  }
  $('#cube').css('transform', "translateX(" + xPos + "px) translateY(" + yPos + "px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg) rotateZ(" + zAngle + "deg)");
});
#scene {
  padding: 10px;
  perspective: 800;
}

#cube {
  position: relative;
  padding-top: 0;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  transition: transform 0.4s linear;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  height: 85px;
  width: 85px;
  border-style: solid;
  border-width: 5px;
  border-color: grey;
  padding: 5px;
  background-color: rgba(190, 190, 190, 0.7);
}

#cube .one {
  transform: rotateX(90deg) translateZ(50px);
}

#cube .two {
  transform: translateZ(50px);
}

#cube .three {
  transform: rotateY(90deg) translateZ(50px);
}

#cube .four {
  transform: rotateY(180deg) translateZ(50px);
}

#cube .five {
  transform: rotateY(-90deg) translateZ(50px);
}

#cube .six {
  transform: rotateX(-90deg) translateZ(50px) rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scene">
  Press the arrow keys...
  <div id="cube">
    <div class="face one">
      Face 1
    </div>
    <div class="face two">
      Face 2
    </div>
    <div class="face three">
      Face 3
    </div>
    <div class="face four">
      Face 4
    </div>
    <div class="face five">
      Face 5
    </div>
    <div class="face six">
      Face 6
    </div>
  </div>
</div>

Свободный перевод ответа от участника @Temani Afif.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.