Three.js THREE.Projector перенесен в

Ответ 1

Теперь есть более простой шаблон, который работает как с орфографическими, так и с перспективными типами камер:

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

Ответ 2

THREE.JS raycaster documentation фактически дает всю соответствующую информацию, которая изложена в этих ответах, а также все недостающие моменты, которые могут с трудом поднять голову.

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);`

Надеюсь, что это поможет.

Ответ 3

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

Ответ 4

Я заметил, что все, что было сказано ранее, прекрасно в полном окне, я думаю, но если у вас есть другие вещи, кроме холста на странице, вам нужно получить смещение целевого события кликов и удалить его.

e = событие, а mVec - 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.]

Похоже, вам нужно также следить за перетаскиванием (движениями мыши) или отбрасывать с помощью перетаскивания, вызывая нежелательный щелчок при использовании window.addEventListener('click', function (e) {<code> });

[Вы заметите, что я помещаю отрицательный знак, где он более логичен.]

Ответ 5

Вы можете использовать последнюю рекомендованную версию, как указано выше.

Чтобы получить свой код, замените:

projector.unprojectVector( vector, camera );

с

vector.unproject(camera);