Как сделать 3d куб CSS перетаскиваемым и вращаемым одновременно? - PullRequest
Новая
       43

Как сделать 3d куб CSS перетаскиваемым и вращаемым одновременно?

0 голосов
/ 17 апреля 2019

Мне нужно сделать несколько 3d-кубов, выполненных в html и css, перетаскиваемых по странице, и иметь возможность вращать их одновременно. Мне удалось сделать их перетаскиваемыми, но как мне теперь добавить вращение?

Я нашел несколько интересных скриптов codepen по вращению с событиями мыши (например, https://codepen.io/jordizle/pen/haIdo/),, но я не могу понять, как перетаскивать их и поворачивать в 3d с одинаковыми событиями (mousedown, mousemove) , mouseup). Также я стараюсь не использовать three.js, потому что я новичок в этом, и мои кубы уже сделаны в html / css.

Вот пример того, где я сейчас нахожусь: https://jsfiddle.net/5j7t3rde/1/?fbclid=IwAR3AAnPdBXKOQSM0z7Ou5xocyw1fM53d-aAHEvWrS7p92HxcRqIf11ykP4w

А вот javascript, который делает мои кубы перетаскиваемыми 

var container = document.querySelector("#container_cubes");
var activeItem = null;

var active = false;

container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);

container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);


function dragStart(e) {
      "use strict";
  if (e.target !== e.currentTarget) {
    active = true;

    // this is the item we are interacting with
    activeItem = e.target;

    if (activeItem !== null) {
      if (!activeItem.xOffset) {
        activeItem.xOffset = 0;
      }

      if (!activeItem.yOffset) {
        activeItem.yOffset = 0;
      }

      if (e.type === "touchstart") {
        activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
        activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
      } else {
        console.log("doing something!");
        activeItem.initialX = e.clientX - activeItem.xOffset;
        activeItem.initialY = e.clientY - activeItem.yOffset;
      }
    }
  }
}

function dragEnd(e) {
    "use strict";
  if (activeItem !== null) {
    activeItem.initialX = activeItem.currentX;
    activeItem.initialY = activeItem.currentY;
  }

  active = false;
  activeItem = null;
}

function drag(e) {
    "use strict";
  if (active) {
    if (e.type === "touchmove") {
      e.preventDefault();


      activeItem.currentX = e.touches[0].clientX - activeItem.initialX*0.3;
      activeItem.currentY = e.touches[0].clientY - activeItem.initialY*0.3;
    } else {
      activeItem.currentX = e.clientX - activeItem.initialX;
      activeItem.currentY = e.clientY - activeItem.initialY;
    }

    activeItem.xOffset = activeItem.currentX;
    activeItem.yOffset = activeItem.currentY;

    setTranslate(activeItem.currentX, activeItem.currentY, activeItem);

  }
}


function setTranslate(xPos, yPos, el) {
    "use strict";
  el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}

Надеюсь, это имеет смысл, спасибо за ваши ответы!

...