nj_museum/public/package/js/label.js

class Label2D extends THREE.EventDispatcher {
    constructor(o = {}) {
        super()
        this.title = o.title
        this.position = o.position
        console.log(o);
        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>岁寒三友</span>
          <img src="images/video.png" alt="">
        </div>
        <div class="pinfo">
          <img src="images/temp.jpg" alt="">
          <p>南宋赵孟坚经历丧国的痛楚,把松竹梅在一起创作出《岁寒三友图》,借用“岁寒三友”来比喻自己为身处乱世不变其节的忠贞之士。</p>
        </div>
      </div>`: ''}
        </div>`);

        $(".widgets-doll-labels").append(this.elem)
        this.pos2d = new THREE.Vector3

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

        {
            let update = (e) => {
                this.update()
            }
            viewer.addEventListener("view.changed", update) //确保player存在
            this.addEventListener('dispose', (e) => { })
        }
        this.visible = true
        this.shelterByModel = o.shelterByModel
        this.update()
    }





    update() {
        if (!this.position || !this.visible) return

        var p = convertTool.getPos2d(this.position, viewer.camera, $("#player")[0]);
        if (!p || !p.trueSide) {
            this.elem.css('display', 'none'); return;
        }

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

        if (this.shelterByModel && convertTool.ifShelter(this.position, p.vector, viewer.camera, viewer.model.children, 0.05)) {
            this.elem.css('display', 'none'); return;
        }


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

        /* if(settings.vrEnabled){
            this.elem.css({transform:'rotate('+window.screenFaceOrient+'deg)'})
        }else{
            this.elem.css({transform:''})
        } */

        this.elem.css('display', 'block');
        this.pos2d = p.vector;



    }

    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._listeners = {}
        this.dispatchEvent({ type: 'dispose' })
    }


}