I have a globe created using three.js
Reference:
I am trying to display an HTML div at a specific latitude/longitude on the globe. Can someone guide me on how to position the div at a particular lat/long?
What I've attempted: I'm currently stuck on converting latitude and longitude to screen coordinates.
Here is a snippet of my JavaScript code:
var camera, scene, renderer, controls, root_object = 0, mesh;
var uniform_color = true, uniform_height = true, extrusion_amount = 5.0;
var helper_1, helper_2;
var radius;
init();
animate();
function _convertLatLonToVec3 (lat,lon) {
lat = lat * Math.PI / 180.0;
lon = -lon * Math.PI / 180.0;
return new THREE.Vector3(
Math.cos(lat) * Math.cos(lon), //rechts links invert
Math.sin(lat), // up down invert
Math.cos(lat) * Math.sin(lon));
}
function InfoBox( city, mesh, radius, domElement )
{
var position = _convertLatLonToVec3( city.lat, city.lng ).multiplyScalar( radius );
this.mesh = mesh;
this.mesh.position.copy( position );
this._screenVector = new THREE.Vector3(0,0,0);
this.box = document.createElement( 'div' );
this.box.innerHTML = city.name;
this.box.className = "hudLabel";
this.domElement = domElement;
this.domElement.appendChild( this.box );
}
/* Additional code continues... */
Currently, the issue does not seem to be related to the functioning of globe_manipulator.