Guide on obtaining the camera position using mouse movement event and converting it into screen coordinates in three.js

Is it possible to determine the camera positions using the mouse move event and transform them into screen coordinates? I am attempting to navigate on a sphere object by moving my mouse and want to obtain the new camera position based on the mouse movement in order to update the object's position on Google Maps. While I have come across resources on converting 3D object positions to 2-D, I am uncertain if they are applicable to my scenario.

["I will be sharing my solution for this issue in the comments section below, hoping that it may assist others facing similar challenges. Make sure to check out the two links provided."]

Answer №1

It appears that you are aiming to display a specific point on your sphere (possibly with an earth texture) on Google Maps, which necessitates having the latitude and longitude coordinates. Using 2D screen coordinates for this purpose strikes me as an unconventional approach.

Presumably, your camera is positioned around the sphere at the center of the coordinate system. To obtain the latitude and longitude information, I would recommend converting the camera position to polar or spherical coordinates, focusing on angles rather than radius. By following this method, you can easily derive the desired latitudinal and longitudinal values.

https://i.sstatic.net/7pHUt.jpg

To convert from your camera’s Cartesian coordinates (x, y, z), you can refer to this handy resource: Conversion between Spherical and Cartesian Coordinates Systems

https://i.sstatic.net/uypzI.png

https://i.sstatic.net/PEPle.png

It’s important to note that in the formulas and graphical representations, you should interchange the y and z values if working in three.js, where y represents the upward direction (and potentially requiring z inversion).

Next, you’ll need to translate phi (ranging from 0 to 2*PI) and theta (from 0 to PI) into longitude (-180° to 180°) and latitude (-90° to 90°), a relatively straightforward task.

Your sphere’s prime meridian should align with the positive x-axis.

(Feel free to correct any mistakes in my explanation.)

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

The Access-Control-Allow-Headers in preflight response does not permit the use of the request header field authorization when sending an HTTP GET request from JavaScript to the Slack API

While I acknowledge that there may be similar queries out there, I believe mine has a unique angle. My goal is to send a GET request to the Slack API using an HTTP request. Here is the code snippet I am working with: import useSWR from "swr"; ...

Guide to using VueJS for sending a POST request with a JSON array containing data and uploading a File or Picture for each element in the array

I am currently facing a challenge with Axios where I need to send formData from a dynamic Form to PHP. Users should be able to add multiple "persons" along with their respective data and pictures. Below is the format of the data: data: { person:{ ...

Is it possible to remove certain 'css-' class names that MUI automatically applies to its components? (Using Next JS and MUI)

After successfully migrating my create-react-app project to Next JS using the latest version (12.1.0) and following the migration guide at https://nextjs.org/docs/migrating/from-create-react-app, I encountered an unexpected issue. Despite still using MUI a ...

access pictures from a different directory using JavaScript

I am working with an images array that contains three jpg files. I am trying to set the background image of a class called pic using images from the array. The issue I'm facing is that the images are stored in an images folder with the URL images/. I ...

When converting a .ts file to a .js file using the webpack command, lengthy comments are automatically appended at the end of

As a backend developer, I recently delved into UI technologies and experimented with converting TypeScript files (.ts) to JavaScript files (.js) using the webpack command. While the conversion works well, the generated .js file includes lengthy comments at ...

Displaying Multiple HighCharts on a single AngularJS page

As a beginner with HighCharts, I am working on adding two Highcharts to the same page that will access the same data source but display different pieces of data for each graph. For example, the categories will remain constant while the series[] will vary. ...

Spotify app experiencing issues with Angular's ng-repeat functionality

In my code, I am facing an issue where ng-repeat is not functioning as expected. Here is the content of my App.js file: var app = angular.module('angularjs-starter', ['jsonService', 'ngRoute', 'ngResource']) app. ...

What aspects of MongoDB security am I overlooking?

Is it a secure way to connect to Mongo DB by using Node JS, Mongo DB, and Express? Could someone provide an explanation of this code in terms of security? === Many tutorials often only show... var mongoClient = new MongoClient(new Server('localhos ...

Can the recaptcha icon be customized with a new hue?

I have been attempting to alter the captcha icon/logo in recaptcha v2. Initially, I tried to modify it using regular CSS without success. Then, I experimented with jQuery to determine if the iframe had loaded completely before proceeding with the change. ...

Managing multiple to-do lists within a React application using parent-child relationships

ReactJS has a flaw that I've come across while trying to create a Todo application using Redux for state management. The issue arises when dealing with nested JSON data, such as having parent and child nodes in the response from a database query. Red ...

Dynamically load a vuejs library and display the component within it

I've set up a Vue.js app to act as a container for multiple other "apps". The goal was to: have a reusable codebase for discovering/loading components develop the other apps as Vue.js libraries to allow component loading In my first library, I have ...

Using Jquery to load Intranet HTML files

My current project involves creating a system for users to access a specific application on the work intranet. The setup consists of directing them to a splash index.html page containing links that lead to various network drives, some accessible only to ce ...

Could anyone assist me in resolving the error stating, "The 'Argument `where` of type UserWhereUniqueInput needs at least one of `id` arguments"?

Upon investigating, I inserted this console log to determine what data is being received: { username: 'aa', gender: 'Feminino', cargo: '2', email: 'a', password: 'a' } Lately, I've been facing this err ...

Issue with AJAX not receiving successful response after function invocation

I am trying to dynamically load data based on the specific URI segment present on the page. Below is my JavaScript code: $(document).ready(function() { $(function() { load_custom_topics(); }); $('#topics_form').submit(funct ...

When Buttons Decide to Take a Break: A Guide to What Happens After You Click Them

Looking for some assistance with my code! I have a set of two buttons and when the user clicks on either one, it triggers a function (which is working perfectly). However, if the user clicks again on the same button, I want it to do nothing. Here is my HT ...

"Import data from a text file and store it as an array of objects using Types

I need assistance with converting the information in my text file into an array of objects. Below is a snippet of the data from the text file: DOCNO NETAMOUNT IREF1 IREF2 DOCDT 001 30000 50 100 6/7/2020 2 40000 40 90 6/7/2020 Currently, t ...

Rotate a sphere in three.js in order to align the mapped image of the globe with the GeoJSON data that is displayed in the same three

I have successfully implemented a globe in three.js with an image mapped onto the sphere. Furthermore, I am utilizing the ThreeGeoJSON library to visualize geojson data on top of the globe. However, the geographies from the geojson data do not align corr ...

Javascript variable unable to retrieve value from textbox

Hey there! I am having some trouble reading a textbox that is populated from the server into a JavaScript variable. When I try to access it, I get a console error saying "can't read from NULL". However, the text box is definitely populated with the st ...

Implementing a JavaScript function that directs to the current page

I have set up my index page with a link that looks like this: <li onClick="CreateUser()"> <a href="#CreateUser">CreateUser</a> </li> When the "Create User" list item is clicked, the main page content is populated as follows: fun ...

Error: An anomaly token was encountered while deploying a Laravel/Vue project using the pipeline yml in Yarn Run

I have encountered a challenge while trying to deploy my project to a server using bitbucket-pipeline with a .yml script. The project consists of a Laravel backend with PHP 7.4 and a Vue Js frontend. The issue arises during the frontend build process with ...