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 dete

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

Answer 2

I noted that all this that was said before is fine in a full window I think, but if you have other things besides a canvas on the page you need to get the click events target's offset and remove it.

e = event and mVec is a THREE.Vector2

    let et = e.target, de = renderer.domElement;
    let trueX = (e.pageX - et.offsetLeft);
    let trueY = (e.pageY - et.offsetTop);
    mVec.x = (((trueX / de.width) * 2) - 1);
    mVec.y = (((trueY / de.height) * -2) + 1);
    wup.raycaster.setFromCamera( mVec, camera );
    [Then check for intersections, etc.]

Looks like you need to watch for dragging (mouse movements) too or releasing from a drag will trigger an unwanted click when using window.addEventListener( 'click', function(e) {<code>});

[You'll notice I put the negative sign where it's more logical as well.]

Answer 3

The THREE.JS raycaster documentation actually gives all the relevant information that is laid out in these answers as well as all the missing points that may be difficult to get your head around.

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

function onMouseMove( event ) { 
  // calculate mouse position in normalized device coordinates 
  // (-1 to +1) for both components 
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; 
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; 
} 

function render() { 
  // update the picking ray with the camera and mouse position
  raycaster.setFromCamera( mouse, camera ); 
  // calculate objects intersecting the picking ray var intersects =     
  raycaster.intersectObjects( scene.children ); 

  for ( var i = 0; i < intersects.length; i++ ) { 
    intersects[ i ].object.material.color.set( 0xff0000 ); 
  }

  renderer.render( scene, camera ); 
} 
window.addEventListener( 'mousemove', onMouseMove, false );        
window.requestAnimationFrame(render);`

Hope it helps.

Answer 4

You can use the latest recommended version as stated above.

To get your specific code working, replace:

projector.unprojectVector( vector, camera );

with

vector.unproject(camera);

Answer 5

https://github.com/mrdoob/three.js/issues/5587

var vector = new THREE.Vector3();
var raycaster = new THREE.Raycaster();
var dir = new THREE.Vector3();

...

if ( camera instanceof THREE.OrthographicCamera ) {

    vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, - 1 ); // z = - 1 important!

    vector.unproject( camera );

    dir.set( 0, 0, - 1 ).transformDirection( camera.matrixWorld );

    raycaster.set( vector, dir );

} else if ( camera instanceof THREE.PerspectiveCamera ) {

    vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 ); // z = 0.5 important!

    vector.unproject( camera );

    raycaster.set( camera.position, vector.sub( camera.position ).normalize() );

}

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