Hi, I am facing an issue if I would add WebGLRenderer & CSS3DRenderer together. And if I can make the CSS to properly oculate the WebGL objects. Then I find I can not interact with CSS3DObjects and if I would set pointer event none to WebGL canvas, I see that I can interact with CSS3DObjects but I …

I tried to make an example with two WebGL cubes and one HTML tag – they both react on mouse hover. The cubes use raycasting, the tag uses CSS. There is OrbitControls acting on the cubes and the tag. Because this is my first time ever using CSS3DRenderer there is one glitch - the HTML tag is not sho…

Hi @PavelBoytchev , please allow me some moment I will try to create a small example defining the structure I am using in codepen then sharing with you.

One more thing I noticed is that, in your example the html is not getting occulated by the 3d object. [image]

Yes, this is so. I’m not experienced with CSS3DRenderer, so I only focused on having interaction of both WebGL and HTML elements.

But bro I can integrate it and I can get it working when it’s not properly occulated. But it doesn’t let me interact with when I try to make it perfect with occultation. For example, in your case if you increase the z-index of the WebGL canvas so I hope it will give proper occlusion but then we cann…

Hi @hofk Sorry for replying late. I was doing some experiments with all the possibilities. The sample you have provided me with, are lacking two things, 1) It does not have OrbitControls in it. If it has then it would fail to work due to WebGL canvas has pointer-event:none set. 2) I can interact wit…

As you can see in the source code, the example is not mine. I only collect the examples. Maybe the author @trusktr can help?

Actually, the last question is about general situation, because with some experiment I have figured out closer result as per my expectation but that is having the problem of click reaches to the css3dobject through the webglobject. So, I asked. I am trying to provide an example in codepen for better…

Hi @hofk , @PavelBoytchev , please check the example of the closest I can do as per my expectation but as you can see user can click the video through the cube which is not expected. WebGL & CSS3D Interaction Demo Can you guys please suggest me a workaround to avoid this?

Problem with interaction when merging WebGLRenderer & CSS3DRenderer

Questions

hofk March 5, 2023, 5:05pm 7

Not sure if this is helpful:

From the Collection of examples from discourse.threejs.org

GradientsMaterialColor

Topic		Replies	Views
Using WebGLRenderer and CSS3DRenderer together hardly works Questions css-renderer	8	7524	February 17, 2023
Occlusion Between CSS3D Renderer and WebGL Renderer Questions css3d-renderer	26	3619	September 13, 2024
Using same scene with 2 renderers overlapping objects Questions webgl-renderer , css-renderer	8	6282	April 1, 2019
Combine WebGLRenderer with CSS3DRenderer Questions webgl-renderer , css-renderer , css3d , css3drenderer	2	4445	May 9, 2022
How do i get occlusions of WebGLObjects onto CSS3DObject Questions webgl-renderer , webglrenderer , occlusion , css3dobject , css3drenderer	3	1936	January 18, 2023

Problem with interaction when merging WebGLRenderer & CSS3DRenderer

Related topics