Explore various THREE.JS 3D models through a clickable link

I am struggling to make each object open a new page using a URL when clicked. No matter what I try, it doesn't seem to work properly. Can someone point out what I might be missing or doing wrong? Here is the click event code for the objects. If needed, I can provide more code.

    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);
    }}

When I modify the code like this,

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

It seems to work but all models lead to the same google website when clicked.

Answer №1

intersects[0].objects is not a valid property. According to the Raycaster documentation, it seems like you may have meant to use intersects[0].object instead in conjunction with the window.open() function. However, keep in mind that the second argument of window.open() should be a string and not a 3D Mesh object.

It's unclear how you expect different outcomes by repeatedly calling the same command:

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

You could consider assigning a name to each object and then referencing it using intersects[0].object.name.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best location to initialize a fresh instance of the Firebase database?

Is the placement of const db = firebase.database() crucial in a cloud function script? For instance, in a file like index.ts where all my cloud functions are located, should I declare it at the top or within each individual function? const db = firebase. ...

The Problem of Restoring Column Height in Tabulator 4.6.3 Filters

The Issue After activating and deactivating header filters, the column height does not return to its original state. Is this the expected behavior? Is there a way to reset the column height? Check out this JS Fiddle example: https://jsfiddle.net/birukt ...

Issue with JQueryUI Dialog auto width not accounting for vertical scrollbar

My JQueryUI Dialog has the width property set to 'auto'. Everything functions properly except in situations where the content exceeds the height of the dialog: A vertical scrollbar appears, but it disrupts the layout of the content within the dia ...

Unable to properly display the message in Angular

<!DOCTYPE html> <html ng-app> <head> <script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script> <link rel="stylesheet" href="style.css" /> ...

Comparison between JavaScript Promise .then(onFulfilled, onRejected) and .then(onFulfilled).catch(errorFunc) in handling asynchronous operations

As I was reviewing promises, I had a question about the order in which the .then/catch calls are executed when using the code below. Are the catch calls being placed at the end of the queue stack? I already have a clear understanding of the distinction bet ...

Pinia has not been instantiated yet due to an incorrect sequence of JavaScript file execution within Vue.js

I'm currently developing a Vue.js application using Vite, and I have a Pinia store that I want to monitor. Below is the content of my store.js file: import { defineStore } from 'pinia'; const useStore = defineStore('store', { st ...

Has Apache initiated a forced logout process?

Running a LAMP server, I have implemented Apache basic authentication to log in users accessing the server homepage. I am currently seeking a way to enforce user logout, but my attempts with mod_session & mod_auth_form have not been successful. The page ...

What is the best way to ensure my php variable is easily accessed?

Recently, I've been working on implementing a timer and came across the idea in a post on Stack Overflow. <?php if(($_SERVER['REQUEST_METHOD'] === 'POST') && !empty($_POST['username'])) { //secondsDif ...

What does React specifically point to when mentioning the encapsulated object?

New to React and seeking advice. Here are the components I am working with: var Vertex = React.createClass({ //2. Struggling to parameterize this instantiation, facing parsing errors when trying to use this.props within the render function's < ...

What is the process for moving the final character to the beginning of a string?

Initially, the last letter in the string is being displayed. How can I rearrange it so that the last character appears first in the value? https://i.stack.imgur.com/uGq6H.jpg contentHtml += "<td rowspan1=\"" + 1 + "\" class=\"" + ( ...

Encountering an unforeseen change in the "buttonText" attribute

I've developed a simple Vue.js component for a button. When the button is clicked, it should display the text "I have been clicked." It does work as expected, but I'm also encountering an error that reads: 49:7 error Unexpected mutation of "but ...

Execute a VueJS API call every 20 minutes

I am retrieving data from an API endpoint to display information about coin names. I would like this information to update every 20 minutes, but for testing purposes, I have set it to refresh every 500 milliseconds. However, my current approach of fetching ...

Tips for altering the appearance of a button:

Upon clicking the subscribe button and successfully subscribing, I want to display an unsubscribe option in my code. To achieve this, I have created two separate divs for each button, thinking that we could toggle between them. <div id ="subscribe_ever ...

In PhantomJS, where is the location of the "exports" definition?

Consider the following code snippet from fs.js: exports.write = function (path, content, modeOrOpts) { var opts = modeOrOptsToOpts(modeOrOpts); // ensure we open for writing if ( typeof opts.mode !== 'string' ) { opts.mode = ...

Information vanishes as the element undergoes modifications

I am currently working with a JSON file that contains information about various events, which I am displaying on a calendar. Whenever an event is scheduled for a particular day, I dynamically add a div element to indicate the presence of an event on the c ...

Test success despite Cypress assertion failing

Conducting integration tests on an API. Encountering a scenario where one test passes while another fails despite having similar assertions. Feeling confused about the handling of async/promises in cypress. context("Login", () => { // This t ...

Incorporating a dropdown menu into an HTML table through jQuery proves to be a

I loaded my tabular data from the server using ajax with json. I aimed to generate HTML table rows dynamically using jQuery, with each row containing elements like input type='text' and select dropdowns. While I could create textboxes in columns ...

Obtain the URL from a Span Class located within a table

As I embark on my journey to learn javascript and jQuery, it's clear that my knowledge is quite rudimentary at this point. An attempt to make edits to a script written in Tampermonkey by a friend has led me down a path of extensive Googling with littl ...

What is the best way to showcase page content once the page has finished loading?

I'm facing an issue with my website. It has a large amount of content that I need to display in a jQuery table. The problem is that while the page is loading, all rows of the table are showing up and making the page extremely long instead of being sho ...

Error: The code is unable to access the '0' property of an undefined variable, but it is functioning properly

I am working with two arrays in my code: bookingHistory: Booking[] = []; currentBookings: any[] = []; Both arrays are populated later in the code. The bookingHistory array consists of instances of Booking, while currentBookings contains arrays of Booking ...