three.js 给模型中添加图片标签或文字标签

最新推荐文章于 2025-06-29 12:29:55 发布

qq_45660256

最新推荐文章于 2025-06-29 12:29:55 发布

阅读量1k

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_45660256/article/details/144419139

实现效果
在这里插入图片描述

1、创建 CSS3DRenderer 作为承载标签的容器

//创建CSS3DRenderer
   labelRenderer = new CSS3DRenderer();
   labelRenderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器尺寸
  labelRenderer.domElement.style.position = 'absolute'; // 设置渲染器样式
  labelRenderer.domElement.style.pointerEvents = 'none';
  labelRenderer.domElement.style.top = '0'; // 设置渲染器样式
document.getElementById('web-container')?.appendChild(labelRenderer.domElement)

2、给指定模型上创建标签

  if (child.isGroup && child.name.indexOf('LLJ') !== -1) {
             const LLJName = child.name.split('-')[1]
              if (child.name.split('-')[1] === '24092297') {
                   child.name='LLJ-24092297-神东天隆2'
              }
             if (flowMeterRealData.value[LLJName]?.display === 1) {
               if (flowMeterRealData.value[LLJName]?.alarmSign === 0) {

               if (flowMeterRealData.value[LLJName]?.locationId === 7) {
               const tag = createTagIcon(child);   //创建标签函数
               scene.add(tag);//添加到指定的场景里
               }



//创建标签元素
  function createTagIcon(obj: any) {
    const worldPosition = obj.getWorldPosition(new THREE.Vector3());
          const div = document.createElement("div");
    div.className = "workshop-text";

    if (obj.name.split('-')[2] === '洒水车1'||obj.name.split('-')[2] === '井下污水入口'||obj.name.split('-')[2] === '备用'||obj.name.split('-')[2] === '神东天隆1'||obj.name.split('-')[2] === '洗煤厂后1'||obj.name.split('-')[2] === '井下生产'||obj.name.split('-')[2] === '总表二'||obj.name.split('-')[2] === '总表四') {
      div.innerHTML = `<div class='LLJ'><span class='text'>${obj.name.split('-')[2]}</span><div class='pic pic1'></div></div>`;
             const pic=div.querySelector('.LLJ')
        // 添加点击事件 鼠标悬浮展示详细信息
pic?.addEventListener('mouseenter', function(event) {
     updateRackInfo(obj,event) //打开popover
});
pic?.addEventListener('mouseleave', function(event) {
     closeInfo() //关闭popover
});
          // <span>${obj.name}</span>
          // 创建CSS3DSprite
    const tag = new CSS3DSprite(div);
    tag.position.copy(worldPosition);  // 调整标签位置

         tag.position.y += 30;
      tag.name = 'TextLabel-' + obj.name

    return tag;
    }

3、给添加的标签添加样式

<style scoped lang="scss">
:deep(.workshop-text) {
  .text{
     font-size: 0.2rem;
    color: #fff;
  text-align: center;
    line-height: 3px;
       transform: translateY(80px);
  }

.LLJ {
     .pic{
    margin:0 auto;
    height: 2.8vh;
    width:  1vh;
   background: url('@/assets/images/LLJ.png');
   background-size: 100% 100%;
  background-repeat: no-repeat;

   }
   .pic1{
     background: url('@/assets/images/LLJ-hight.png');
      background-size: 100%;
  background-repeat: no-repeat;
  height: 4vh;
   }
   </style>

}在这里插入代码片