I have a galaxy made of 3 planets and a spaceship and I want all of them to be clickable to load another page. I managed to do so with the 3 planets adding planet.userData = {URL: "my.html"}; but not with the spaceship, which is a GLTF loaded model.

This is how I loaded the spaceship:

const loader = new GLTFLoader();
            loader.load('models/spaceship.glb', function(gltf) {

                const spaceship = gltf.scene;
            
                spaceship.scale.set(0.08, 0.08, 0.08);
                spaceship.userData = {URL: "my.html"}; //Adding the URL here
                objects.push(spaceship); //This is for raycasting
                scene.add(spaceship);
                
                
            }, undefined, function(error){
                console.error(error);
            });

And this is the function for the Mouse Down event:

function onDocumentMouseDown(){

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

                const raycaster = new THREE.Raycaster();
                raycaster.setFromCamera(mouse, camera);
                const intersects = raycaster.intersectObjects(objects, true);

                if ( intersects.length > 0 ) {
                    window.open(intersects[0].object.userData.URL); // <-- Doesn't work
                }

            }

When clicking on the spaceship the URL value is "undefined". I'm sure there is another way to do so but I can't find any solution. Thank you so much in advance to anyone helping!