I have a scene working with orbitControls in threejs (r84) and I want to add a mouse event for raycasting. The function works, but I cant call both events. They only work if I turn the other off.

Inside my init function I have

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

And the function I need to call

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

So either I orbit or call my function. What can I do? Please help me.

I have a scene working with orbitControls in threejs (r84) and I want to add a mouse event for raycasting. The function works, but I cant call both events. They only work if I turn the other off.

Inside my init function I have

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

And the function I need to call

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

So either I orbit or call my function. What can I do? Please help me.

• javascript
• three.js
• mouseevent

Share Improve this question Follow asked Jan 29, 2017 at 11:05 lesolorzanovlesolorzanov 3,62499 gold badges3939 silver badges5757 bronze badges 4

• The working copy of this is here cb.uu.se/~lesso657/3D/first.html you can check the code – lesolorzanov Commented Jan 29, 2017 at 11:14
• I changed "controls.addEventListener" by the dom element's add event listener and it worked. But it was not working before, that is why I wanted to see if I could add event listeners to the ThreeJS controls. – lesolorzanov Commented Jan 29, 2017 at 12:36
• You want them both workin? – Normal Commented Jan 29, 2017 at 18:06
• Tip: remove requestAnimationFrame( render ); render() is called by your event listener. – WestLangley Commented Jan 29, 2017 at 18:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You should change the listener:

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

and add the listener to the document or to the container of the THREE.js scene.

if you wand to disable the OrbitControl only when you touch something:

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