At the same time, could set the occlusion relationship correctly by using the css3drender and webglrenderer?

online demo

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'); = '5px solid #9e671e'; = 'border-box';
    const textwrap = document.createElement('div');  
    this.width = width;
    this.height = height;
    textwrap.classList.add('board-text-wrap'); = '0 0 2px #e8eaed'; = '100%';
    this.content = '';
    this._initWidth = width;
    this._initHeight = height;
    this.background = '#e8eaed'; = this.width * 100 + 'px'; = this.height * 100 + 'px'; = '12px'; = '#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.native.add(this.ref); = `_BOARD_${}`;
    cssObject.scale.multiplyScalar(1 / 100);
    this.element = cssObject;
    // renderer
    // ...

You want the red square (CSS3DRenderer) always be drawn on top of the green square (WebGLRenderer), is that correct?

I don’t think this is possible. It’s not how the CSS3DRenderer works. The WebGL scene is drawn first in a <canvas> element, and then the css3dobject is drawn second, on top of the canvas. It’s not possible to make a css3dobject be hidden by an object in the WebGL scene.

1 Like