Guide to mapping points on a ThreeJS sphere in three dimensions

I've recently begun exploring the world of ThreeJS and I've encountered a challenge. I'm attempting to plot a point on a sphere, but it seems to be appearing in the southern hemisphere instead of the northern hemisphere. Vertically, it appears to be in the correct position at the bottom of the sphere rather than the top. I found some code in this answer:

In the image provided, the yellow line with the red box represents my plotted point. It should actually be located in the upstate NY region instead of where it is currently.

Furthermore, here is the code snippet I am using:

function xyz(lat, lon){
    var cosLat = Math.cos(lat*Math.PI/180.00);
    var sinLat = Math.sin(lat*Math.PI/180.00);
    var cosLon = Math.cos(lon*Math.PI/180.00);
    var sinLon = Math.sin(lon*Math.PI/180.00);
    var r = sphere.geometry.radius; //50

    var coords = {};
    coords.x = r * cosLat * cosLon;
    coords.y = r * cosLat * sinLon;
    coords.z = r * sinLat;

    console.log(coords);

    return coords;
}

// Lat/Lon from GoogleMaps
var coords = xyz(42.654162, -73.699830);
// returns {x: 10.321018160637124, y: -35.29474079777381, z: 33.878575178802286} 

I suspect that the problem may be related to using 2D coordinates on a 3D sphere, but I'm unsure of how to correct this issue.

Answer №1

Here's a handy function to calculate position from latitude and longitude values for easy mapping.

function determineCoordinates(latitude, longitude){
let lat = (90 - latitude) * (Math.PI/180);

let lon = (longitude + 180) * (Math.PI/180);

const x = -(Math.sin(lat) * Math.cos(lon))
const z = Math.sin(lat) * Math.sin(lon)
const y = Math.cos(lat)
}
determineCoordinates(//enter coordinates here//)

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

Stop the browser url from changing in VueJs when the location is updated

My Vue.js application involves making REST API calls to the backend, with defined routers and components for navigation. However, as I navigate through the application, I am encountering a situation where the URL in the browser displays the specific route ...

The error message "MongoDB encountered an issue with accessing the property 'push', as it was undefined."

Exploring node.js, express and MongoDB is a learning journey for me. While working on data association in MongoDB models, I encountered a runtime error. Even though the reference has been added to the model, the push() method fails to recognize it. Here ar ...

Mix seamlessly between various camera angles and scenes

This question dates back to an earlier time: "how can I create a cross fade effect between different cameras or scenes in three.js?" It comes with a jsFiddle link jsfiddle.net/DW9q4/43/ which unfortunately no longer seems to be functional, showing only a b ...

Tips for submitting an e-mail through an HTML form with the help of Node.js and Gulp

Today, I've been tackling the challenge of creating an HTML contact form that can send an email using Node.js and Gulp. However, I'm struggling to find a solution. Using a relative path to a simple .PHP file doesn't seem to be working, so it ...

Update the style class of an <img> element using AJAX

My success with AJAX enables PHP execution upon image click. However, I seek a real-time visual representation without page reload. Thus, I aim to alter <img> tag classes on click. Presently, my image tag resembles something like <img title="< ...

React: Why aren't class methods always running as expected?

I created a class component that retrieves a list of applications from an external API. It then sends a separate request for each application to check its status. The fetching of the applications works well, but there is an issue with the pinging process ...

Enhancing FileUpload functionality in ASP.NET with jQuery function prior to postback

My webpage is built with .aspx and contains the following code: .. <form id="frm" runat="server"> <asp:FileUpload runat="server" id="fileupload" onchange="browsed()" /> <asp:Button runat="server" OnClick="Upload_Click" id="uploadb ...

jQuery can be used to relocate buttons on a webpage

When the Contact button is clicked, how can I move the Close button below #panel? It's currently fixed in position. Here's my demonstration: https://jsfiddle.net/25u78gff/ https://i.sstatic.net/qDad9.png jQuery('.sub-menu').addClass( ...

Is there a way to seamlessly update a field without refreshing the page or overloading the server?

I'm intrigued by the concept of updating a field dynamically without refreshing the page or overwhelming the server with queries. Stackoverflow demonstrates this feature when someone answers our question, and it instantly shows at the top of the page. ...

Divergence in results: discrepancy found in the outputs of nodejs crypto module and tweetnacl.js

Consider this code snippet in nodejs: import crypto from 'crypto'; const pkey = `-----BEGIN PRIVATE KEY----- MC4CAQAwBQYDK2VwBCIEIJC52rh4PVHgA/4p20mFhiaQ/iKtmr/XJWMtqAmdTaFw -----END PRIVATE KEY-----`; // placeholder key function sign_message(m ...

Establishing a connection to a JSON API to retrieve and process

I am trying to extract all instances of names from this page: . For guidance, I have been using this tutorial as a reference: . However, when I run the code provided, it doesn't return anything. What could be going wrong? var request = new XMLHttpRe ...

Creating Knockout Markup within MVC 3

We're in the process of developing a new infrastructure for our MVC client to minimize the need for extensive Javascript coding, especially since most of our developers are primarily working on desktop applications. One approach I've taken for o ...

Looking for a way to implement jQuery tabs with restrictions that only allow one tab to be active at a time while using an

In my database table, there are 4 different statuses stored in the status column - 1, 2, 3, and 4. I am looking to implement jQuery tabs or Javascript tabs with tab names as Tab A, Tab B, Tab C, and Tab D. Depending on the status retrieved from the contro ...

Tips for accessing and passing the clicked element as "THIS" within an addEventListener

Currently in the process of developing a custom JS library similar to jQuery, I've encountered a stumbling block. I have successfully created an event delegation function intended for a simple click event. While working within this prototype section ...

What are some ways to display multiple divs within a single popup window?

I am attempting to create the following layout: https://i.sstatic.net/OzE98.png Here is what I have been able to achieve: https://i.sstatic.net/7GxdP.png In the second picture, the divs are shown separately. My goal is to display the incoming data in a ...

The React Js error message shows an 'Uncaught (in promise)' TypeError that prevents reading an undefined property

Struggling with passing the response from an Ajax request to another function in React. Although I am able to receive the response, I cannot pass it to { this.showBattersData(data); } where I need to render the DOM. It's clear that something is missin ...

React is displaying [object Object] instead of the intended value on the webpage. What steps can be taken to resolve this issue?

I have attempted to retrieve data from an API and am currently working on displaying this data within a table cell inside a component. Instead of rendering the original data, React is displaying [object Object]. I tried using the join() method with commas ...

Bringing in SCSS using Typescript, React, and Webpack

I am trying to utilize .scss classes by importing them and applying them to the className property of a React component. Here is the structure of my project : root/ ... config/ ... webpack.config.js src/ ... global.d.ts app/ ...

Learn how to utilize ng2-file-upload in Angular for uploading .ply files effortlessly!

I'm currently working on uploading various files using ng2-file-upload. I've been successful in uploading different file types like png and jpg, but I'm facing an issue with the .ply file extension. Can someone guide me on how to upload a fi ...

Initiate the process of displaying data on a datetime chart using Highcharts

I am currently developing a yearly chart, but I've encountered a small issue. The chart begins in January, however there is no data available until May. The client specifically wants the chart to only display when there is data available, and unfortu ...