Three js raycaster not returning intersections

Question

Very new to Three.js and coding in general so bear with me. I'm trying to implement some draggable cubes similar to the example on threejs.org but I'm having issues with the raycaster in one particular section of my code. For some reason the raycaster is not returning intersections with my plane geometry upon selection of my cube. Below is the specific block of code. Any help would be much appreciated.

function onDocumentMouseMove(event) {
    event.preventDefault();

    mouse.x = ((event.clientX - 70)/renderer.domElement.width) * 2 - 1;
    mouse.y = ((event.clientY - 50)/renderer.domElement.height) * 2 + 1;

    var raycaster = new THREE.Raycaster();
    raycaster.setFromCamera( mouse, camera );

    if (SELECTED) {
      var intersects = raycaster.intersectObject(plane);
      SELECTED.position.copy( intersects[ 0 ].point.sub( offset ) );
      return;
    }

    var intersects = raycaster.intersectObjects(objects);
    if (intersects.length >  0) {
      INTERSECTED = intersects[0].object;
      plane.position.copy(INTERSECTED.position);
      plane.lookAt(camera.position);
    }

    render();
  };

Below is the mouseDown event for selecting the cube:

function onDocumentMouseDown(event) {
    event.preventDefault();

    mouse.x = ( ( event.clientX - 70 ) / renderer.domElement.width ) * 2 - 1; 
    mouse.y = - ( ( event.clientY - 50 ) / renderer.domElement.height ) * 2 + 1;

    var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5);
    vector = vector.unproject(camera);
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
    var intersects = raycaster.intersectObject(cube);

    if (intersects.length > 0) {    
      intersects[0].object.material.color.setHex(0xff0000);    
      SELECTED = intersects[ 0 ].object;
      var intersects = raycaster.intersectObject( plane );
      offset.copy( intersects[ 0 ].point ).sub( plane.position );    
    }

    render();
  };

The renderer is contained in a smaller div on my page and is offset by 70 and 50 pixels horizontally and vertically from the edge of the screen. Haven't figured out a better way to account for the margins yet. — Diederik Kroondijk

Diederik Kroondijk Diederik Kroondijk · Accepted Answer · 2015-05-03T16:30:18

Figured out my error. I was missing the '-' for my mouse.y in the onMouseMove function.

mouse.x = ((event.clientX - 70)/renderer.domElement.width) * 2 - 1;
mouse.y = -((event.clientY - 50)/renderer.domElement.height) * 2 + 1;

Three js raycaster not returning intersections

1 Answers