I use GLTFLoader import glb model,However raycaster doesn't work.

I've been looking for a long time and still can't find the answer.

My code :

var ourObj;
const loader = new GLTFLoader()
loader.load('assets/fan.glb', function (glb) { //import glb
    const root = glb.scene;
    ourObj = root;
    root.name = 'bulb';
    root.scale.set(10, 10, 10);
    //root.userData.draggable = true
    root.userData.name = 'CASTLE'
    scene.add(root);
}, function (xhr) { //xhr
    console.log("xhr");
}, function (error) { //error
    console.log("error"); 
})

const raycaster = new THREE.Raycaster(); //raycaster
const mouse = new THREE.Vector2();
//var draggable = THREE.Object3D;

function onMouseMove( event ) { //event
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1 ;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1 ;
}

window.addEventListener( 'mousemove', onMouseMove,false);
function hoverPieces(){
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);
    console.log(scene.children); //console
    console.log(intersects);
    for ( let i = 0; i < intersects.length; i ++ ) {
        intersects[ i ].object.material.color.set( 0xff0000 );
    }
}

var render = function () {
    hoverPieces()
    renderer.render(scene, camera);
    requestAnimationFrame(render);
};
render()

console result:

how can i use it ?