Threejs 添加带有轨道控件的鼠标事件

Question

我有一个在 threejs (r84) 中使用 orbitControls 的场景，我想为光线投射添加一个鼠标事件。该功能有效，但我无法同时调用这两个事件。它们只有在我关闭另一个时才起作用。

在我的初始化函数中我有

controls = new THREE.OrbitControls( cameraB1, rendererB1.domElement );
controls.addEventListener( 'change', render );
controls.enableZoom = true;
controls.enableRotate= false;
controls.addEventListener('mousedown',myOnMouseDownFunction ,false);
controls.update();

以及我需要调用的函数

function myOnMouseDownFunction( evt ) {
  evt.preventDefault();
  var array = getMousePosition( contB1, evt.clientX, evt.clientY );
  onClickPosition.fromArray( array );
  var intersects = getIntersects( onClickPosition, sceneB1.children );
  if ( intersects.length > 0 && intersects[ 0 ].uv ) {
          var uv = intersects[ 0 ].uv;
          console.log(uv);
  }
  console.log("I am being called");
}

所以我要么绕轨道运行，要么调用我的函数。我能做什么？请帮助我。

Answer 1

您应该更改侦听器：

controls.addEventListener('mousedown',myOnMouseDownFunction ,false);

并将侦听器添加到文档或 THREE.js 场景的容器中。

如果您希望仅在触摸某物时禁用 OrbitControl：

function myOnMouseDownFunction( evt ) {
  evt.preventDefault();
  var array = getMousePosition( contB1, evt.clientX, evt.clientY );
  onClickPosition.fromArray( array );
  var intersects = getIntersects( onClickPosition, sceneB1.children );
  if ( intersects.length > 0 && intersects[ 0 ].uv ) {
       controls.enabled = false;
       var uv = intersects[ 0 ].uv;
       console.log(uv);
  }else {
       controls.enabled = true;
  }
  console.log("I am being called");
}

Threejs 添加带有轨道控件的鼠标事件

Threejs add mouse event with orbit controls

javascript

mouseevent

three.js