Using latitude and longitude coordinates to calculate the xyz position on earth in a three-dimensional environment (three

Question

Using latitude and longitude coordinates to calculate the xyz position on earth in a three-dimensional environment (three

Exploring the wonders of three.js

I am currently working on rendering objects at specific geocoordinates on a large sphere. I am close to finding a solution, but I am struggling to determine the correct xyz position from latitude and longitude.

I have created a test case on jsfiddle with two coordinates

latlons = [[40.7142700,-74.0059700], [52.5243700,13.4105300]];

representing New York and Berlin.

Below is the function I am using to calculate xyz from latitude, longitude, and radius

function calcPosFromLatLonRad(lat,lon,radius){

// Attempt1
var cosLat = Math.cos(lat * Math.PI / 180.0);
var sinLat = Math.sin(lat * Math.PI / 180.0);
var cosLon = Math.cos(lon * Math.PI / 180.0);
var sinLon = Math.sin(lon * Math.PI / 180.0);
var rad = radius;
y = rad * cosLat * sinLon;
x = rad * cosLat * cosLon;
z = rad * sinLat;

// Other attempts...

   console.log([x,y,z]);
   return [x,y,z];
}

However, none of my attempts yield the correct xy positions (z is always accurate).

Could someone please assist me in finding the right approach? I am unsure where I am going wrong.

Here is the fiddle for experimentation

UPDATE: functional jsfiddle

javascript geolocation three.js

Answer 1

Answer №1

Unfortunately, I cannot provide further explanation, but after experimenting with it, this solution works perfectly :)

function calculatePositionFromLatitudeLongitudeRadius(lat, lon, radius){
  
    var phi   = (90-lat)*(Math.PI/180);
    var theta = (lon+180)*(Math.PI/180);

    x = -(radius * Math.sin(phi)*Math.cos(theta));
    z = (radius * Math.sin(phi)*Math.sin(theta));
    y = (radius * Math.cos(phi));
  
    return [x,y,z];

}

Yeah, that's pretty cool, isn't it? And I'm still interested in finding a shorter equation.

Check out the working fiddle!

Answer 2

Unfortunately, I cannot provide further explanation, but after experimenting with it, this solution works perfectly :)

function calculatePositionFromLatitudeLongitudeRadius(lat, lon, radius){
  
    var phi   = (90-lat)*(Math.PI/180);
    var theta = (lon+180)*(Math.PI/180);

    x = -(radius * Math.sin(phi)*Math.cos(theta));
    z = (radius * Math.sin(phi)*Math.sin(theta));
    y = (radius * Math.cos(phi));
  
    return [x,y,z];

}

Yeah, that's pretty cool, isn't it? And I'm still interested in finding a shorter equation.

Check out the working fiddle!

Answer 3

Answer №2

Here's a function that has been really helpful for me:

function calculatePositionFromLatLon(radius, latitude, longitude) {

  var sphericalCoordinates = new THREE.Spherical(
    radius,
    THREE.Math.degToRad(90 - longitude),
    THREE.Math.degToRad(latitude)
  );

  var vector = new THREE.Vector3();
  vector.setFromSpherical(sphericalCoordinates);

  console.log(vector.x, vector.y, vector.z);
  return vector;
}

calculatePositionFromLatLon(0.5, -74.00597, 40.71427);

Answer 4

Here's a function that has been really helpful for me:

function calculatePositionFromLatLon(radius, latitude, longitude) {

  var sphericalCoordinates = new THREE.Spherical(
    radius,
    THREE.Math.degToRad(90 - longitude),
    THREE.Math.degToRad(latitude)
  );

  var vector = new THREE.Vector3();
  vector.setFromSpherical(sphericalCoordinates);

  console.log(vector.x, vector.y, vector.z);
  return vector;
}

calculatePositionFromLatLon(0.5, -74.00597, 40.71427);

Answer 5

Answer №3

Although this thread is quite old, I wanted to share an updated demo that was inspired by your previous one, now running on the latest version of three.js:

Check out the updated demo here!

Answer 6

Although this thread is quite old, I wanted to share an updated demo that was inspired by your previous one, now running on the latest version of three.js:

Check out the updated demo here!

Using latitude and longitude coordinates to calculate the xyz position on earth in a three-dimensional environment (three

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to implement a loading cursor when the Submit button is clicked?

nodejs promises and their implementation in loops

Displaying complex JSON data in an HTML format using JavaScript

Raising the css value for each element that is impacted

What is the best way to update image CSS following a rotation using JavaScript?

Adjusting images of various sizes within a single row to fit accordingly

How to activate a single element within a React array

Is there a way to efficiently update specific child components when receiving data from websockets, without having to update each child individually?

How can we show a div element when hovering over another element using css-in-js?

unable to access various attributes in an angular directive

Utilize dynamic global variables in React that are provided during runtime, making them unpredictable during the build process

Choose a phrase that commences with the term "javascript"

Callback function not being triggered in Jquery's getJson method

Error Arises When React Components Are Nested within Objects

Flipping a combination of CSS 3 and JavaScript cards will cause them to flip all together in unison

Whenever I attempt to generate a forecast utilizing a tensorflow.js model, I encounter the following error message: "Uncaught TypeError: Cannot read property 'length' of undefined."

Issue: ngModel: Unassignable Value

Quickly redesigning the appearance of file input using javascript and jquery. Seeking assistance to correct css issues on jsfiddle

Rebalancing Rotation with Three.js

.load() not triggering for images that are not in the cache - jquery