What is the process for obtaining the latitude and longitude coordinates of the central point on the screen in a WebGL Globe?

Question

What is the process for obtaining the latitude and longitude coordinates of the central point on the screen in a WebGL Globe?

Google's WebGL Globe allows for marking specific latitudes and longitudes. However, the challenge lies in determining the latitude and longitude values of the point that is currently at the front or center of the screen. This can potentially be accomplished by utilizing the camera position or rotation values.

A possible solution to find a position on the globe based on latitude and longitude values is shown below:

var phi = (90 - lat) * Math.PI / 180;
var theta = (180 - lng) * Math.PI / 180;
point.position.x = 200 * Math.sin(phi) * Math.cos(theta);
point.position.y = 200 * Math.cos(phi);
point.position.z = 200 * Math.sin(phi) * Math.sin(theta);

javascript three.js webgl-globe

Answer 1

Answer №1

After examining the situation, it appears that there is no straightforward method to obtain it. Two potential solutions come to mind:

You could adjust globe.js to expose the rotation object: by appending the following code snippet to the end of globe.js, immediately after this.scene = scene;:
```
this.rotation = rotation;
```
Alternatively, if you would rather not make changes to globe.js, you can access the scene property, locate the camera within it, and utilize its position to determine the latitude and longitude. There may be a simpler approach utilizing the scene directly, though I am uncertain.

It's worth noting that globe relies on three.js, so keep this in mind when conducting your searches.

Answer 2

After examining the situation, it appears that there is no straightforward method to obtain it. Two potential solutions come to mind:

You could adjust globe.js to expose the rotation object: by appending the following code snippet to the end of globe.js, immediately after this.scene = scene;:
```
this.rotation = rotation;
```
Alternatively, if you would rather not make changes to globe.js, you can access the scene property, locate the camera within it, and utilize its position to determine the latitude and longitude. There may be a simpler approach utilizing the scene directly, though I am uncertain.

It's worth noting that globe relies on three.js, so keep this in mind when conducting your searches.

Answer 3

Answer №2

To achieve the desired result, another method involves utilizing THREE.Spherical():

phi.innerHTML = "0";
theta.innerHTML = "0";

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var sphere = new THREE.Mesh(new THREE.SphereGeometry(2.5, 16, 12), new THREE.MeshBasicMaterial({color: "maroon", wireframe: true}));
scene.add(sphere);

renderer.domElement.addEventListener("mousedown", onMouseDown, false);

var center = new THREE.Vector2(); // default is [0.0], the center of the screen
var raycaster = new THREE.Raycaster();
var point = new THREE.Vector3();
var spherical = new THREE.Spherical();
var intersect;

function onMouseDown(event) {
  raycaster.setFromCamera(center, camera);
  intersect = raycaster.intersectObject(sphere);
  if (intersect.length === 0) return;
  
  sphere.worldToLocal(point.copy(intersect[0].point));
  spherical.setFromVector3(point);
  phi.innerHTML = THREE. Math.radToDeg(Math.PI * .5 - spherical.phi);
  theta.innerHTML = THREE.Math.radToDeg(spherical.theta);
  
  let marker = new THREE.Mesh(new THREE.BoxGeometry(.125, .125, .125), new THREE.MeshBasicMaterial({
    color: Math.random() * 0xffffff,
    wireframe: true
  }));
  marker.position.copy(intersect[0].point);
  scene.add(marker);

}


render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}
#data{
  font-family: Monotype;
  color: white;
  position: absolute;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="data">
phi: <span id="phi"></span>&deg;<br>
theta: <span id="theta"></span>&deg;
</div>

Answer 4

To achieve the desired result, another method involves utilizing THREE.Spherical():

phi.innerHTML = "0";
theta.innerHTML = "0";

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var sphere = new THREE.Mesh(new THREE.SphereGeometry(2.5, 16, 12), new THREE.MeshBasicMaterial({color: "maroon", wireframe: true}));
scene.add(sphere);

renderer.domElement.addEventListener("mousedown", onMouseDown, false);

var center = new THREE.Vector2(); // default is [0.0], the center of the screen
var raycaster = new THREE.Raycaster();
var point = new THREE.Vector3();
var spherical = new THREE.Spherical();
var intersect;

function onMouseDown(event) {
  raycaster.setFromCamera(center, camera);
  intersect = raycaster.intersectObject(sphere);
  if (intersect.length === 0) return;
  
  sphere.worldToLocal(point.copy(intersect[0].point));
  spherical.setFromVector3(point);
  phi.innerHTML = THREE. Math.radToDeg(Math.PI * .5 - spherical.phi);
  theta.innerHTML = THREE.Math.radToDeg(spherical.theta);
  
  let marker = new THREE.Mesh(new THREE.BoxGeometry(.125, .125, .125), new THREE.MeshBasicMaterial({
    color: Math.random() * 0xffffff,
    wireframe: true
  }));
  marker.position.copy(intersect[0].point);
  scene.add(marker);

}


render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}
#data{
  font-family: Monotype;
  color: white;
  position: absolute;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="data">
phi: <span id="phi"></span>&deg;<br>
theta: <span id="theta"></span>&deg;
</div>

What is the process for obtaining the latitude and longitude coordinates of the central point on the screen in a WebGL Globe?

Answer №1

Answer №2

Similar questions

Why is React JS unable to discover my exported modules?

Can React Native be utilized for a plugin-based architecture?

The absence of jasmine-node assertions in promises goes unnoticed

If the condition is met with the presence of X in the string, execute one action; otherwise, proceed with

What is the best way to calculate checksum and convert it to a 64-bit value using Javascript for handling extremely large files to avoid RAM overflow?

Problem with Ember Fixtures data loading

HTML/Javascript/CSS Templates: Keeping Tabs on Progress

Switch Parent Element's Class

Tips for refreshing the current page with passing a parameter in the URL?

Retrieve the Windows Operating System Language Configuration Data

What is the process for replacing " with ' in my text?

Creating a personalized button in DraftJs for inserting customized HTML with CSS styles

Magnific Popup is causing a glitch in my Ajax cart slider, preventing my code from functioning properly

Using React to Identify the Chosen Option on a Custom Toggle Button

I'm experiencing some issues with AwaitingReactions in Discord.js, it's not working properly on

Explaining the implementation of JQuery's onload event and its impact on reducing dependencies

Tips for assigning unique non-changing keys to siblings in React components

Creating a dynamic background color that pulses with animation

Validating data with Joi can result in multiple error messages being displayed for a single field

The JavaScript exec() RegExp method retrieves a single item