Как вращать куб по центру?

22 марта 2022, 13:50

var cube = document.querySelector('.cube'); 
 
var tmpCenter; 
var currentRotateY = 0; 
var dx; 
 
window.addEventListener('mousedown', cubeMouseDownHandler); 
 
function cubeMouseDownHandler(e) { 
  e.preventDefault(); 
  tmpCenter = e.x; 
 
  window.addEventListener('mousemove', bodyMouseMoveHandler); 
  window.addEventListener('mouseup', bodyMouseUpHandler); 
} 
 
function bodyMouseMoveHandler(e) { 
  dx = tmpCenter - e.x; 
  currentRotateY += dx; 
  tmpCenter = e.x; 
 
  cube.style.transform = `rotateY(${currentRotateY}deg)`; 
} 
 
function bodyMouseUpHandler(e) { 
  window.removeEventListener('mousemove', bodyMouseMoveHandler); 
  window.removeEventListener('mouseup', bodyMouseUpHandler); 
}

body { 
  margin: 0; 
} 
 
.app { 
  height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  perspective: 2000px; 
} 
 
.cube { 
  width: 10rem; 
  height: 10rem; 
  display: grid; 
  transform-style: preserve-3d; 
} 
 
.side { 
  width: 100%; 
  height: 100%; 
  grid-row: 1 / 2; 
  grid-column: 1 / 2; 
} 
 
.side_1 { 
  background-color: tomato; 
} 
 
.side_2 { 
  background-color: lightblue; 
  transform: rotateY(-90deg); 
  transform-origin: right; 
} 
 
.side_3 { 
  background-color: pink; 
  transform: rotateY(90deg); 
  transform-origin: left; 
} 
 
.side_4 { 
  background-color: lightgreen; 
  transform: translateZ(-160px); 
  transform-origin: center; 
} 
 
.center { 
  position: absolute; 
  width: 2px; 
  height: 100%; 
  background-color: black; 
}

<div class="app"> 
  <div class="cube"> 
    <div class="side side_1"></div> 
    <div class="side side_2"></div> 
    <div class="side side_3"></div> 
    <div class="side side_4"></div> 
  </div> 
 
  <div class="center"></div> 
</div>

Я пытался как-то осмыслить это, пришёл к тому, что от центра куба(вычисленного в начале кода), по мере вращения, нуобходимо отнимать координату его левой стороны... это вроде как и будет необходимое смещение... только вот беда, центр минус левая сторона - число которое по мере приближения левой стороны к центру идёт вот так: 80 ------- > 0 , а мне нужно вот так: 0 ------- > 80 (Я не знаю как это называется =))

var cube = document.querySelector('.cube'); 
 
var tmpCenter; 
var currentRotateY = 0; 
var dx; 
 
var cubeBox, cubeCenter; 
 
init(); 
 
window.addEventListener('mousedown', cubeMouseDownHandler); 
 
function cubeMouseDownHandler(e) { 
  e.preventDefault(); 
  tmpCenter = e.x; 
 
  window.addEventListener('mousemove', bodyMouseMoveHandler); 
  window.addEventListener('mouseup', bodyMouseUpHandler); 
} 
 
function bodyMouseMoveHandler(e) { 
  cubeBox = cube.getBoundingClientRect(); 
 
  dx = tmpCenter - e.x; 
  currentRotateY += dx; 
  tmpCenter = e.x; 
 
  console.log(cubeCenter - cubeBox.left) 
  cube.style.transform = `translateX(${0}px) rotateY(${currentRotateY}deg)`; 
} 
 
function bodyMouseUpHandler(e) { 
  window.removeEventListener('mousemove', bodyMouseMoveHandler); 
  window.removeEventListener('mouseup', bodyMouseUpHandler); 
} 
 
function init() { 
  cubeBox = cube.getBoundingClientRect(); 
  cubeCenter = cubeBox.left + cubeBox.width / 2; 
} 
window.onresize = () => init();

