如何防止JavaScript中的標籤重疊

Question

我正在嘗試在球體上添加標籤，但我無法做到這一點，只有一個標籤附加到球體上，其餘標籤重疊到屏幕的角落。我也上傳了圖片，你可以看到 的問題。也許它的CSS問題，但我不知道確切。而且我還添加了完整的代碼。請幫助 我遇到問題。

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); 
      } 

      //var Ncardinal = {"name": "North", "lat":0, "lon": 10}; 
      //sprite = new labelBox(Ncardinal, radius, document.body); 


     } 
    function animate() { 

    sprite.update(); 
    requestAnimationFrame(animate); 
    controls.update(); 
    renderer.render(scene, camera); 
      } 
init(); 
animate(); 
} 

Answer 1

看看事情是如何建立

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); 
} 

現在啓動時它的設置精靈將成爲數組中的最後一項。那是「West」標籤框。

在動畫中，你只需要調用上一個精靈集的更新。你可以通過將精靈存儲在一個數組中來解決這個問題。

var spriteboxes = []; 

它們保存在spriteloop

 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); 
      spriteboxes.push(sprite); 
     } 

，改變動畫的方法

function animate() { 
    spriteboxes.forEach(function(e) { e.update()}); 
    sprite.update(); 
    requestAnimationFrame(animate); 
    controls.update(); 
    renderer.render(scene, camera); 
}