I want to add hyperlink to the object added using gltf loader, is it possible to add one in this code?
var loader = new THREE.GLTFLoader();
var mesh;
loader.load('globe.glb', function(gltf){
console.log(gltf);
mesh = gltf.scene;
console.log(mesh.children[0]);
mesh.children[0].material = new THREE.MeshLambertMaterial();
mesh.position.z = z;
mesh.position.x = x
if(x!=0){
gltf.scene.scale.set(0.5,0.5,0.5)
}
if(y==1){
mesh.position.y = x
}
if(y==2){
mesh.position.y = -1*x
}
scene.add( mesh );
});
Adding hyperlinks to 3D objects is not possible.
The common approach is to use raycasting to detect interaction with a model. You can then navigate the user to a different URL by setting window.location.href in JavaScript.
If you need a complete example that shows how to use raycasting in three.js for implementing interaction, have a look at webgl_interactive_cubes.
As @Mugen87 stated,
The common approach is to use raycasting to detect interaction with a model.
Since hyperlinks are typically triggered on click, use the click event listener of JavaScript.
Once you determine that the model was clicked on, you just set window.location.href = 'https://example.com/
That should do it~