I am having some trouble adding labels to a sphere. Only one label is attaching correctly, while the rest are overlapping in the corner of the screen. I have attached an image to show the issue. It may be a CSS problem, but I'm not entirely sure. Below is the full code. Any help with this problem would be greatly appreciated.
div.spritelabel {
position:absolute;
top:0px;
left:0px;
color:#0000FF;
font-family: 'Trebuchet MS', sans-serif;
font-size:22px;
font-weight:bold;
line-height:20px;
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;}
window.onload = createsphere();
function createsphere()
{
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};
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));
}
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';
};
function init()
{
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.y = 1;
camera.position.z = 5;
var width = window.innerWidth;
var height = window.innerHeight;
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
var radius = 2.5;
var spheregeometry = new THREE.SphereGeometry(radius, 20, 20, 0, -6.283, 1, 1);
var texture = THREE.ImageUtils.loadTexture ('newimage/crate.jpg');
texture.minFilter = THREE.NearestFilter;
var spherematerial = new THREE.MeshBasicMaterial({map: texture});
var sphere = new THREE.Mesh(spheregeometry, spherematerial);
scene.add(sphere);
scene.add(camera);
scene.autoUpdate = true;
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minPolarAngle = Math.PI/4;
controls.maxPolarAngle = 3*Math.PI/4;
for(var i = 0; i < spritearray.length; i++)
{
var Ncardinal = spritearray[i];
sprite = new labelBox(Ncardinal, radius, document.body);
var marker = new THREE.Mesh(new THREE.SphereGeometry(0.05, 30, 30));
marker.position.copy(sprite.position);
scene.add(marker);
}
}
function animate() {
sprite.update();
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
init();
animate();
}