As a beginner in the world of Three.js and WebGL, my first project involves creating a model of an animal and animating it in different ways, such as having its head follow the mouse cursor. The model consists of various geometries that are combined in separate functions. Here is an example of one such function:
var BodyFunc = function(){
this.mesh = new THREE.Object3D();
this.mesh.name = "body";
// Code for body geometry goes here...
These functions are then called within a master createAnimal() function to assemble the complete creature:
function createAnimal(){
// Code for assembling the animal components goes here...
}
I shared this code structure because I suspect it may not be the most efficient way to achieve what I want with the model. Now onto the issue at hand...
The Problem Statement
I am trying to make the Bottom Body section (BodyBottom) change color when hovered over, but currently, only the shadow cast by the animalGroup changes color. I believe using raycasting is the solution, but I'm facing difficulties with detecting individual objects or even the entire animalGroup. I have set up a detectMouseMove event listener to get the 3D position of the mouse, like so:
// Code for getting mouse position in 3D goes here...
I have also implemented raycasting based on a Three.js example inside the detectMouseMove function:
// Raycasting code snippet...
However, this raycasting seems to only affect the shadow of the Animal object, not the actual body parts. Furthermore, changing the floor shader's color demonstrates this more clearly.
My assumption is that due to the construction or invocation of the animal model, the raycaster is failing to intersect with it. But I'm unsure, which is why I seek guidance here.
Resolution Needed:
- Fix to allow individual objects to be recognizable by the raycaster
- Ensure only the
BodyBottompart is selectable via raycasting
Thank you for your assistance. Feel free to ask for additional code examples if necessary. This being my debut question on SO, I welcome constructive feedback on how to enhance future inquiries. Much appreciated!