Using WebGLRenderer and CSS3DRenderer together hardly works

Hi,
I’m currently working on an online editor tool, now i wanted to give the user the ability to include youtube streams. Working together with WebGLRenderer and CSS3DRenderer i get a lot of problems.
the scene the CSS3DRenderer generates has a div in between the domElement and CSS3DObjects. everything rendered by the WebGLRenderer below that div in view is blocked from interaktion.
Is there a good way to get this div from not blocking the WebGLRenderer interactions?

If you can include some way of reproducing the problem (e.g. a demo) you’ll likely get more helpful answers.

Have you tried setting pointer-events: none in CSS on the div that should not be interactive?

2 Likes

Thanks for the quick response.
Tried it, sadly while I now can interact with the objects rendered by the WebGLRenderer, the objects rendered by the CSS3DRenderer cannot be interacted with.
But I need to be able to interact with objects rendered by each of the renderes.
Providing a codesample will be difficult since the project is quite big and intervined.
I will see if i can cook up something

Edit:
In case someone stumbles over this having the same problem:
Setting the problem div with pointer-event: none and its childs with pointer-event: auto seems to do the trick.
Thanks again to donmccurdy for the help

I tried css renderer on vr, but dont work at all. Best I can do is convert html to canvas, with a lib i found, and program the interactions to it.

CSS3DRenderer is not intended for use in WebVR.

My whole plan was to use https://html2canvas.hertzen.com/ to make images and render them to a 3d object, and simulate clicking links via hidden iframe. Its a bit of a workload and I dont think its going to be ever finished.

http://techc.omorita.com/jslib/threejs76/examples/css3dstereo_periodictable.html
Theres hacks of it

You can mix WebGL objects with CSS3D objects like this:

But note, this does not work in WebVR or WebXR (because WebVR/XR only allows WebGL rendering, not CSS rendering).

2 Likes