I’m new to ThreeJS and I would like to know whether it raycasting is possible for visible objects that are under few layers in a glb model? I have several layers of objects and when orthographically projected they give a single scene. Now I want to change the cursor to a pointer when the cursor is hovered over an object that is visible but below several layers. Can anybody explain me how to achieve this?
See the example here Raycaster. You can use the raycaster intersectObjects method, populate the Objects param, with an array of objects you want to highlight.
const myHighlightedObjects = [obj1, obj2 ...];
const intersects = raycaster.intersectObjects( myHighlightedObjects );
document.body.style.cursor = intersects.length ? "pointer" : "default";
It will work with either perspective or orthographic camera, and even if the objects are behind other objects, as long as they are visible.
Maybe the beginner example (step 10) from the collection will help you?
557 // … step 10: raycaster
881 function raycasting
.object => Have a look at the whole object in the console.
I have an image of my glb model. So to change the cursor to a pointer, should I know the object’s name or ID that the mouse is over? Or can’t I choose the object using animation?
Yes, to filter the objects you want to highlight, you need to identify them with there ids or names.
Create a filter array, a list of names or ids of the objects you want to raycast over, then traverse your GLB scene and get all the objects with matched names/ids:
const namesFilter = ["name1", "name2", ...];
const highlightedObjects = [];
importedGlbScene.traverse(obj => {
if(namesFilter.includes(obj.name))
highlightedObjects.push(obj);
});
// In your animation function
raycaster.setFromCamera(pointer, camera);
const intersects = raycaster.intersectObjects( highlightedObjects );
document.body.style.cursor = intersects.length ? "pointer" : "default";
Here is a working example: