Three.js THREE.Projector has been moved to

Question

I understand there is no THREE.projector in version 71 (see the deprecated list), but I don't understand how to replace it, particularly in this code that detects which object has been clicked on:

var vector = new THREE.Vector3(
  (event.clientX / window.innerWidth) * 2 - 1,
  -(event.clientY / window.innerHeight) * 2 + 1,
  0.5
);
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(
  camera.position,
  vector.sub(camera.position).normalize()
);
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
  clicked = intersects[0];
  console.log("my clicked object:", clicked);
}

Answer 1

There is now an easier pattern that works with both orthographic and perspective camera types:

var raycaster = new THREE.Raycaster(); // create once
var mouse = new THREE.Vector2(); // create once

...

mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

raycaster.setFromCamera( mouse, camera );

var intersects = raycaster.intersectObjects( objects, recursiveFlag );

three.js r.84

---

Objects = The objects to check for intersection with the ray.

recursiveFlag = If true, it also checks all descendants of the objects. Otherwise it only checks intersection with the objects. Default is true

[docs][1]

renderer = this thing that displays your beautifully crafted scene domelement = the html element which the renderer draws too. A <canvas> element. [1]: https://threejs.org/docs/?q=raycaster#api/en/core/Raycaster