19_find_intersections.md

Example step

Find the object being intersected from mouse

Goal

Understand the raycaster and projections

Instructions

• start from our default scene

• set the camera position at (0,20,30)

• create a new MeshLambertMaterial whit color 0xFC6A45

  var material = new THREE.MeshLambertMaterial({
   color: 0xFC6A45
  });

• create one BoxGeometry with size 6

  var geometry = new THREE.BoxGeometry(6,6,6);

• now using a loop-construct build up to six cubes using the same geometry and material, and try to position all the cubes around; don't forget to add them to the scene!

  var geometry = new THREE.BoxGeometry(6, 6, 6);
  var cube, k = -6;
  while (k++ < 6) {
    cube = new THREE.Mesh(geometry, theMaterial);
    cube.name = 'cube_' + k;
    if (k%2) {
      cube.position.set(
        8 * k,
        Math.round(Math.random() * 10),
        Math.round(Math.random() * 10));
    } else {
      cube.position.set(
        8 * k,
        -Math.round(Math.random() * 10),
        -Math.round(Math.random() * 10));
    }
    scene.add(cube);
  }

• then we need to save the cubes in an array to check against when we will cast the rays; define it on the top

  var intersectables = [];
  while (k++ < 6) {
    
    //...
    
    intersectables.push(cube);
  }

• take the function onMouseMove() that we created in the previous tutorial and bring it here

• bind the listener on the canvas as per previous tutorial

  $(canvas).on('mousemove', onMouseMove);

• at this point we need to create a bunch of new objects; put them at the top of your code:

  var mouseVector = new THREE.Vector3();
  var rayCaster = new THREE.Raycaster();
  
  // to cache the last selected object  
  var lastIntersected;

• now create a new function called findIntersections() which takes two arguments: mouseX and mouseY; you must retrieve these values using the formulas from translating mouse coordinates tutorial

  function checkIntersections(mouseX, mouseY) {
      var currentIntersection;
  
      // add code here
  
  }

• let's update the vector which represents the mouse with the current coordinates

  mouseVector.set(mouseX, mouseY, 1);

• setup the RayCaster with the new mouse position and the camera from which we are looking to the scene

  rayCaster.setFromCamera(mouseVector, camera);

• and finally, let the RayCaster check for intersections with our cached objects

  var intersections = rayCaster.intersectObjects(intersectables);

• the RayCaster gives back an array of intersected objects, the first is the closer to the camera: just print it out in console, in order to check whether it is working or not

  var obj;
  if (intersections.length > 0) {
      obj = intersections[0].object;
      console.log(obj.name);
  }

• and here is the complete checkIntersections function

  function checkIntersections(mouseX, mouseY) {
  
      // generate the inverse projection
      mouseVector.set(mouseX, mouseY, 1);
  
      // set the parameters for raycaster
      rayCaster.setFromCamera(mouseVector, camera);
  
      // calculate intersections
      var intersections = rayCaster.intersectObjects(intersectables);
  
      var obj;
      if (intersections.length > 0) {
          obj = intersections[0].object;
          console.log(obj.name);
      }
  
  }

Explanation

This is the simplest (as of r71) way to calculate intersections, not the only one.