Different THREE.JS 3D models as hyperlink

Questions
, ,
1

I want to make each of the objects open a new page using a URL. For example, clicking on about me will open an about me page. I cannot get it to work. What am I missing or doing wrong? Here is my click event for the objects. I can share more code if this is not enough.

 function onClick(event) {

event.preventDefault();

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

raycaster.setFromCamera(mouse, camera);

let objects = [aboutme, skills, interests, projects, contact];

var intersects = raycaster.intersectObjects(objects, true);


if (intersects.length > 0) {

    console.log('Intersection:', intersects[0].objects); //this works
    window.open(intersects[0].objects);
}}

If I write the code like this,

if (intersects.length > 0) {
            console.log('Intersection:', intersects[0].objects);
            window.open('https://www.google.com',intersects[0].objects);
        }

It works but clicking on all models opens up the same google website.

2
1 Like
3

@Pranjal_Lokhande
Use a reference to the objects names to have them each do different things… Eg

if (intersects.length > 0) {
If(intersects[0].objects.name === object1) {window.open link1}
If(intersects[0].objects.name === object2) {window.open link2}

}

Safe

4

Perhaps, this will work for you

Show Me

function onClick(event) {
var inx, names = [ ‘aboutme’, ‘skills’, ‘interests’, ‘projects’, ‘contact’ ], objects = names.map( $ => window[$] );

raycaster.setFromCamera( { x: 2*event.offsetX / event.target.clientWidth - 1 , y: -2*event.offsetY / event.target.clientHeight + 1 }, camera );
if( !( inx = raycaster.intersectObjects(objects) ).length ) return;
window.open( ‘https://www.google.com/search?q=’ + names[ objects.indexOf(inx[0].object) ] );
}