Three.js：改变网格颜色导致只有一张脸受到改变的影响

Question

so i have a model (an assembly from CAD) in GLB format, with many parts, hierarchy and such. What i'm trying to accomplish is highlighting an object (specifically, a part of the assembly) on mouseover.

so the main code that does this is:

raycaster.setFromCamera( pointer, camera );
            
                const intersects = raycaster.intersectObjects(scene.children, true);

                if ( intersects.length > 0 ) {

                    if ( INTERSECTED != intersects[ 0 ].object ) {

                        if ( INTERSECTED ) INTERSECTED.material.color.set( INTERSECTED.currentColor );

                        INTERSECTED = intersects[ 0 ].object;
                        
                        INTERSECTED.currentColor = INTERSECTED.material.color.getHex();

                        INTERSECTED.material = INTERSECTED.material.clone();
                        INTERSECTED.material.color.setHex( 0xffb300 );

                    }

                } else {

                    if ( INTERSECTED ) INTERSECTED.material.color.set( INTERSECTED.currentColor );
                    INTERSECTED = null;

                }

but unfortunately, the result i get is that only 1 face gets the colour change, the rest of the mesh does not. I have tried many things but i'm kind of a novice on three.js so basically i don't have a clue

Answer 1

for anybody with the same problem in the future: for some kind of reason the step->glb conversion made a standalone mesh for every object face. So in order to highlight the whole part i had to change the material of every object in object.parent.children