Three.js: CSS3D elements render order

[mhoangvslev]

Description of the problem

The CSS3D elements always occlude non-CSS3D elements.
I tried without success to change the zIndex property.

I think that CSS3D is always rendered first?
If it is correct, is there anyway to make the render order customizable?

Three.js version

• [x] Dev
• [ ] r85
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [ ] All of them
• [x] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[Mugen87]

/ping @yomotsu

[mrdoob]

@mhoangvslev have you tried with raw CSS3D?

[mhoangvslev]

I really need your CSS3D because it synchronizes with 3D Scene.

[mrdoob]

Yes, but it would be great if you could help us investigate this issue by testing if what happens with raw CSS3D.

[mhoangvslev]

@mrdoob As stated before, the only property that I find useful is zIndex, which did not affect the outcome. Otherwise, please precise what you mean by "raw CSS3D", for I am very new to this.

[mrdoob]

Raw CSS3D: https://desandro.github.io/3dtransforms/

[WestLangley]

the only property that I find useful is zIndex, which did not affect the outcome.

Please show your code and explain what you are trying to do.

This has an effect.

document.body.appendChild( css3Drenderer.domElement );
document.body.appendChild( div );

css3Drenderer.domElement.style.zIndex = '0';
div.style.zIndex = '1';

[yomotsu]

@mhoangvslev

I really need your CSS3D because it synchronizes with 3D Scene.

Do you mean, "non-CSS3D elements" is your WebGL Canvas? and you want to mix CSS3D and WebGL objects? If so, it is almost impossible. These 2 worlds are completely separated.

[mrdoob]

Oh, I guess I misread.

Yeah, you can't mix CSS3D objects with Canvas/WebGL objects. They're different layers. You can do some hacks though:
http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/