threejs 弹窗信息应该怎么做

threejs在创建了基础的场景、灯光、摄像机，模型等的加载之后，现在要实现的功能是点击某个位置出现弹窗或者是出现视频

效果图

首先说弹窗信息，我封装了一个方法

createTag(object3d) {
        let mapPicSrc = new URL(`assets/close.png`, import.meta.url).href;
        const element = document.createElement("div");
        element.className = "elementTag";
        element.innerHTML = `
              <div class="elementContent">
              <div class="flex-between"><h3>${object3d.name}</h3>
              <img class="flex-img" src="${mapPicSrc}" alt="" >
              </div>
              <div>状态：${object3d.status==1?'已开启':'未开启'}</div>
              <div>编号：${object3d.serialNumber}</div>
              </div>
            `;
        const objectCSS3D = new CSS3DObject(element);
        objectCSS3D.scale.set(0.1, 0.1, 0.1);
        return objectCSS3D;}

使用该方法

 let css3dObjectEl = createTag({name:"名称",serialNumber:'编号',status:1});//最好是全局变量哦
     css3dObjectEl.visible = true; //点击事件中控制这个为true或者false即可控制出现隐藏
     css3dObjectEl.position.set(-30, 0, 16)
     scene.add(css3dObjectEl);

方法附带的样式

.elementTag {
  position: relative;
  left: -1.875rem;
  top: 1.25rem;
}
.elementTag::before {
  content: "";
  display: none;
  position: absolute;
  width: 6.25rem;
  height: 1px;
  background: rgb(127 177 255 / 75%);
  bottom: 0;
  right: -6.25rem;
  transform-origin: 0 0;
  transform: rotate(30deg);
}
.elementTag::after {
  content: "";
  display: none;
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  background: rgb(127 177 255 / 75%);
  bottom: -4.0625rem;
  right: -6.5625rem;
  border-radius: 50%;
}

.elementContent {
  background-color: rgb(20 143 221 / 68%);
  box-shadow: 0px 0px 12px rgb(0 128 255 / 75%);
  border: 1px solid rgb(127 177 255 / 75%);
  padding: 20px;
  color: #efefef;
}

.elementContent .flex-between{
  display: flex;
  justify-content: space-between;
}