Question

我正在使用three.js创建一个简单的3D图形网站。它的概念是有很多文本的宇宙。我要使鼠标左键向前移动。另外，在鼠标右键单击上将摄像机向后移动。

以前，相机使用鼠标滚动移动(zoom in/zoom out)。但是现在我必须将其切换为鼠标左/右键。

（如果用户按住鼠标左键，则相机必须连续向后移动）

先前的代码（滚动移动）在这里。

document.addEventListener('wheel', onMouseWheel, false);
function onMouseWheel( event ) {
  camera.position.z += event.deltaY * 0.1; // move camera along z-axis
}

因此，引用它，我更改了如下代码：

var hold = false;

document.addEventListener('contextmenu', onContextMenu, false);
document.addEventListener('mousedown', onMouseDown, false);
document.addEventListener('mouseup', onMouseUp, false);

function onContextMenu(event) { // Prevent right click
  event.preventDefault();
}

function onMouseDown(event) {
  hold = true;
  switch (event.which) {
    case 1: // if left click
      moveForward();
      break;
    case 3: // if right click
      moveBackward();
      break;
  }
}

function onMouseUp(event) {
  console.log('mouse up');
  hold = false;
}

function moveForward() {
  while (hold === true) {
    camera.position.z -= 0.1;
  }
}

function moveBackward() {
  while (hold === true) {
    camera.position.z += 0.1;
  }
}

基本上，该代码通过hold变量来使摄像机前后移动。但是，当我运行此代码时，浏览器将挂起。我想平稳地前进/后退。

对此有什么解决办法吗？

three.js鼠标左键单击相机平稳前进

0 个答案: