How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]

by

I guess, you want the point you are looking at your sphere (probably with earth texture) to be shown on google maps google which requires latitude and longitude. Using 2D screen coordinates seems a weird method to me.

Your camera is probably around the sphere which is at the center of the coordinate system. I would transform the camera position to polar/spherical coordinates, which are to angles (radius doesn’t matter). Then you almost got the lat and long.

polar coordinates

Conversion from your camera position (x,y,z): (Conversion between Spherical and Cartesian Coordinates Systems)

phi angle

theta angle

You need to swap y and z in the formulas and the graphic, because in three.js y is up (and maybe you need to invert z).

Now, you need to tranform phi (ranging from 0 to 2*PI) and theta (0 to PI) to longitude (-180° to 180°) and latitude (-90° to 90°), which should rather easy.

Your greenwich meridian on your sphere should face to the positive x-axis.

(Please correct me, if I’m wrong.)

More Related Contents:

  1. OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down?
  2. How to simulate a click by using x,y coordinates in JavaScript?
  3. Google Maps API v3: How to remove all markers?
  4. How do I limit panning in Google maps API V3?
  5. Google maps Places API V3 autocomplete – select first option on enter
  6. How to call fromLatLngToDivPixel in Google Maps API V3?
  7. Google Maps JavaScript API RefererNotAllowedMapError
  8. Google Maps API – Getting closest points to zipcode
  9. Async Google Maps API v3 undefined is not a function [closed]
  10. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  11. Three.js – Geometry on top of another
  12. Three.js/WebGL: Large spheres appear broken at intersection
  13. Google Maps JavaScript API won’t display markers from KML exported from My Maps
  14. Google Maps API v3 adding an InfoWindow to each marker
  15. Three.js cube with different texture on each face
  16. Three.js and loading a cross-domain image
  17. CORS and Google Maps Places Autocomplete API calls [duplicate]
  18. How to save canvas animation as gif or webm?
  19. Google Maps Api v3 – getBounds is undefined
  20. Can I remove just the popup bubbles of POI’s in Google Maps API v3?
  21. How to create a custom mesh on THREE.JS?
  22. Google Maps API v3 Highlight Country Border without using Polygons
  23. How can I modify the markers?
  24. How to trigger the onclick event of a marker on a Google Maps V3?
  25. Add CSS styled marker to google maps
  26. Google map multiple overlay no cumulative opacity
  27. Google Directions Api returning 0 routes
  28. Change map opacity outside circle of Google Maps JavaScript API v3
  29. Why do shaders have to be in html file for webgl program?
  30. Apply color gradient to material on mesh – three.js

Leave a Comment