CODEWITHSUNDEEP
javascriptthree.jsmouseevent
lesolorzanov
lesolorzanov

Reputation: 3615

Threejs add mouse event with orbit controls

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.

Upvotes: 2

Views: 10152

Answers (1)

Normal
Normal

Reputation: 547

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

Upvotes: 3

Related Questions