Raycasting, check if object is on a list

Hi, im currently have a list of objects. I only want to highlight objects of that list only if they are being targeted by the mouse. Im currently have this code:

function enMira() {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObject(scene, true);
    if (intersects.length > 0) {
        var object = intersects[0].object;
        outlinePass.selectedObjects = [object];
        for(let i=0; i<conf.cantObj; i++){
        outlinePass.selectedObjects = [];

The object of the image is currently on the list, as you can see on the console log the object id is not in the list. What should i do?

  1. Consider using const instead of var (taking also into consideration const does not let you re-assign the value. It makes the code a bit more predictable.)
  2. It seems like you never actually check whether the object is or is not in the list.
const object = intersects[0].object;
const isOnTheList = cont.cantObj.indexOf(object.id) !== -1;

if (isOnTheList) {
  outlinePass.selectedObjects = [object];

Yeah I wanted something like this

if (intersects.length > 0) {
        var object = intersects[0].object;
        for(let i=0; i<conf.cantObj; i++){
            if(object.id == objetivos[i].id){
                do stuff

But this is not working bc the intersected object id differs and idk why. I will try with const

You should not use id to identify objects - it’s an auto-incremented value that depends on the order of objects added to the scene - if you add objects in a different order (or remove then re-add an object), the id will not point to proper objects anymore.

(Consider either assigning .name to an object, or define your own ids in .userData.id = , that’ll then not depend on three.js ID generation. Do not use uuid for identification either, as it is always random.)

Still the same. I created the list of objects with this code:

            gltf.scene.traverse(function (child) {
                if (child.isMesh) {
                    child.castShadow = true;
                    child.receiveShadow = true;
            let meshObjeto = gltf.scene;
            for (let i=0; i<conf.cantObj; i++){
                let aux = meshObjeto.clone();
                aux.position.x = randomEntre(0,100);
                aux.position.z = randomEntre(-100,0);

Event-driven programming could make your job easier. You could bind a pointerover/pointerout event only to certain object3d

Also tried with uuid, and name but still differs. The name of the intersected object is changed to “mesh_0”

I dont care about the id rlly i only use it to see if the two objects are the same, with name, the intersected object returned name is changed to “mesh_0”

Maybe in your list is the group instead of the mesh

Yes! Now i check for the childs and it works. Thanks