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?
1 Like
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?
3 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.
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).
3 Likes
Thank you! This fixed my issue.