CSS2DRenderer的使用

具体参照https://github.com/mrdoob/three.js/blob/master/examples/css2d_label.html；
CSS2DRenderer的使用
import { CSS2DObject，CSS2DRenderer } from ‘three/examples/jsm/renderers/CSS2DRenderer’;
const { position, zIndex } = data.props;
const html = this.getHtmlDom(data);
const label = new CSS2DObject(html);
label.position.set(position[0], position[1], position[2]);
scence.add(label )
label.layers.set(zIndex);
this.label = label;
// width, height为mapDom的宽高
this._labelRender = new CSS2DRenderer();
this._labelRender.setSize(width, height);
this._labelRender.domElement.style.position = ‘absolute’;
this._labelRender.domElement.style.top = ‘0px’;
this._dom.appendChild(this._labelRender.domElement);
this._labelRender.render(this._scene, this._camera);

function getHtmlDom(data) {
const { text = ‘’, className = ‘’, style = {}, htmlDom = ‘’ } = data.props;
let html = ‘’;
if (htmlDom) {
html = htmlDom;
} else {
html = document.createElement(‘div’);
html.className = className;
html.textContent = text;
Object.keys(style).forEach((key) => {
html.style[key] = style[key];
});
}
console.log(‘html’, html);
return html;
}