nj_museum/public/package/js/label.js

class Label2D extends THREE.EventDispatcher {
    constructor(o = {}) {
        super()
        this.title = o.title
        this.position = o.position
        this.elem = $(`<div class="room-label ${o.labeltype ? o.labeltype : ''} ${o.posi == 'right' ? 'right' : ''}" >
        <a><p>
        <span>${o.title}</span>
        ${o.labeltype ? `
        <div class="sline"></div>
        <span class="enspan">${o.entitle}</span>` : ''}
        </p></a>
        
        ${o.labeltype ? `<div class="picdetail">
        <div class="header">
          <span>${o.title}</span>
          <img data-type="close" src="images/close.svg" alt="">
        </div>
        <div class="pinfo">
          <img src="images/image_${o.imgsrc}.jpg" alt="">
          <p>${o.infodesc}</p>
        </div>
      </div>`: ''}
        </div>`);

        $(".widgets-doll-labels").append(this.elem)
        this.pos2d = new THREE.Vector3
        this.wenli = o.imgsrc
        this.emissiveTexture = texLoader.load(`model/${o.imgsrc}.jpg`);



        this.elem.css({ position: 'absolute', 'z-index': 999 })
        this.clickFun = o.clickFun;
        this.clickFun && this.elem.on('click', this.clickFun.bind(this, {
            ...o,
            elem: this.elem,
            emissiveTexture: this.emissiveTexture
        }))

        {
            let update = (e) => {
                this.update(e)
            }
            let updateShelter = () => {
                if (this.shelterByModel) {
                    if (convertTool.ifShelter(this.position, this.pos2d, viewer.camera, viewer.model.children, 0.05)) {
                        this.sheltered = true
                        this.elem.css('display', 'none');
                    } else {
                        this.sheltered = false
                        this.update()
                    }
                }
            }
            viewer.addEventListener("view.changed", update)
            viewer.addEventListener("delayUpdate", updateShelter)

            this.addEventListener('dispose', (e) => {
                viewer.removeEventListener("view.changed", update)
                viewer.removeEventListener("delayUpdate", updateShelter)
            })
        }
        this.visible = true
        this.shelterByModel = o.shelterByModel
        this.update()
    }


    update(e = {}) {
        if (!this.position || !this.visible || this.sheltered) return


        var p = convertTool.getPos2d(this.position, viewer.camera, $("#player")[0]);
        this.pos2d = p.vector;


        if (this.pos2d.x > 0) {
            this.elem.addClass('right')
        } else {
            this.elem.removeClass('right')
        }

        if (!p || !p.trueSide) {
            this.elem.css('display', 'none'); return;
        }

        //判断label是否被模型遮挡，遮挡则消失(如果是漫游模式最好提前计算visiblePanos)


        /*  if (e.changeSlightly) {//防卡： 画面要停止转动时才执行
             if (this.shelterByModel && convertTool.ifShelter(this.position, p.vector, viewer.camera, viewer.model.children, 0.05)) {
                 this.sheltered = true
                 this.elem.css('display', 'none'); return;
             } else {
                 this.sheltered = false
             }
         } else {
             //console.log('！changeSlightly')
         } */


        this.elem.css({
            left: p.pos.x + 'px',
            top: p.pos.y + 'px'
        })

        this.elem.css('display', 'block');

    }

    setVisible(visi, reason, level = 0, type) {
        convertTool.updateVisible(this, reason, visi, level, type)

        if (!this.visible) {
            this.elem.css('display', 'none');
        } else {
            this.update()
        }
    }

    setTitle(title) {
        this.title = title || ''
        this.elem.html(`<a><p><span>${this.title}</span></p></a>`)
    }

    setPos(pos) {
        this.position = pos;
        this.update()
    }

    dispose() {
        this.elem.remove();
        this.dispatchEvent({ type: 'dispose' })
        this._listeners = {}
    }


}