Use CSS2DRenderer within main WebGLRenderer scene?

Questions
1

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?

2

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
3

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.

image
image1359×689 31 KB