Question

我有一个纹理图像到一个球体和附加标签到图像，但有些标签是重叠的，我想要分开标签，而不改变＆＃34; lon＆＃34;和＆＃34; lat＆＃34;。我需要知道如何分隔标签或如何重新定位标签。我也上传了图片（链接）。我也上传了完整的代码。请帮我解决这个问题。

image link

此程序中使用的css代码

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代码

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 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 ('Sample Images/rbi00000083.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);
                //this.marker = new THREE.Mesh(new THREE.SphereGeometry(0.05, 30, 30));
                //this.marker.position.copy(sprite.position);
                //scene.add(marker);
                spriteboxes.push(sprite);
            }

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


        }
    function animate() {

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

Answer 1

由于你的标签实际上不是3d对象，这个问题与3d无关。你需要做的就是这个（这是一个天真的算法。当然可以针对更多的标签进行优化等）：

1。）找出每个标签的确切标签尺寸，将它们存储在某处（使用element.offsetWidth/Height）
2。）计算＆＃34;锚位置＆＃34;每个标签，即屏幕位置
3。）使用以下算法放置所有标签：
- a）计算该标签占据的区域，如果放置在它的锚位置（就Box而言，即上/左，下/右 - 您可以使用THREE.Box2 -class来存储该信息）
- b）测试已放置在屏幕上的所有方框的交叉点（即box.intersectsBox(otherBox)）。
- c）如果没有交叉点，我们有一个此框的展示位置，可以继续下一个框
- d）如果有一个交叉点，找到一个可以放置标签的地方，我只需再次尝试上/下/左/右一些像素，这取决于标签的相对位置并再次测试，如果找不到经过多次尝试后可以使用的展示位置，请确保中止（并且只是跳过标签）。

并不总是能够为每个标签找到一个位置，因此在开始插入之前优先订购它们是有意义的。

使用JavaScript防止标签重叠

1 个答案: