three.js-将对象悬停在其上时更改其颜色

Question

I am new to Three.js (and WebGL) and in my first project I am creating a model of an animal and animating it in various ways (ie it's head rotates to follow the mouse). The model is built up of lots of different geometries which are combined together in their own functions, for example:

var BodyFunc = function(){
this.mesh = new THREE.Object3D();
this.mesh.name = "body";

// Body
var geomBody = new THREE.SphereGeometry( 100, 150, 150 );
geomBody.applyMatrix( new THREE.Matrix4().makeScale( 1.0, 1.3, 1.0 ) );
var matBody = new THREE.MeshPhongMaterial({color:Colors.black, shading:THREE.FlatShading});
var Body = new THREE.Mesh(geomBody, matBody);
Body.castShadow = true;
Body.receiveShadow = true;
this.mesh.add(Body);

// Body (bottom)
var geomBodyBottom = new THREE.SphereGeometry( 95, 150, 150 );
geomBodyBottom.applyMatrix( new THREE.Matrix4().makeScale( 1.0, 1.0, 1.0 ) );
var matBodyBottom = new THREE.MeshPhongMaterial({color:pantsColour, shading:THREE.FlatShading});
var BodyBottom = new THREE.Mesh(geomBodyBottom, matBodyBottom);
BodyBottom.position.set(0,-40,0);
BodyBottom.castShadow = true;
BodyBottom.receiveShadow = true;
this.mesh.add(BodyBottom);

// Body (base)
var geomBodyBase = new THREE.SphereGeometry( 92, 150, 150 );
geomBodyBase.applyMatrix( new THREE.Matrix4().makeScale( 1.0, 1.0, 1.0 ) );
var matBodyBase = new THREE.MeshPhongMaterial({color:Colors.black, shading:THREE.FlatShading});
var BodyBase = new THREE.Mesh(geomBodyBase, matBodyBase);
BodyBase.position.set(0,-50,0);
BodyBase.castShadow = true;
BodyBase.receiveShadow = true;
this.mesh.add(BodyBase);

};

These functions are then called in a master createAnimal() function which looks like this:

function createAnimal(){

animalBodyGroup = new THREE.Object3D();
animalGroup = new THREE.Object3D();

head = new HeadFunc();

head.mesh.scale.set(.25,.25,.25);
head.mesh.position.y = 0;
animalGroup.add(head.mesh);

body = new BodyFunc();

body.mesh.scale.set(.25,.25,.25);
body.mesh.position.y = 0;
animalBodyGroup.add(body.mesh);

armRight = new armRightFunc();

armRight.mesh.scale.set(.25,.25,.25);
armRight.mesh.position.y = 0;
animalBodyGroup.add(armRight.mesh);

armLeft = new armLeftFunc();

armLeft.mesh.scale.set(.25,.25,.25);
armLeft.mesh.position.y = 0;
animalBodyGroup.add(armLeft.mesh);

footRight = new footRightFunc();

footRight.mesh.scale.set(.25,.25,.25);
footRight.mesh.position.y = 0;
animalBodyGroup.add(footRight.mesh);

footLeft = new footLeftFunc();

footLeft.mesh.scale.set(.25,.25,.25);
footLeft.mesh.position.y = 0;
animalBodyGroup.add(footLeft.mesh);

// master group that is added to the scene (whole animal)
animalGroup.add(animalBodyGroup);

animalGroup.position.y = -40;
animalGroup.castShadow = true;
animalGroup.receiveShadow = true;

scene.add(animalGroup) }

I show you how the model is built mostly because I feel like this isn't the best way to do it and feel like it will be useful in finding the answer to my problem.

The problem

I would like for the Bottom Body section ( BodyBottom ) to change colour when I hover over it, however at the moment my current code only causes the shadow that is cast by the animalGroup to change colour. I understand that the best way to do this is with the raycaster, however, the raycaster seems to not be detecting the individual objects or even the master animalGroup object. I have created a detectMouseMove event listener, and inside that function I find the 3D position of the mouse with the following code:

mousePos3D = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );

The following code is my raycaster code that I copied from a Three.js example . This code is also inside the detectMouseMove function, should it be?

var raycaster = new THREE.Raycaster();

raycaster.setFromCamera( mousePos3D, camera );

var intersects = raycaster.intersectObjects( scene.children );

console.info(INTERSECTED);

if ( intersects.length > 0 ) {
    if ( INTERSECTED != intersects[ 0 ].object ) {
        if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
        INTERSECTED = intersects[ 0 ].object;
        INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
        INTERSECTED.material.emissive.setHex( 0xff0000 );
    }
} else {
    if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
    INTERSECTED = null;
}

This code seems to only change the colour of the shadow of the Animal object which is cast onto the floor (code below)

function createFloor(){ 
    var geomFloor = new THREE.PlaneGeometry(350,350); 
    var matFloor = new THREE.MeshPhongMaterial({color: 0xffffff});
    var Floor = new THREE.Mesh(geomFloor, matFloor);
    Floor.rotation.x = -Math.PI/2;
    Floor.position.y = -72.5;
    // allows shadow to be cast on floor (same for all objects)
    Floor.receiveShadow = true;
    scene.add(Floor);
}

My guess is that due to the way the animal is built, or perhaps when it is called, the raycaster is not intersecting with it, but I have no idea, hence why I am asking here.

What I'm looking for:

• Fix to make the individual objects intersectable
• Make ONLY the BodyBottom intersectable

Thanks for the help, let me know if you need any more examples of my code or anything like that, this is my first SO question so go easy on me, but I'd also appreciate feedback on how to improve my questions! Thanks.

Answer 1

So it turns out that all I needed to do was change:

var intersects = raycaster.intersectObjects( scene.children );

to:

var intersects = raycaster.intersectObjects( scene.children, true );

Thank you to @WestLangley for the answer in the comments to my question, just posting it here so anyone finding this in the future can clearly see the answer.

After doing some more research I found that this fixes my issue as the true parameter makes the intersect recursive, meaning it will intersect all of the descendants of the object, rather than just intersecting the object. I assume this works because I grouped all of my objects into one big "master" group, so without the intersect being recursive, it was just selecting that big group. I'm still unsure why this made the shadow change colour and not the whole animal, so any thoughts on that would be appreciated in the comments. More info can be found here .