javascript - 三.js 鼠标左键摄像头平滑前进

Question

我正在使用 third.js 制作一个简单的 3D 图形网站。它的概念是拥有如此多文本的宇宙。我想让相机在鼠标左键单击时向前移动。另外，单击鼠标右键可向后移动相机。

在前面，相机通过鼠标滚动移动(放大/缩小)。但现在我必须将其切换为鼠标左键/右键单击。

(如果用户单击鼠标左键并按住，相机必须连续向后移动)

之前的代码(滚动移动)在这里。

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 变量启用相机向前/向后移动。但是当我运行这段代码时，浏览器挂起。我想顺利地前进/后退。

有什么解决办法吗？

Answer 1

您需要在动画/渲染循环中对摄像机位置进行动画处理。因此，每次渲染调用时，相机位置都会进一步设置。

var hold = -1;

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 = event.which;
}

function onMouseUp(event) {
  console.log('mouse up');
  hold = -1;
}

// render loop
function animate() {

  requestAnimationFrame(animate);

  switch(hold) {
    case 1:
      camera.position.z -= 0.1;
      break;
    case 3:
      camera.position.z += 0.1;
      break;
  }

  renderer.render(scene, camera);

}