javascript - 在拖动和滚动时旋转 javascript 立方体

Question

这是我的问题:我一直在尝试让这个 CSS 立方体打开滚动。我做到了!这是它的工作原理:https://codepen.io/vaninoo/pen/BmyYQd

我很高兴。但是和 friend 测试过后，好像很多人都想“拖动”立方体让它旋转。所以我决定添加这个功能。这是我得到的最接近的:https://codepen.io/vaninoo/pen/jaEZBx

立方体在拖动时可以旋转，拖动后我可以通过滚动来旋转它。但是:

1. 我希望它在我滚动时转动，即使之前没有点击。
2. 当我移动它时，我不知道如何消除那个“跳跃”。它需要将立方体的位置保留在内存中，但我非常努力地尝试但做不到。

这是你可以在我的笔上找到的代码(“我得到的最接近的”):

// START OF UNSURE PART

$('document').ready(function() {
	var lastScrollTop = 0;
	$(window).scroll(function trucenscroll(event) {
	   var st = $(this).scrollTop();
	   var sl = $(this).scrollLeft();
	   if (st > lastScrollTop) {
	       
	       //Le cube tourne
		    var p1,angle,i,tmp;
			
			p1	= {'x': sl - p0.x,	'y': st - p0.y }, 
			angle	= {'x': -p1.y * unit,		'y': p1.x * unit};
		  
			for(i = 0; i < faces.length; i++) 
			{
				tmp = 'rotateX(' + angle.x + 'deg)' + ' rotateY(' + angle.y + 'deg)' + styles[i];
				faces[i].style.transform = p + tmp;
				faces[i].style['-webkit-transform'] = p + tmp;
			}
	   }
	   else if(st == lastScrollTop) {
	     //do nothing 
	     //In IE this is an important condition because there seems to be some instances where the last scrollTop is equal to the new one
	   }
	   else {
	   		var p1,angle,i,tmp;
			p1	= {'x': sl - p0.x,	'y': st - p0.y }, 
			angle	= {'x': -p1.y * unit,		'y': p1.x * unit};
		  
			for(i = 0; i < faces.length; i++) 
			{
				tmp = 'rotateX(' + angle.x + 'deg)' + ' rotateY(' + angle.y + 'deg)' + styles[i];
				faces[i].style.transform = p + tmp;
				faces[i].style['-webkit-transform'] = p + tmp;
			}
	   }
	   lastScrollTop = st;
	});
});


// END OF UNSURE PART








init();		
//===========================================================
//			onMouseMove
//===========================================================
function onMouseMove(e) 
{
	var p1,angle,i,tmp;

	if (! dragging) return;

	p1	= {'x': e.clientX - p0.x,	'y': e.clientY - p0.y }, 
	angle	= {'x': -p1.y * unit,		'y': p1.x * unit};
  
	for(i = 0; i < faces.length; i++) 
	{
		tmp = 'rotateX(' + angle.x + 'deg)' + ' rotateY(' + angle.y + 'deg)' + styles[i];
		faces[i].style.transform = p + tmp;
		faces[i].style['-webkit-transform'] = p + tmp;
	}
}
//===========================================================
//			onMouseDown
//===========================================================
function onMouseDown(e)
{
	var element;

	onMouseUp();	// disable if dragging

	element = e.target;
	//if (! element.classList.contains('face')) return false;

	e.preventDefault();
	window.p0	= { 'x': e.clientX, 'y': e.clientY };
	dragging	= true;
	return false;
}
//===========================================================
//			onMouseUp
//===========================================================
function onMouseUp(e)
{
	var i,tmp,style;

	if (! dragging) return;
	dragging = false; 

	for ( i = 0; i < faces.length; i++) 
	{
		style = faces[i].style;
		tmp = style.transform || style['-webkit-transform'];
		styles[i] = tmp.replace('perspective(32em) ', '');
	}
  
}
//=====================================================================
//			initializeCube
//=====================================================================
function initializeCube()
{
	var i,tmp;

	for (i = 0; i < faces.length; i++)
	{
		if (i  < 4) tmp = 'rotateY(' + i*90 + 'deg)';
		if (i >= 4) tmp = 'rotateX(' + Math.pow(-1, i) * 90 + 'deg)';
		tmp += ' translateZ(' + side/2 + 'px)';
	
		faces[i].style.transform = p + tmp;
		faces[i].style['-webkit-transform'] = p + tmp;
		styles.push(tmp);
	}
}
//=====================================================================
//			init
//=====================================================================
function init()
{
	window.addEventListener('mousedown', onMouseDown, false);
	window.addEventListener('mouseup',   onMouseUp,   false);
	window.addEventListener('mousemove', onMouseMove, false);

	window.faces 		= document.querySelectorAll('.face');
	window.styles 		= new Array();
	window.style 		= getComputedStyle(faces[0]);
	window.factor 		= 3;
	window.side 		= parseInt(style.width.split('px')[0], 10);
	window.max_amount 	= factor * side; 
	window.unit 		= 360 / max_amount;
	window.dragging 	= false;
	window.scrolling 	= false;
	window.p 		= 'perspective(32em)';

	initializeCube();
}

