代码之家 › 专栏 › 技术社区 › Hide

三.js鼠标左键单击相机可以平滑地向前移动

three.js javascript

Hide · 技术社区 · 6 年前

three.js . 它的概念是有这么多文本的宇宙。我想让相机向前移动鼠标左键点击。另外,在鼠标右键单击时向后移动相机。

(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

有什么解决办法吗?

1 回复 | 直到 6 年前

Brakebein 6 年前

您需要在动画/渲染循环中设置摄影机位置的动画。因此,每次渲染调用都会进一步设置摄影机位置。

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);

}

推荐文章

Adam Turaj · 反应三纤维场景背景比原始图像更亮

2 年前

ajai.s · 根据用户偏好改变网络a帧中的化身

2 年前

Burak Ertan · 如何使数组中的向量不改变其值?

2 年前

Yücel Sabah · 三JS-绝对更改加载网格的顶点坐标(扭曲网格)并使用该顶点

2 年前

Jojo · 三js-多元素-webgl

2 年前

Lucho · 三分钟后。js如何将相机添加到glb骨架中的头骨?

2 年前

Zalan Szakacs · 如何导入字符串值(x、y、z)以生成三个几何体。js?

6 年前

JoakimNyland · 使用外部链接将纹理应用于WebGL中的3D模型[已关闭]

6 年前

Brian Dolan · 如何影响三维力图中的链接距离?

6 年前

GAURANG KORANT · 如何使用非平面形状(曲面)的threejs绘制具有三维点(x、y、z)的形状几何体

6 年前