Three.js THREE.Projector został przeniesiony do

Question

Hi zrozumieć nie ma THREE.projector w wersji TRZECIA 71.

Ale dont undestand, jak wymienić THREE.projector función iz czym?

To jest moja funkcja klikania:

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


     } 

co jest właściwe podejście?

Answer 1

Jest teraz łatwiej wzór, który współpracuje z obu typów ortograficznych i perspektywy kamery:

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

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

Answer 3

Można użyć najnowszych zalecana wersja jak podano powyżej.

Aby otrzymać konkretną pracę kodu, należy wymienić:

projector.unprojectVector(vector, camera); 

z

vector.unproject(camera); 

Answer 4

I zauważył, że to wszystko, co zostało powiedziane wcześniej jest w porządku w pełnym oknie myślę, ale jeśli masz inne rzeczy oprócz płótna na stronie, musisz uzyskać przesunięcie celu zdarzenia kliknięcia i usunąć go.

e = zdarzenie i MVEC jest 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.] 

Wygląda na to trzeba uważać na przeciąganie (ruchy myszy) lub też zwolnienia z drag spowoduje niechciane kliknięcia (w przypadku korzystania window.addEventListener "kliknij", funkcja (e) {<kod>});

[Zauważysz umieścić znak ujemny, gdzie jest bardziej logiczne, jak również.]

Answer 5

THREE.JS raycaster documentation faktycznie daje wszystkie istotne informacje, które są określone w tych odpowiedzi, a także wszystkich brakujących punktów, które mogą być trudnym do zdobycia głowy.

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

Mam nadzieję, że to pomaga.