CODEWITHSUNDEEP
javascripthyperlinkthree.js
pranjall
pranjall

Reputation: 11

Different THREE.JS 3D models as hyperlink

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.

Upvotes: 1

Views: 456

Answers (1)

M -
M -

Reputation: 28502

intersects[0].objects does not exist. Based on the Raycaster docs, my guess is you're trying to pass intersects[0].object, to the window.open() function, but that second argument is expecting a string, not a 3D Mesh object.

Not sure how you're expecting different behaviors when you call the exact same thing:

window.open('https://www.google.com', "[object Object]");

multiple times. Maybe you'd like to assign a name to each object, and then use that by accessing intersects[0].object.name?

Upvotes: 1

Related Questions