body {
	position: relative;
	height:5000px;
}

.cube, .cube * 
{
  position: absolute;
  top: 25vh;
  left: 50%;
}
  
.cube 
{
  user-select: none;
  cursor: move;
}
.cube div span
{
	position: relative;
	top: 60px;
	left: -5px;
	font-size: 8em;
}

.face 
{
	box-sizing: border-box;
	border: solid 1px;
	margin: -8em;
	width: 16em;
	height: 16em;
	box-shadow: inset 0 0 15px rgba(0,0,255,0.6);
	text-align: center;
	/** backface-visibility: hidden; /**/
}
.face:nth-child(1) { 
	background: rgba(255,   0,   0, 0.2); 
}
.face:nth-child(2) { background: rgba(255, 255,   0, 0.2); }
.face:nth-child(3) { background: rgba(  0, 255,   0, 0.2); }
.face:nth-child(4) { background: rgba(  0, 255, 255, 0.2); }
.face:nth-child(5) { background: rgba(  0,   0, 255, 0.2); }
.face:nth-child(6) { background: rgba(255,   0, 255, 0.2); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body translate="no" onload="init()">
<div class='cube' id="cubo">
  <div class='face'><span>1</span></div>
  <div class='face'><span>2</span></div>
  <div class='face'><span>3</span></div>
  <div class='face'><span>4</span></div>
  <div class='face'><span>5</span></div>
  <div class='face'><span>6</span></div>
</div>
</body>

Answer 1

我相信这应该是您想要的行为。您未能在代码中初始化 p0 变量，因此当您尝试立即滚动而不单击时会抛出错误。此外，您看到的跳跃是因为在 onMouseDown 函数中设置 p0 之后，您永远不会将其设置回初始状态(我只是将其设置为 {x:0, y:0}) 因此滚动将根据您的鼠标设置的 p0 值开始。

进入更多细节。在您的 $(document).ready() 中，我将 p0 变量的初始状态设置为 window.p0={'x':0,'y':0}。然后，我还在 onMouseUp 函数中重置了 p0 变量，以确保如果您停止拖动并再次开始滚动，它会被正确设置。

此外，我还修改了滚动功能以包括存储立方体面的样式状态。我相信，因为 $(window).scroll 函数没有存储它正在应用的样式状态，所以拖动本质上是“丢失”了导致跳跃的立方体的最后状态注意。请注意，此更改可能会导致一些过载，因为它会持续快速地附加到应用于立方体表面的样式。

// START OF UNSURE PART

$('document').ready(function() {
  var lastScrollTop = 0;
  //Set the initial state of window.p0 so that scrolling works without clicking
  window.p0 = {
    'x': 0,
    'y': 0
  };
  $(window).scroll(function trucenscroll(event) {
    var st = $(this).scrollTop();
    var sl = $(this).scrollLeft();
    if (st > lastScrollTop) {

      //Le cube tourne
      var p1, angle, i, tmp;

      p1 = {
          'x': sl - p0.x,
          'y': st - p0.y
        },
        angle = {
          'x': -p1.y * unit,
          'y': p1.x * unit
        };
      for (i = 0; i < faces.length; i++) {
        tmp = 'rotateX(' + angle.x + 'deg)' + ' rotateY(' + angle.y + 'deg)' + styles[i];
        faces[i].style.transform = p + tmp;
        faces[i].style['-webkit-transform'] = p + tmp;
        //Save the state of the style of the cube faces. This ensures that if you switch to dragging, then there will be no jumps because all of the transforms will still be correctly applied.
        style = faces[i].style;
        var tmpStyle = style.transform || style['-webkit-transform'];
        styles[i] = tmpStyle.replace('perspective(32em) ', '');
      }
    } else if (st == lastScrollTop) {
      //do nothing 
      //In IE this is an important condition because there seems to be some instances where the last scrollTop is equal to the new one
    } else {
      var p1, angle, i, tmp;
      p1 = {
          'x': sl - p0.x,
          'y': st - p0.y
        },
        angle = {
          'x': -p1.y * unit,
          'y': p1.x * unit
        };

      for (i = 0; i < faces.length; i++) {
        tmp = 'rotateX(' + angle.x + 'deg)' + ' rotateY(' + angle.y + 'deg)' + styles[i];
        faces[i].style.transform = p + tmp;
        faces[i].style['-webkit-transform'] = p + tmp;
        //Save the state of the style of the cube faces. This ensures that if you switch to dragging, then there will be no jumps because all of the transforms will still be correctly applied.
        style = faces[i].style;
        var tmpStyle = style.transform || style['-webkit-transform'];
        styles[i] = tmpStyle.replace('perspective(32em) ', '');
      }
    }
    lastScrollTop = st;
  });
});


// END OF UNSURE PART








init();
//===========================================================
//			onMouseMove
//===========================================================
function onMouseMove(e) {
  var p1, angle, i, tmp;

  if (!dragging) return;

  p1 = {
      'x': e.clientX - p0.x,
      'y': e.clientY - p0.y
    },
    angle = {
      'x': -p1.y * unit,
      'y': p1.x * unit
    };
  for (i = 0; i < faces.length; i++) {
    tmp = 'rotateX(' + angle.x + 'deg)' + ' rotateY(' + angle.y + 'deg)' + styles[i];
    faces[i].style.transform = p + tmp;
    faces[i].style['-webkit-transform'] = p + tmp;
  }
}
//===========================================================
//			onMouseDown
//===========================================================
function onMouseDown(e) {
  var element;

  onMouseUp(); // disable if dragging

  element = e.target;
  //if (! element.classList.contains('face')) return false;

  e.preventDefault();
  window.p0 = {
    'x': e.clientX,
    'y': e.clientY
  };
  dragging = true;
  return false;
}
//===========================================================
//			onMouseUp
//===========================================================
function onMouseUp(e) {
  var i, tmp, style;

  if (!dragging) return;
  dragging = false;

  //Save the state of the style of the cube faces. This ensures that if you switch to dragging, then there will be no jumps because all of the transforms will still be correctly applied.
  for (i = 0; i < faces.length; i++) {
    style = faces[i].style;
    tmp = style.transform || style['-webkit-transform'];
    styles[i] = tmp.replace('perspective(32em) ', '');
  }
  //Reset the window.p0 variable back for scrolling to work
  window.p0 = {
    'x': 0,
    'y': 0
  };

}
//=====================================================================
//			initializeCube
//=====================================================================
function initializeCube() {
  var i, tmp;

  for (i = 0; i < faces.length; i++) {
    if (i < 4) tmp = 'rotateY(' + i * 90 + 'deg)';
    if (i >= 4) tmp = 'rotateX(' + Math.pow(-1, i) * 90 + 'deg)';
    tmp += ' translateZ(' + side / 2 + 'px)';

    faces[i].style.transform = p + tmp;
    faces[i].style['-webkit-transform'] = p + tmp;
    styles.push(tmp);
  }
}
//=====================================================================
//			init
//=====================================================================
function init() {
  window.addEventListener('mousedown', onMouseDown, false);
  window.addEventListener('mouseup', onMouseUp, false);
  window.addEventListener('mousemove', onMouseMove, false);

  window.faces = document.querySelectorAll('.face');
  window.styles = new Array();
  window.style = getComputedStyle(faces[0]);
  window.factor = 3;
  window.side = parseInt(style.width.split('px')[0], 10);
  window.max_amount = factor * side;
  window.unit = 360 / max_amount;
  window.dragging = false;
  window.scrolling = false;
  window.p = 'perspective(32em)';

  initializeCube();
}

body {
  position: relative;
  height: 5000px;
}

.cube,
.cube * {
  position: absolute;
  top: 25vh;
  left: 50%;
}

.cube {
  user-select: none;
  cursor: move;
}

.cube div span {
  position: relative;
  top: 60px;
  left: -5px;
  font-size: 8em;
}

.face {
  box-sizing: border-box;
  border: solid 1px;
  margin: -8em;
  width: 16em;
  height: 16em;
  box-shadow: inset 0 0 15px rgba(0, 0, 255, 0.6);
  text-align: center;
  /** backface-visibility: hidden; /**/
}

.face:nth-child(1) {
  background: rgba(255, 0, 0, 0.2);
}

.face:nth-child(2) {
  background: rgba(255, 255, 0, 0.2);
}

.face:nth-child(3) {
  background: rgba( 0, 255, 0, 0.2);
}

.face:nth-child(4) {
  background: rgba( 0, 255, 255, 0.2);
}

.face:nth-child(5) {
  background: rgba( 0, 0, 255, 0.2);
}

.face:nth-child(6) {
  background: rgba(255, 0, 255, 0.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body translate="no" onload="init()">
  <div class='cube' id="cubo">
    <div class='face'><span>1</span></div>
    <div class='face'><span>2</span></div>
    <div class='face'><span>3</span></div>
    <div class='face'><span>4</span></div>
    <div class='face'><span>5</span></div>
    <div class='face'><span>6</span></div>
  </div>
</body>