Use CSS2DRenderer within main WebGLRenderer scene?

I have a scene that is built around the WebGLRenderer. I’d like to mix in a particular element that is rendered by a CSS2DRenderer. Is this possible?

For example, suppose I wanted to add the moon/earth example code found in the CSS2D_label.html sample in the examples directory. I imported that code into my project and nothing broke. However, if I attach the CSS2DRenderer to the document.body element, my WebGLRenderer rendered canvas no longer appears:

document.body.appendChild( labelRenderer.domElement );

If I comment out that statement above my WebGLRenderer rendered canvas displays again, but I don’t see the CSS2DRenderer content of course.

Do I just need to attach the CSS2DRenderer to some other element in my CSS2DRenderer scene? If so, how? If not, how can I do this?

Also, I am having trouble finding the animate loop or any update() methods being called in the css2d_label.html sample. Do CSS2DRenderer rendered scenes and objects not require them? If they do, what code in the sample is doing that?

appendChild should just work for you.
I’m sure if we could see your code, it would be clear what is causing your problem.

Here are 4 other working CSS2DRenderer examples you can look at.
1 : Glasses - Three.js Tutorials
2 : Raycaster Measurements - Three.js Tutorials
3 : Annotations - Three.js Tutorials
4 : Constellations - Three.js Tutorials

See the animation loops for the call to the CSS2DRenderers instance render method.

1 Like

Sorry. It was a fluke of perception. I thought the CSS2D elements weren’t being rendered, they were. I just didn’t see them at first because they are really tiny in my world (see screenshot). I had to scour my world and look hard for them. All is well. Must be some kind of a scaling issue. Thanks.