label.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. class Label2D extends THREE.EventDispatcher {
  2. constructor(o = {}) {
  3. super()
  4. this.title = o.title
  5. this.position = o.position
  6. this.elem = $(`<div class="room-label ${o.labeltype ? o.labeltype : ''} ${o.posi == 'right' ? 'right' : ''}" >
  7. <a><p>
  8. <span>${o.title}</span>
  9. ${o.labeltype ? `
  10. <div class="sline"></div>
  11. <span class="enspan">${o.entitle}</span>` : ''}
  12. </p></a>
  13. ${o.labeltype ? `<div class="picdetail">
  14. <div class="header">
  15. <span>${o.title}</span>
  16. <img src="images/video.png" alt="">
  17. </div>
  18. <div class="pinfo">
  19. <img src="images/image_${o.imgsrc}.jpg" alt="">
  20. <p>${o.infodesc}</p>
  21. </div>
  22. </div>`: ''}
  23. </div>`);
  24. $(".widgets-doll-labels").append(this.elem)
  25. this.pos2d = new THREE.Vector3
  26. this.wenli = o.imgsrc
  27. this.emissiveTexture = texLoader.load(`model/${o.imgsrc}.jpg`);
  28. this.elem.css({ position: 'absolute', 'z-index': 999 })
  29. this.clickFun = o.clickFun;
  30. this.clickFun && this.elem.on('click', this.clickFun.bind(this,{...o,elem:this.elem}))
  31. {
  32. let update = (e) => {
  33. this.update(e)
  34. }
  35. let updateShelter = ()=>{
  36. if (this.shelterByModel){
  37. if (convertTool.ifShelter(this.position, this.pos2d, viewer.camera, viewer.model.children, 0.05)) {
  38. this.sheltered = true
  39. this.elem.css('display', 'none');
  40. }else{
  41. this.sheltered = false
  42. this.update()
  43. }
  44. }
  45. }
  46. viewer.addEventListener("view.changed", update)
  47. viewer.addEventListener("delayUpdate", updateShelter)
  48. this.addEventListener('dispose', (e) => {
  49. viewer.removeEventListener("view.changed", update)
  50. viewer.removeEventListener("delayUpdate", updateShelter)
  51. })
  52. }
  53. this.visible = true
  54. this.shelterByModel = o.shelterByModel
  55. this.update()
  56. }
  57. update(e={}) {
  58. if (!this.position || !this.visible || this.sheltered) return
  59. var p = convertTool.getPos2d(this.position, viewer.camera, $("#player")[0]);
  60. this.pos2d = p.vector;
  61. if (this.pos2d.x>0) {
  62. this.elem.addClass('right')
  63. } else{
  64. this.elem.removeClass('right')
  65. }
  66. if (!p || !p.trueSide) {
  67. this.elem.css('display', 'none'); return;
  68. }
  69. //判断label是否被模型遮挡,遮挡则消失(如果是漫游模式最好提前计算visiblePanos)
  70. /* if (e.changeSlightly) {//防卡: 画面要停止转动时才执行
  71. if (this.shelterByModel && convertTool.ifShelter(this.position, p.vector, viewer.camera, viewer.model.children, 0.05)) {
  72. this.sheltered = true
  73. this.elem.css('display', 'none'); return;
  74. } else {
  75. this.sheltered = false
  76. }
  77. } else {
  78. //console.log('!changeSlightly')
  79. } */
  80. this.elem.css({
  81. left: p.pos.x + 'px',
  82. top: p.pos.y + 'px'
  83. })
  84. this.elem.css('display', 'block');
  85. }
  86. setVisible(visi, reason, level = 0, type) {
  87. convertTool.updateVisible(this, reason, visi, level, type)
  88. if (!this.visible) {
  89. this.elem.css('display', 'none');
  90. } else {
  91. this.update()
  92. }
  93. }
  94. setTitle(title) {
  95. this.title = title || ''
  96. this.elem.html(`<a><p><span>${this.title}</span></p></a>`)
  97. }
  98. setPos(pos) {
  99. this.position = pos;
  100. this.update()
  101. }
  102. dispose() {
  103. this.elem.remove();
  104. this.dispatchEvent({ type: 'dispose' })
  105. this._listeners = {}
  106. }
  107. }