Question

我需要使一些用html和css制成的3d立方体可在页面周围拖动，并能够同时旋转它们。我设法使它们可拖动，但是现在如何添加旋转呢？

我发现了一些有趣的关于鼠标事件旋转的codepen脚本（例如https://codepen.io/jordizle/pen/haIdo/），但是我不知道如何将它们拖动并在发生相同事件的情况下以3d旋转（鼠标向下， 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)";
}

我希望这有意义，谢谢您的回答！

如何使3D CSS立方体同时可拖动和旋转？

0 个答案: