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!