body { 
  margin: 0; 
} 
 
.app { 
  height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  perspective: 2000px; 
} 
 
.cube { 
  width: 10rem; 
  height: 10rem; 
  display: grid; 
  transform-style: preserve-3d; 
} 
 
.side { 
  width: 100%; 
  height: 100%; 
  grid-row: 1 / 2; 
  grid-column: 1 / 2; 
} 
 
.side_1 { 
  background-color: tomato; 
} 
 
.side_2 { 
  background-color: lightblue; 
  transform: rotateY(-90deg); 
  transform-origin: right; 
} 
 
.side_3 { 
  background-color: pink; 
  transform: rotateY(90deg); 
  transform-origin: left; 
} 
 
.side_4 { 
  background-color: lightgreen; 
  transform: translateZ(-160px); 
  transform-origin: center; 
} 
 
.center { 
  position: absolute; 
  width: 2px; 
  height: 100%; 
  background-color: black; 
}

<div class="app"> 
  <div class="cube"> 
    <div class="side side_1"></div> 
    <div class="side side_2"></div> 
    <div class="side side_3"></div> 
    <div class="side side_4"></div> 
  </div> 
 
  <div class="center"></div> 
</div>

Как это сделать? Или то, что я придумал вообще неправильно?

Answer 1

Может расположить грани вокруг центра трансформами?

var cube = document.querySelector('.cube'); 
var tmpCenter; 
var currentRotateY = 0; 
var dx; 
 
addEventListener('mousedown', cubeMouseDownHandler); 
 
function cubeMouseDownHandler(e) { 
  e.preventDefault(); 
  tmpCenter = e.x; 
  addEventListener('mousemove', bodyMouseMoveHandler); 
  addEventListener('mouseup', bodyMouseUpHandler); 
} 
 
function bodyMouseMoveHandler(e) { 
  currentRotateY -= tmpCenter - e.x; 
  cube.style.transform = `rotateY(${currentRotateY}deg)`; 
  tmpCenter = e.x; 
} 
 
function bodyMouseUpHandler(e) { 
  removeEventListener('mousemove', bodyMouseMoveHandler); 
  removeEventListener('mouseup', bodyMouseUpHandler); 
}

body { 
  height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  perspective: 2000px; 
  margin: 0; 
} 
.cube { 
  width: 10rem; 
  height: 10rem; 
  display: grid; 
  transform-style: preserve-3d; 
} 
.side { 
  grid-row: 1 / 2; 
  grid-column: 1 / 2; 
} 
.side_1 { 
  background-color: tomato; 
  transform: translateZ(80px); 
} 
.side_2 { 
  background-color: lightblue; 
  transform: translateZ(80px)rotateY(-90deg); 
  transform-origin: right; 
} 
.side_3 { 
  background-color: pink; 
  transform: translateZ(80px)rotateY(90deg); 
  transform-origin: left; 
} 
.side_4 { 
  background-color: lightgreen; 
  transform: translateZ(-80px); 
}

<div class="cube"> 
  <div class="side side_1"></div> 
  <div class="side side_2"></div> 
  <div class="side side_3"></div> 
  <div class="side side_4"></div> 
</div>

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Обнаружение строки-палиндрома

Прошу подсказать наиболее эффективный способ обнаружения строки-палиндромаОсновной камень преткновения - символы пунктуации и иже с ними

102

javascript

Как правильно записать в коде async/await javascript

я начинающий разработчик на JavaScript и начал изучат обещания, и меня интересует как правильно использовать в коде async/awaitКак записывать обычные...

161

javascript

php сокеты, ошибка использования socket_connect

Есть нейронная сеть, ожидающая запросов от сервера, написанного на phpПри клике я со страницы отправляю запрос на сервер и получаю ответ

javascript

Некорректно работает AJAX пагинация

Всем привет На сайте есть пагинация к статьям, которая работает следующим образом: пользователь нажимает кнопку 'Показать больше статей',...