threejs学习笔记：CSS2DObject 2d文字渲染

import {
  CSS2DRenderer,
  CSS2DObject
} from "three/examples/jsm/renderers/CSS2DRenderer.js";

// 2d文字渲染
  function _createBox1Label(object: THREE.Mesh) {
    const div = document.createElement("div");
    div.className = "red-box-label";
    div.textContent = "红色正方体";
    const earthLabel = new CSS2DObject(div);
    earthLabel.position.set(0, 0.5, 0);
    object.add(earthLabel);
  }
  
//正方体渲染
  function _createBox1() {
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({
      color: "red",
      map: loadTexture("/img/木纹.png")
    });
    const object = new THREE.Mesh(geometry, material);
    object.position.set(0, 0, 0);

    _createBox1Label(object);
    scene.value?.add(object);
  }

  const _initCssRender = (): CSS2DRenderer => {
    const cssRender = new CSS2DRenderer();
    cssRender.setSize(element.value.offsetWidth, element.value.offsetHeight);
    cssRender.domElement.style.position = "absolute";
    cssRender.domElement.style.top = "0";
    element.value.appendChild(cssRender.domElement);
    return cssRender;
  };

//控制器中
function _initControl(): OrbitControls {
    const control = new OrbitControls(
      camera.value!,
      cssRender.value?.domElement
    );
    control.target = new THREE.Vector3(0, 0, 0);
    control.update();

    return control;
  }

// 初始化
  onMounted(() => {
    scene.value = _initScene();
    camera.value = _initCamera();
    cssRender.value = _initCssRender();
    renderer.value = _initRenderer();
    control.value = _initControl();

    _initAxesHelper(10);
    _initLight(scene.value);
    // _initGUI();
    // 实现重复渲染动画
    _render();
  });


// 渲染
  const _render = () => {
    const delta = new THREE.Clock().getDelta();
    renderer.value!.render(scene.value!, camera.value!);
    cssRender.value!.render(scene.value!, camera.value!);
    const mixerUpdateDelta = clock.getDelta();
    mixers.forEach((mixer) => mixer.update(mixerUpdateDelta));
    // 点击高亮效果的渲染
    composers.forEach((composer) => composer.render(delta));
    // 渲染动画
    renderMixins.forEach((mixin) => {
      typeof mixin === "function" && mixin();
    });
    // 两个动作之间的过渡效果，让效果更好（注释后发现效果也不明显）
    TWEEN.update();

    // FPS帧率显示渲染
    typeof stats.update === "function" && stats.update();
    requestAnimationFrame(_render);
  };