Combine WebGLRenderer with CSS3DRenderer

Is there any solution or workaround for this? Or am I digging into an infinite rabbit hole?

I want to mix CSS3DRenderer with WebGLRenderer in order to be able to display in-real-time websites in my game experience. Is there any way I can get the occlusion elements from the WebGLRenderer and transport it to the CSS3DRenderer to have 3D objects “appear” in front of my CSS3DRenderer?

I want to have depthness and nost just appear on top of everything, and my scene is too complex to duplicate all the elements and place them aswell on the CSS3DRenderer, which I think is not even possible.


All points towards being not possible today, am I missing any workaround?

It is possible, see for example Sci fi (, where all the screens are iframes (some containing Youtube, some local ThreeJS 3D scenes, some Html)
See also CSS3DREDNERER object - Questions - three.js forum (

1 Like

you can have html in front of the canvas or behind, or both the same time. you can “occlude” it with some tricks, to make it look like it’s “behind” something but it won’t be part of your canvas contents. with care you can embed it, for instance like so: Mixing HTML and WebGL w/ occlusion - CodeSandbox

what you ask for specifically is probably not possible, or you figure out how to render an interactive html blob into a texture. i think i have seen this done but if i remember correctly it came with caveats. in your case i’d use a plain mesh and a video texture, why does this need to be html at all?