如何避免 JavaScript 中的标签重叠? [英] How to avoid labels overlapping in JavaScript?

问题描述

我已将图像纹理化为 3D 球体(如下所示)，并且我还添加了重叠的平面几何(标签).如何使用three.js库分隔标签?2

labelBox.prototype.update = function(){相机.updateMatrixWorld();this.position.project(相机);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() 方法返回//元素的大小(这里是框)及其相对于视口的位置//更新框叠加位置this.box.style.left = this.posx + 'px';this.box.style.top = this.posy + 'px';this.occludeLabel(this.box, this.marker);};labelBox.prototype.LabelUpdateFn = function(){//变量标签=

document.getElementById('MovingLabel1');//.getElementsByClassName('spritelabel');//labels = $(root).find(".spritelabel");

 for(var k=0; k

解决方案

如果您在 3D 中说避免标签重叠"，则您想要检查视口的裁剪".例如:参见这篇文章

I have textured an image to sphere which is in 3D (shown below) and I have also added planegeometry (labels) which are overlapping. How can I separate the labels using three.js library? 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);             
        }                       
}

解决方案

If you say "Avoid label overlapping" in 3D you want to checkout "Clipping" for a viewport. As an example: See this article

这篇关于如何避免 JavaScript 中的标签重叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！