I'm facing an issue where I want to create a mouse hover effect on an object with multiple materials.

See an example here

function update()
{
    // Finding intersections

    // Creating a Ray with the origin at the mouse position
    //   and direction into the scene (camera direction)
    var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
    projector.unprojectVector( vector, camera );
    var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

    // Creating an array containing all objects in the scene that intersect with the ray
    var intersects = ray.intersectObjects( scene.children );

    // INTERSECTED = the object in the scene currently closest to the camera 
    //      and intersected by the Ray projected from the mouse position    

    // If there are one or more intersections
    if ( intersects.length > 0 )
    {
        // If the closest object intersected is not the current intersection object
        if ( intersects[0].object != INTERSECTED ) 
        {
            // Restoring the previous intersection object color (if it exists) to its original color
            if ( INTERSECTED ) 
                INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
            // Storing reference to the closest object as the current intersection object
            INTERSECTED = intersects[0].object;
            // Storing the color of the closest object for later restoration
            INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
            // Setting a new color for the closest object
            INTERSECTED.material.color.setHex( 0xffff00 );
        }
    } 
    else // If there are no intersections
    {
        // Restoring the previous intersection object color (if it exists) to its original color
        if ( INTERSECTED ) 
            INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
        // Removing the reference to the previous intersection object by setting it to null
        INTERSECTED = null;
    }

    if ( keyboard.pressed("z") ) 
    { 
        // Do something
    }

    controls.update();
}

The code doesn't seem to work as intended. It always shows "Uncaught TypeError: Cannot read property 'setHex' of undefined"

I've made changes to the intersection code, but it's still not working:

function update()
{

    // Finding intersections

    // Creating a Ray with the origin at the mouse position and direction into the scene (camera direction)
    var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );

    projector.unprojectVector( vector, Camera );
    var ray = new THREE.Raycaster( Camera.position, vector.sub( Camera.position ).normalize() );

    // Creating an array containing all objects in the scene that intersect with the ray
    var intersects = ray.intersectObjects( Scene.children );

    // INTERSECTED = The object in the scene currently closest to the camera and intersected by the Ray projected from the mouse position

    // If there are one or more intersections (objects found with the mouse)
    if ( intersects.length > 0 )
    {
        // If the first object found is different from the previously found object
        if (intersects[0].object != INTERSECTED)
        {
            // Restoring the previous color of the object to the original color
            if (INTERSECTED)
            {
                INTERSECTED.material = INTERSECTED.currentHex;
            }
            // Storing reference to the closest object as current intersection object
            INTERSECTED = intersects[0].object;

            // Storing the color of the closest object for later restoration
            for(var p = 0; p < INTERSECTED.material.materials.length; p++)
            {
                INTERSECTED.currentHex = INTERSECTED.material.materials[p].emissive.getHex();
            }
        }
    }
    else // If there are no intersections
    {
        // Restoring the previous color of the object (if it exists) to its original color
        if ( INTERSECTED )
        {
            INTERSECTED.material = INTERSECTED.currentHex;
        }
        // Removing the reference to the previous intersection object by setting it to null
        INTERSECTED = null;
    }
    controls.update();
}

All objects appear black. The objects are loaded here:

function displayFloor()
{
    // Loading the school model. The first parameter is the model's URL and the second is the function to execute after loading it. In this case, I'm using an anonymous function.

    loader.load("models/computerScienceGroundFloor/GroundFloorWithoutRoom.js", function (geometry, materials)
        {
            let material = new THREE.MultiMaterial(materials);
            let object = new THREE.Mesh(geometry, material);
            object.name = "pavilion";
            Scene.add(object);
        }
    );

    loader.load("models/computerScienceGroundFloor/GroundFloorRoom.js", function (geometry, materials)
        {
            let material = new THREE.MultiMaterial(materials);
            let object = new THREE.Mesh(geometry, material);
            object.name = "room";
            Scene.add(object);
        }
    );
}

You can view the complete code here: https://github.com/kathyer/Mousehover. Any suggestions on what I can do to fix this? Thank you!