three.js使用 CSS2DRenderer

导入 

import { CSS2DRenderer,CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';

function createLableObj(text, vector) {
  let laberDiv = document.createElement('div'); //创建div容器
  laberDiv.className = 'laber_name';
  laberDiv.textContent = text + '\n' + "余量：123";
  let pointLabel = new CSS2DObject(laberDiv);
  pointLabel.position.set(12, 20, 20);
  return pointLabel;
}

let text = "工作厂房-W";
let vector = new THREE.Vector3(11 + (1 * 52), 28, -85 + (1 * 83));
let pointLabel = createLableObj(text, vector);
scene.add(pointLabel);

var labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer 
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
document.body.appendChild(labelRenderer.domElement);

labelRenderer.render(scene, camera);//渲染