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;
console.log('Objeto:'+object.id);
outlinePass.selectedObjects = [object];
for(let i=0; i<conf.cantObj; i++){
console.log('List:'+objetivos[i].id);
}
}
else{
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?
- 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.)
- 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:
loader.load(objetoUrl.href,
function(gltf){
gltf.scene.traverse(function (child) {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
}
});
let meshObjeto = gltf.scene;
meshObjeto.position.set(50,2,-50);
meshObjeto.scale.set(0.3,0.3,0.3);
for (let i=0; i<conf.cantObj; i++){
let aux = meshObjeto.clone();
aux.position.x = randomEntre(0,100);
aux.position.z = randomEntre(-100,0);
objetivos.push(aux);
scene.add(aux);
}
}
);
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
