In the above example, can you set the correct occlusion relationship for css3dobject? I want to apply it to the hotspot tag or prompt box, because css3dobject has a richer performance effect。
In addition, I also found a bug. In my development process, browsers such as edge / Firefox can correctly display css3dobject, but Google browser shows an exception。
Part of the code is as follows:
const dom = document.createElement('div');
dom.style.border = '5px solid #9e671e';
dom.style.boxSizing = 'border-box';
const textwrap = document.createElement('div');
this.width = width;
this.height = height;
textwrap.classList.add('board-text-wrap');
textwrap.style.textShadow = '0 0 2px #e8eaed';
textwrap.style.width = '100%';
dom.appendChild(textwrap);
this.content = '';
this._initWidth = width;
this._initHeight = height;
this.background = '#e8eaed';
dom.style.width = this.width * 100 + 'px';
dom.style.height = this.height * 100 + 'px';
dom.style.fontSize = '12px';
dom.style.backgroundColor = '#e8eaed';
const geometry = new BoxGeometry(width, height, -0.008);
const material = new MeshBasicMaterial({
color: 0x000000,
opacity: 0,
blending: NoBlending,
side: DoubleSide,
transparent: true,
polygonOffset: true,
polygonOffsetFactor: -1.0,
polygonOffsetUnits: 4.0
});
this.ref = new Mesh(geometry, material);
const cssObject = new CSS3DObject(dom);
this.id = this.native.id;
this.native.add(this.ref);
dom.id = `_BOARD_${this.id}`;
cssObject.scale.multiplyScalar(1 / 100);
this.element = cssObject;
// renderer
// ...