Search code examples
three.jsraycasting

Three js raycaster not returning intersections


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

Solution

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