Three.js 3d场景中插入div，新增模型title（CSS2DRenderer）

✨效果图

☀️ 需求

3d场景中插入div

🌰 举个栗子 (vue3)

import { onMounted } from "vue";
import * as THREE from "three";
import {
  CSS2DRenderer,
  CSS2DObject
} from "three/examples/jsm/renderers/CSS2DRenderer.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

onMounted(() => {
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
      camera.position.z = 5;

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.getElementById('testContainer').appendChild( renderer.domElement );

      const geometry = new THREE.BoxGeometry( 1, 1, 1 );
      const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
      const cube = new THREE.Mesh( geometry, material );
      scene.add( cube );

      const controls = new OrbitControls( camera, renderer.domElement );

      let labelRenderer = new CSS2DRenderer();
      labelRenderer.setSize(window.innerWidth, window.innerHeight);
      labelRenderer.domElement.style.position = "absolute";
      labelRenderer.domElement.style.top = "0px";
      document.getElementById('testContainer').appendChild(labelRenderer.domElement);

      let labelDiv = document.createElement("div");
      labelDiv.className = "buildLabel";
      labelDiv.textContent = 'label title'

      const label = new CSS2DObject(labelDiv);
      label.position.set(0, 0, 0);
      scene.add(label);

      function animate() {
	 requestAnimationFrame( animate );

            cube.rotation.x += 0.01;
	    cube.rotation.y += 0.01;
            renderer.render(scene, camera);
	    labelRenderer.render( scene, camera );
      };

     animate();
})