如何避免JavaScript中的標籤重疊？

Question

我已經將圖像紋理化爲3D（如下所示）的球體，並且我還添加了重疊的平面幾何（標籤）。如何使用three.js庫分隔標籤？ 2

labelBox.prototype.update = function() 
{ 

camera.updateMatrixWorld(); 
this.position.project(camera); 

var screenvector = new THREE.Vector3(); 
screenvector.copy(this.position); 
oldlabelpos.push(screenvector); 
//this.position.normalize(); 

this.posx = Math.round((this.position.x + 1)* this.domElement.offsetWidth/2 + webglviewport.left); 
this.posy = Math.round((1 - this.position.y)* this.domElement.offsetHeight/2); 

var boundingRect = this.box.getBoundingClientRect(); //getBoundingClientRect() method returns the 
               //size of element (here it is box) and its position relative to viewport 
//update the box overlays position 
this.box.style.left = this.posx + 'px'; 
this.box.style.top = this.posy + 'px'; 

this.occludeLabel(this.box, this.marker); 
}; 

labelBox.prototype.LabelUpdateFn = function() 
{  
    //var labels = 

的document.getElementById（ 'MovingLabel1'）; // getElementsByClassName方法（ 'spritelabel'）; // labels = $（root）.find（「.spritelabel」）;

for(var k=0; k<oldlabelpos.length; k++) 
     { 
      this.reposition = new THREE.Vector3(); 
      this.reposition = convertlatlonToVec3(oldlabelpos[k].x, 
      oldlabelpos[k].y).multiplyScalar(radius); 
      this.reposition.normalize(); 

      camera.updateMatrixWorld(); 
      this.reposition.unproject(camera); 

      this.newposx = Math.round((this.reposition.x + 1)* 
      this.domElement.offsetWidth/2 + webglviewport.left) - this.posx; 
      this.newposy = Math.round((1 - this.reposition.y)* 
      this.domElement.offsetHeight/2) - this.posy; 

      var boundingRect = this.box.getBoundingClientRect(); 

      this.box.style.left = (this.newposx + boundingRect.width) + 'px'; 
      this.box.style.top = this.newposy + 'px'; 

      //$(this.box).css(left) = 

      this.occludeLabel(this.box, this.marker); 
      //var updatedpos = {updateposx, updateposy}; 

      //newlabelpos.push(updatedpos);    
     }      
} 

Answer 1

如果您在3D中說「避免標籤重疊」，您希望爲視口結帳「剪切」。例如：article