web-dev-qa-db-fra.com

Three.js THREE.Projector a été déplacé vers

Bonjour, j’ai bien compris qu’il n’existait pas de THREE.projector dans la version THREE 71.

Mais je ne comprends pas, comment remplacer THREE.projector funcion et avec quoi?

Ceci est ma fonction de clic:

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


         }

quelle est la bonne approche?

javascriptthree.js
12
Martin

Il existe maintenant un modèle plus simple qui fonctionne avec les types de caméras orthographiques et en perspective:

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

trois.js r.84

23
WestLangley

La documentation de Raycaster THREE.JS donne en fait toutes les informations pertinentes qui figurent dans ces réponses, ainsi que tous les points manquants qui peuvent être difficiles à comprendre. 

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

J'espère que ça aide.

8
odlh

Je pense que tout ce qui a été dit auparavant convient parfaitement dans une fenêtre complète, mais si vous avez d'autres éléments que le canevas sur la page, vous devez obtenir le décalage de la cible des événements de clic et le supprimer. 

e = event et mVec est un 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.]

Il semble que vous deviez également surveiller les mouvements de la souris (mouvements de la souris) ou les relâcher après avoir déclenché un clic lorsque vous utilisez window.addEventListener ('clic', fonction (e) {<code>});

[Vous remarquerez que j'ai mis le signe négatif là où c'est plus logique aussi.]

1
Master James

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 );
1
Ivan Bacher

Vous pouvez utiliser la dernière version recommandée comme indiqué ci-dessus.

Pour que votre code spécifique fonctionne, remplacez:

projector.unprojectVector( vector, camera );

avec

vector.unproject(camera);
0
George B