I've mapped a textured image onto a sphere and added labels to it, but some of the labels are overlapping. I'm looking for ways to separate them without altering the "lon" and "lat" values. Could someone please advise me on how to achieve this or suggest methods for repositioning the labels? Additionally, I have provided a link to the uploaded image and the complete code. Any help with this issue would be greatly appreciated.
The CSS code used in this program:
div.spritelabel {
position:absolute;
top:0px;
left:0px;
color:#0000FF;
font-family: 'Trebuchet MS', sans-serif;
font-size:15px;
font-weight:normal;
line-height:15px;
text-align: left;
padding:5px;
-webkit-box-shadow: 0px 4px 8px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 8px -3px rgba(0,0,0,0.75);
box-shadow: 0px 4px 8px -5px rgba(0,0,0,0.75);
background:rgba( 255, 255, 255, 0.8 );
}
a:link {color: brown; background-color: transparent; text-decoration: none;}
a:visited{color: green; background-color: transparent; text-decoration: none;}
a:hover{color: red; background-color: transparent; text-decoration: underline;}
a:active {color: yellow; background-color: transparent; text-decoration: underline;}
Javascript code:
function createsphere()
{
var spriteboxes = [];
var sprite,controls,scene,camera,renderer;
var spritearray = [];
spritearray[0] = {"name": "North", "lat":0, "lon": 10};
spritearray[1] = {"name": "south", "lat":0, "lon": 20};
spritearray[2] = {"name": "East", "lat":0, "lon": 30};
spritearray[3] = {"name": "west", "lat":0, "lon": 40};
spritearray[4] = {"name": "North-west", "lat":0, "lon": 45};
spritearray[5] = {"name": "North-east", "lat":0, "lon": 47};
spritearray[6] = {"name": "south-east", "lat":0, "lon": 50};
// Function to convert lat lon to Vector3
function convertlatlonToVec3(lat, lon)
{
lat = lat * Math.PI / 180.0;
lon = -lon * Math.PI /180.0;
return new THREE.Vector3(
Math.cos(lat)* Math.sin(lon),
Math.sin(lat)* Math.sin(lon),
Math.cos(lat));
}
// Constructor function for labelBox
function labelBox(Ncardinal, radius, domElement)
{
this.screenVector = new THREE.Vector3(0, 0, 0);
this.position = convertlatlonToVec3(Ncardinal.lat,Ncardinal.lon).multiplyScalar(radius);
this.box = document.createElement('div');
a = document.createElement('a');
a.innerHTML = Ncardinal.name;
a.href ='http://www.google.de';
this.box.className = "spritelabel";
this.box.appendChild(a);
this.domElement = domElement;
this.domElement.appendChild(this.box);
}
labelBox.prototype.update = function()
{
this.screenVector.copy(this.position);
this.screenVector.project(camera);
var posx = Math.round((this.screenVector.x + 1)* this.domElement.offsetWidth/2);
var posy = Math.round((1 - this.screenVector.y)* this.domElement.offsetHeight/2);
var boundingRect = this.box.getBoundingClientRect();
// Update the box overlays position
this.box.style.left = (posx - boundingRect.width) + 'px';
this.box.style.top = posy + 'px';
};
// Initialization function
function init()
{
// starting scene setup
}
// Animation function
function animate() {
// Update each label box
spriteboxes.forEach(function(e) { e.update()} );
sprite.update();
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
init();
animate();
}