label.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. class Label2D extends THREE.EventDispatcher {
  2. constructor(o = {}) {
  3. super()
  4. this.title = o.title
  5. this.position = o.position
  6. console.log(o);
  7. this.elem = $(`<div class="room-label ${o.labeltype ? o.labeltype : ''} ${o.posi == 'right' ? 'right' : ''}" >
  8. <a><p>
  9. <span>${o.title}</span>
  10. ${o.labeltype ? `
  11. <div class="sline"></div>
  12. <span class="enspan">${o.entitle}</span>` : ''}
  13. </p></a>
  14. ${o.labeltype ? `<div class="picdetail">
  15. <div class="header">
  16. <span>岁寒三友</span>
  17. <img src="images/video.png" alt="">
  18. </div>
  19. <div class="pinfo">
  20. <img src="images/temp.jpg" alt="">
  21. <p>南宋赵孟坚经历丧国的痛楚,把松竹梅在一起创作出《岁寒三友图》,借用“岁寒三友”来比喻自己为身处乱世不变其节的忠贞之士。</p>
  22. </div>
  23. </div>`: ''}
  24. </div>`);
  25. $(".widgets-doll-labels").append(this.elem)
  26. this.pos2d = new THREE.Vector3
  27. this.elem.css({ position: 'absolute', 'z-index': 999 })
  28. this.clickFun = o.clickFun;
  29. this.clickFun && this.elem.on('click', this.clickFun.bind(this))
  30. {
  31. let update = (e) => {
  32. this.update(e)
  33. }
  34. viewer.addEventListener("view.changed", update)
  35. this.addEventListener('dispose', (e) => {
  36. viewer.removeEventListener("view.changed", update)
  37. })
  38. }
  39. this.visible = true
  40. this.shelterByModel = o.shelterByModel
  41. this.update()
  42. }
  43. update(e={}) {
  44. if (!this.position || !this.visible || !e.changeSlightly && this.sheltered) return
  45. var p = convertTool.getPos2d(this.position, viewer.camera, $("#player")[0]);
  46. if (!p || !p.trueSide) {
  47. this.elem.css('display', 'none'); return;
  48. }
  49. //判断label是否被模型遮挡,遮挡则消失(如果是漫游模式最好提前计算visiblePanos)
  50. if (e.changeSlightly){//防卡: 画面要停止转动时才执行
  51. if (this.shelterByModel && convertTool.ifShelter(this.position, p.vector, viewer.camera, viewer.model.children, 0.05)) {
  52. this.sheltered = true
  53. this.elem.css('display', 'none'); return;
  54. }else{
  55. this.sheltered = false
  56. }
  57. }else{
  58. //console.log('!changeSlightly')
  59. }
  60. this.elem.css({
  61. left: p.pos.x + 'px',
  62. top: p.pos.y + 'px'
  63. })
  64. /* if(settings.vrEnabled){
  65. this.elem.css({transform:'rotate('+window.screenFaceOrient+'deg)'})
  66. }else{
  67. this.elem.css({transform:''})
  68. } */
  69. this.elem.css('display', 'block');
  70. this.pos2d = p.vector;
  71. }
  72. setVisible(visi, reason, level = 0, type) {
  73. convertTool.updateVisible(this, reason, visi, level, type)
  74. if (!this.visible) {
  75. this.elem.css('display', 'none');
  76. } else {
  77. this.update()
  78. }
  79. }
  80. setTitle(title) {
  81. this.title = title || ''
  82. this.elem.html(`<a><p><span>${this.title}</span></p></a>`)
  83. }
  84. setPos(pos) {
  85. this.position = pos;
  86. this.update()
  87. }
  88. dispose() {
  89. this.elem.remove();
  90. this.dispatchEvent({ type: 'dispose' })
  91. this._listeners = {}
  92. console.log('dispose')
  93. }
  94. }