Strange Raycaster behavior, save the last intersection even though I'm using another

Questions
,
1

Hello friends, I’m really desperate.

I have a project where I am using a combination of the ‘mousedown’ event and raycaster.intersectObjects () in the animate () to be able to launch a floating window according to the mesh I choose.

The problem is that it seems to save the information of the last intersection even though I am choosing another mesh.

For example, I have Mesh A, Mesh B, Mesh C, and Mesh D. I click on Mesh A and it activates the event A. But when I click on Mesh B, instead of launching the Mesh B event, it repeats the Mesh A event, and after clicking again, it already activates the B event, as if save that last data, and even stranger, even though no mesh is clicked, only the mouse click event triggers the last event that triggered the last intersected mesh.

Any ideas on the subject would be amazing. Thank you

//// CODE ////

animate(){

function hoverRay () {

 //Raycasters
 var raycasterS = new THREE.Raycaster();

////MOUSE
const 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;
}

 window.addEventListener('mousemove', onMouseMove, false);

raycasterS.setFromCamera( mouse, camera );

const intersectsS= raycasterS.intersectObjects(targetGlobal, true);

function onDocumentMouseDown( event ) {

for ( let i = 0; i < intersectsS.length; i ++ ) {

      

                //console.log(intersectsS[ i ].object.name);

                if (intersectsS[i].object.name == "VIDEO_ZeYXLAB" && intersectsS[i].distance < 200){

                    console.log("Salvador");
                   intersectsS.length = 0;

                    return;

                }

                if (intersectsS[i].object.name == "VIDEO_FABIOLA_LARIOS"  && intersectsS[i].distance < 200)                                 {

                    console.log("Fabiola");

                    intersectsS.length = 0;

                    return;

                }

                if (intersectsS[i].object.name == "VIDEO_SAM1"  && intersectsS[i].distance < 200){

                    console.log("Sam1");

                    intersectsS.length = 0;

                    return;

                }

                if (intersectsS[i].object.name == "VIDEO_SAM2"  && intersectsS[i].distance < 200){

                    console.log("Sam2");

                    intersectsS.length = 0;

                    return;

                }

            

               }

                        

            }

    
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
}

hoverRay();
}
2

some thoughts on this? :frowning:

3

I’m a bit irritated about your code structure. When copy/pasting it into a fiddle and the formatting it, it looks like so: https://jsfiddle.net/8bt4mcvL/

  • Why are you putting the entire logic into animate()?
  • Why is hoverRay() declared inside animate()?
  • Why are the mouse listeners declared inside hoverRay()?
  • The call of intersectObjects() should be inside onDocumentMouseDown().
  • Create objects like raycasterS and mouse only once and reuse them.
  • There is no need of doing intersectsS.length = 0;. You have a GC for this.