three批量添加标签

css2d-html标签

<!-- 太阳能 -->
<div class="taiyNHtml poin-evnN" style="display: none;" v-for="(i, index) in 10">
  <div class="tyn-main">
    <div class="txt-name" v-text="`顺兴太阳能: 太阳能` + (index + 1)"></div>
    <div class="main-cont">
      <div class="cont-text">
        <div>当前电量</div>
        <div>92%</div>
      </div>
      <div class="cont-text">
        <div>状态</div>
        <div>正常</div>
      </div>
    </div>
  </div>
</div>

/* 太阳能-html */
let taiyNHtmlArr = [];
let htmllength = document.querySelectorAll?.('.taiyNHtml').length
for (let i = 0; i < htmllength; i++) {
    taiyNHtmlArr.push(new CSS2DObject(document.querySelectorAll('.taiyNHtml')[i]))
}

canvas添加标签

let tynpos = new THREE.Vector3();
for (let i = 0; i < tynmodArr.children.length; i++) {
    const tyn = tynmodArr.children;
    tyn[i].getWorldPosition(tynpos);
    taiyNHtml[i].position.copy(tynpos);
    tyngroup.add(...taiyNHtml);
}

tyngroup.position.setY(23)
tyngroup.position.setX(10)
scene.add(tyngroup)