three.js添加2d标签

第一步  标签div元素

    <div id="camera">
      <div>
        <div
          style="
            height: 1px;
            width: 130px;
            background: #00ffff;
            margin-top: 68px;
          "
        ></div>
      </div>
      <div id="message" style="width: 350px; height: 120px">
        <div style="padding: 10px 4px; font-size: 18px">双摄像头</div>
        <div style="padding: 10px 24px; font-size: 16px">
          后置主摄像头——1300万像素(F/1.8光圈)
        </div>
        <div style="padding: 10px 24px; font-size: 16px">
          后置副摄像头——200万像素的
        </div>
      </div>
      <!-- 设置一个关闭按钮 -->
      <div style="position: relative">
        <div style="position: absolute; left: -30px; top: 10px">
          <img
            id="close"
            src="../../assets/关闭.png"
            alt=""
            width="18"
            style="cursor: pointer"
          />
        </div>
      </div>
    </div>

#camera {
  position: absolute;
  display: flex;
  /* row是flex-direction默认值,可以不设置，表示主轴为水平方向，从左向右排列*/
  flex-direction: row;
  /*space-between表示*/
  justify-content: space-between;
  /* visibility: hidden; */
  z-index: 100;
}

#message {
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 0px;
  /* 边框 */
  background: linear-gradient(#00ffff, #00ffff) left top,
    linear-gradient(#00ffff, #00ffff) left top,
    linear-gradient(#00ffff, #00ffff) right bottom,
    linear-gradient(#00ffff, #00ffff) right bottom;
  background-repeat: no-repeat;
  background-size: 2px 20px, 36px 2px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 18px;
  padding: 8px 12px;
}

第二步 获取元素

//获取元素  
const div = document.getElementById("camera");
//转成2D的对象
    var tag = new CSS2DObject(div);
// console.log('世界坐标',worldPosition);
//把精灵模型的定位赋值给这个元素
    tag.position.copy(sprite.position);
//添加到场景
    scene.add(tag);

第三步

//实例化一个二维渲染器
const css2Renderer = new CSS2DRenderer();
//设置渲染器尺寸（和three的渲染器大小匹配）
css2Renderer.setSize(window.innerWidth, window.innerHeight);
//脱离文档流
css2Renderer.domElement.style.position = "absolute";
//这时候标签和精灵模型的坐标原点重合会挡住，微调一下位置，保证指针指向精灵模型中间
css2Renderer.domElement.style.top = "8px";

css2Renderer.domElement.style.left = "260px"; //HTML标签尺寸宽度一半
// //设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型
css2Renderer.domElement.style.pointerEvents = "none";
document.body.appendChild(css2Renderer.domElement);

最后一步

//循环渲染
function render() {

  renderer.render(scene, camera);
//在循环渲染中添加渲染函数
  css2Renderer.render(scene, camera);
  requestAnimationFrame(render);
}