如何防止 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);
}

现在在初始化时，它的设置精灵是数组中的最后一项。那就是“西方”标签框。

在 animate 中，您只需在最后一个 sprite 集上调用 update。您可以通过将精灵存储在数组中来解决此问题。

var spriteboxes = [];

将它们保存在精灵循环中

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