在three.js 中解决标注相互覆盖的问题_three.js模型挡住标签

创建标注之后，放缩时难免会出现标注相互遮盖的情况，这样既影响美观也会遮盖住地图信息，这里需要检测标注间的遮盖，显示和不显示一些标注。
这里主要是将标注点3d坐标转成屏幕坐标，再根据sprite中canvas的长度和高度，就可以知道sprite在屏幕的矩形范围。接下来就是计算各个标注点sprite的矩形相交了。
 var sprite1 = {x:x1,y:y1,w:w1,h:h1};    //sprite1左下角x,y,宽度、高度
    var sprite2 = {x:x2,y:y2,w:w2,h:h2};    //sprite2左下角x,y,宽度、高度
  //检测两个标注sprite是否碰撞
    function isPOIRect(sprite1,sprite2){
        var x1 = sprite1.x,y1=sprite1.y,w1=sprite1.w,h1=sprite1.h;
        var x2 = sprite2.x,y2=sprite2.y,w1=sprite2.w,h1=sprite2.h;
        if (x1 >= x2 && x1 >= x2 + w2) {
            return false;
        } else if (x1 <= x2 && x1 + w1 <= x2) {
            return false;
        } else if (y1 >= y2 && y1 >= y2 + h2) {
            return false;
        } else if (y1 <= y2 && y1 + h1 <= y2) {
            return false;
        }else{
            return true;
        }
    }