Calculating Three.js world coordinates based on mouse position using an orthographic camera

This question may have been asked before and answered, but despite following several suggestions (such as the one found here Mouse / Canvas X, Y to Three.js World X, Y, Z), I am still facing difficulties with my current situation.

I have successfully implemented object selection in my code using the following:

onMouseMove:function(event)
{
    event.preventDefault();

    var scope       =   Game.GSThree,
        $container  =   $(scope.container.element),
        width       =   $container.width(),
        height      =   $container.height(),
        vector,
        ray,
        intersects;

    scope.mouse.x   =   (event.clientX - scope.container.padding.left) / width * 2 - 1;
    scope.mouse.y   =   - (event.clientY / height) * 2 + 1;
    scope.mouse.z   =   0.5;
    vector          =   new THREE.Vector3(scope.mouse.x , scope.mouse.y , scope.mouse.z);
    ray             =   scope.projector.pickingRay(vector.clone() , scope.camera);
    intersects      =   ray.intersectObjects(scope.tiles.children);

    if(intersects.length)
    {
        var hovered = intersects[0].object;
        scope.selectObject(hovered);
    }
}

While the above code works as intended, I also require the precise world coordinates of my current mouse position. I am uncertain if the solutions I have attempted are suitable for the orthographic camera that I am utilizing. When I log either scope.mouse.x or vector.x, I do not obtain the world coordinates. Although ray successfully identifies the objects, I am unsure how to retrieve the current coordinates of the ray in the world.

Answer №1

Based on my understanding, the solution you seek is:

intersects[0].point;

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

Search for elements once they have been dynamically loaded using AJAX with the

I have a function called getItemID which searches for all the IDs under a specific parent ID (#search-output). This function works well when the ID (#test) is already loaded when the page loads. However, I am dynamically generating these IDs (#test) using ...

What is the best way to assign an object variable within an array state?

My current state looks like this: const [tags, setTags] = useState([{id: 1, label: "random"}, {id: 2, label: "important"}]) const [input, setInput] = useState("") const [selectedTag, setSelectedTag] = useState([]) In addition ...

HTML-Formatted Email Content

Similar Question: MailTo with HTML body I am looking to utilize JavaScript to send emails. I came across this helpful post: Sending emails with JavaScript. My goal is to include images, bold text, and color changes in the email content. Does anyone h ...

Utilize a JSON file to generate a network visualization using the vis.js library

I am currently working with vis.js to generate a visualization. In the example code, I am using the file saveAndLoad.html. The save function works well as it allows me to export a json file. However, I am encountering an issue when trying to load the jso ...

looping through a linked data object with ng-repeat

I am working with a Node object in my Angular controller. Each Node contains a next property which points to the next item: $scope.Stack = function () { this.top = null; this.rear = null; this.size = 0; this.max_size = 15; ...

Is it feasible to have unique popups for individual textbox edits?

I am experiencing a problem with a popup in Asp.net while using AJAX modalpopup extender. I am wondering if it is feasible to display one type of popup when the user modifies certain textboxes, and another type of popup for the remaining textboxes. I beli ...

Creating dynamic pagination in React using a variable length loop

I'm currently implementing pagination using react ultimate pagination. When a page number is clicked, I update a variable to display the necessary content. The challenge arises from having a loop with a variable number of elements, making it impossibl ...

Using Selenium to scroll down to an element until its 'style' changes

I'm in the process of scraping a review page similar to this one. While this specific page has only a few reviews, there are others with a larger volume that require extensive scrolling. Upon observation, I noticed that when the page is not complete ...

Encountered a CSS error while trying to compile the project with npm build

When attempting to build the project, I encountered a postcss error. After some debugging, I discovered that the imports below were causing the issue: @import "@material/button/dist/mdc.button.min.css"; /*material text box css*/ @import "@material/float ...

A guide to implementing offline.js or online.js alongside a submit button

I am looking for a way to check network connection only when the user presses the SUBMIT button, without constantly monitoring for internet connectivity. After researching websites and Stack Overflow questions for weeks, I have not found a satisfactory sol ...

Encountering a Node.js issue when attempting to properly sanitize data before inserting it into MySQL

This is a snippet of code that I am using to insert data into a MySQL table. Before running the query, I escape the values like so: const mysql = require('mysql'); const R = require('ramda'); class Repository { constructor(connectio ...

Guide to retrieving and editing images from Appwrite using Vue

Currently, I am utilizing a View frontend to retrieve a PDF file from Appwrite Storage. My goal is to acquire the PDF, insert additional text onto it, and then save it to the user's local device. Below is the code I have so far - although I can recei ...

The additional pieces of information transmitted in the state are not being accurately interpreted

I have constants set up that I want to store in the state: const day = "25/02/2020"; const timeStart = "08:00"; const timeEnd = "00:00"; In my Vuex file, I have the following setup: export default new Vuex.Store ({ s ...

Troubleshooting undefined value issue with pagination in AJAX GET request with Laravel

I am currently working on a GET request using AJAX. In my Laravel Controller, I attempted to use "->paginate(5);" and encountered undefined values. However, when I use "->get();", it works flawlessly. Nevertheless, I prefer to use paginate to impleme ...

Encountering a sudden problem while running gulp build due to a node_module - Surprising occurrence of Unexpected

Encountering an unexpected issue while running a gulp build process for a web app that I am struggling to resolve. The problem did not exist on the evening of 25/01/2019, but when attempting to execute the gulp build process this morning (30/01/2019), an ...

Split the text using the newline character (' ') and not the double newline character (' ')

Looking to create a filter that separates all \n and combines them back as \n\n. Is it possible to only target the single \n without affecting the double \n\n? Currently, the issue arises when the input field loses focus, caus ...

Linking Java objects with Node.js variables

In this snippet of code, I am utilizing the 'java' module in node.js to create Java objects. Specifically, I am creating four Java objects and aiming to consolidate them as a single object by using the variable 'args' to store these Jav ...

What could be causing my node-statsd client script to not terminate?

When attempting to log a metric to a StatsD server using the node-statsd library, I encountered an issue where the script did not exit automatically. The code snippet in question is as follows: var StatsD = require('node-statsd').StatsD; var cli ...

Leveraging jquery's setInterval for automating tasks like a cronjob

I've been experimenting with Cronjobs and I've run into a roadblock. My goal is to have the cronjob execute every X minutes, containing a script with JavaScript that calls an ajax request every second for the next 60 seconds. The ajax call trigge ...

The fadeIn callback doesn't seem to function properly when triggered within the success function of jquery.ajax

Using AJAX, I fetch some data and prepend it to the body. Once displayed, I need to execute some client-side operations on this new element, such as rendering Latex using codecogs' script. Below is a snippet of my code: $.ajax({ /* ... */ success: fu ...