Finding the mouse position in three.js along the z-axis

My current project involves creating a plane at z = 0 with infinite x and y dimensions.

The next step is to generate a ray from the mouse position and determine where it intersects.

I am uncertain about the process of constructing this plane and whether it is the most optimal approach.

It's important to note that this scenario takes place in a 2D scene with everything lying on the z = 0 plane.

        var projector = new THREE.Projector();
        var  mouse_vector = new THREE.Vector3();
        var mouse = { x: 0, y: 0, z: 1 };
        ray = new THREE.Raycaster( new THREE.Vector3(0,0,0), new THREE.Vector3(0,0,0) ),
        var intersects = [];
        event_info.preventDefault(); 
        mouse.x = ( event_info.clientX / window.innerWidth ) * 2 – 1;
        mouse.y = – ( event_info.clientY / window.innerHeight ) * 2 + 1;
        mouse_vector.set( mouse.x, mouse.y, mouse.z );
        projector.unprojectVector( mouse_vector, camera );
        var direction = mouse_vector.sub( camera.position ).normalize();
        ray = ray.set( camera.position, direction );



        var plane = new THREE.Plane();
        plane.set(v1, v2, v3);
        var where = ray.intersectPlane (plane);

        intersects = ray.intersectPlane( Plane );

            alert(intersects);

        }

Answer №1

        function determineCoordinates(mouseX, mouseY){
            var projector = new THREE.Projector();
                    var planeZ = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
                    var mv = new THREE.Vector3(
                        (mouseX / window.innerWidth) * 2 - 1,
                        -(mouseY / window.innerHeight) * 2 + 1,
                        0.5 );
                    var raycaster = projector.pickingRay(mv, camera);
                    var position = raycaster.ray.intersectPlane(planeZ);

                    return position;
        }

this code functions flawlessly.

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

Applying the SELECTED attribute to a jQuery HTML dropdown menu filled with options from a PHP array

I am currently iterating through an array of items and displaying these options using JQuery in an HTML SELECT element. My goal is to compare the current item in the array with a previously selected variable and then set the <option> attribute to se ...

Positioning Div at the Bottom of a Interactive Flip Card Using Bootstrap 4

My current project features a creative flip image card created using bootstrap and js. On the back of the card, there is a title, a main text body, and a few small additional pieces of information. My goal is to have these three small bits of information a ...

Click on the <input> component to access the listening feature

I am currently working with Angular 4.2.2 using the ES6 style. I'm facing an issue where I need my code to trigger a function when the user presses the ENTER key while an input field is in focus. Here is a snippet of my HTML: <div class="box" id= ...

Utilizing Knockout to Load JSON Data in DevExtreme

As a newcomer to both javascript and devextreme, I am currently navigating my way through. I successfully created a webpage that loads a json file, but I'm facing challenges implementing it using devextreme. I have a dxDataGrid where I intend to disp ...

Tips for adjusting dimensions dynamically through leveling

I encountered some issues while working with input fields. Whenever I type text in one input field, the text seems to appear in another field as well. The width and height of the second text field do not adjust dynamically like in the provided image on the ...

Updating or swapping images using JavaScript and HTML

I am looking to implement a feature similar to Twitter, where uploading a picture automatically updates the avatar by displaying a spinner while the new image loads. I attempted to accomplish this with the following code: <script language="javascript"& ...

Breaking down functions into modules across files in Node.js

I'm struggling to grasp the concept of organizing functions in Node.js. My goal is to create a folder at ./models/user to store a function that represents a user model, and then use these functions elsewhere. However, I keep encountering an issue wher ...

What is the best method for retrieving information from MongoDB and presenting it in a table with Node.js?

I'm struggling to understand how to retrieve data from mongodb and display it in an html/ejs file. I have a button in the html/ejs file that, when clicked, should show all the data from a mongodb database collection. While I've come across simil ...

When the back button on the browser is clicked, ensure that the customer is returned to the same position

What is my goal? I am looking to store the user's current position on the page so that when they navigate to another page and use the browser's "Back" button, they are taken back to that position. This behavior should only be triggered when the u ...

Is it possible to execute JavaScript in VSCode without the need for Node.js?

Is there a way to run JavaScript in VSCode using a school-issued laptop that does not allow the download of Node.js? I have searched for alternatives, but most tutorials recommend downloading Node.js. ...

Retrieve Latitude and Longitude by clicking using JavaScript

When I click on the map, I want to retrieve the latitude and longitude coordinates and display them in an alert. Here is the code I have: <!DOCTYPE html> <html> <body> <div id="googleMap" style="width:100%;height:400px;"></div&g ...

Construct a table from JSON data

I am having trouble generating a table from JSON data. It seems like there may be an issue with my link, but there could be something else going on as well. I am not seeing any data displayed in my table and the error message I am getting is: Cannot read ...

Error 400: Token Obtain Pair request failed in Django REST with simpleJWT and Vue 3 composition API

I'm encountering an issue with obtaining the refresh and access tokens when sending a form from my Vue app to the Django REST API. CORS has been enabled, and signing up through the REST API page or using Postman doesn't pose any problems. However ...

Rails assets folder is not directed to the specified directory in the layout file

I have a dilemma in the application layout where I'm referencing assets (js, css, and img) in the public/assets/... directory. For example: <link href='assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-pre ...

Trigger ng-change in AngularJS when modifying a data model

I designed a form that has the following structure: <div class="col-xs-12 col-lg-4"> <form name="deliveryForm" ng-class="{ 'has-error': deliveryForm.$invalid && !deliveryForm.contact.$pristine }"> <div class="f ...

Determining the occurrence of a specific value within an array using JavaScript

Can you help refine my function? I've created one that counts the number of 7s in an array, but it only counts each element once even if it has multiple 7s. How can I modify it to calculate the total number of 7s in the array without missing any? Plea ...

Methods for retrieving a file within a nodejs project from another file

Currently, my project has the following structure and I am facing an issue while trying to access db.js from CategoryController.js. https://i.sstatic.net/8Yhaw.png The code snippet I have used is as follows: var db = require('./../routes/db'); ...

Adding an object to an array using the Array.push() method deposits an array

Currently, I am extracting the days of absence of my colleague from excel files and storing them in a MongoDB database using Mongoose and Express.js. The process of reading the data is smooth; however, when trying to update the data in the database, an un ...

Importing a JSON file into a JavaScript script

let jsonData ; $.getJSON("../data.json",function(response){ jsonData = response; }); Despite using $.getJSON() from jQuery, I am consistently getting null data in return. The JSON file path is confirmed to be accurate, but the issue persists. ...