Threejs implements labels and displays labels with custom styles

1, Introduce

Use threejs Realize label display , Here we only introduce how to realize the function of displaying labels , Others can check previous articles . 

The renderings are as follows ： 

 2, Main description

  Realize the use of labels CSS2DRenderer（2D Renderers ）  Rendering .

1, Introduce the renderer and initialize

2, establish dom Element object , Add displayed content and style

3, hold dom The elements are packed into CSS2DObject object , And add it to the scene

4, Use CSS2DRenderer Rendering display

  Bring in renderer , And initialization

<script type="text/javascript" src="libs/CSS2DRenderer.js"></script>

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

Create a label , And add it to the scene

//  new label 
function createLableObj(text, vector) {
	let laberDiv = document.createElement('div');// establish div Containers 
	laberDiv.className = 'laber_name';
	laberDiv.textContent = text + '\n' + " allowance ：123";
	let pointLabel = new THREE.CSS2DObject(laberDiv);   
	pointLabel.position.set(vector.x, vector.y, vector.z);
	return pointLabel;
}

let pointLabel = createLableObj(text, vector);
scene.add(pointLabel);

  Rendering

labelRenderer.render(scene, camera);

   If you need a complete code, please leave a message or contact me on wechat ：1171053128