I have figured out, in ThreeML ray casting is being used to detect whether it’s CSS plane or not, I tried the same thing last night while experimenting. But occultation fails when its iframe(ie. YouTube embed) to demonstrate the issue I have created a pen. If you hover the mouse over the anchor and then to the cube above it, you can see the expected behavior but when you hover over the YouTube video and then to the cube above it, it will behave like as if iframe is above the cube.
Please check this out
1 Like
Both the moon label as the scifi youtube movie (and also the other panes) are rendered using the handleHtmlPlaneGeometry.
There is at least this extra event at line 2393 that effects the pointer-events style:
.
Maybe that helps?
I will try it now. But what I think is it will not work because youtube player is beyond the scope of the document so that the document where the threejs renderers are present doesn’t understand mousemove event over the cross domain iframe. So no mousemove means no raycasting so finally no differentiation between GLObject and CSS3DObject.
I think the event is still triggered because the iframe is within a container div, and it is the container div that is in the same domain on which the event is set. But perhaps I am overlooking something.
Anyway, the behavior is not perfect, and sometimes the orbit controls keeps dragging while the mouse buttons are released.
I have even tried to put the iframe inside the div. I attached mousemove event with the div so when mouse is moving over the div I am setting iframe.style.pointerEvents to none and after mousemove is not happening for ‘250ms’ I am making iframe.style.pointerEvents to auto. So, It works 75% of times. But it fails sometimes, and I figured out the reason. The reason is, when the iframe itself, start capturing the mousemove event then the parent div is unable to detect mousemove event causing the failure. I am trying to add that same thing here in codepen so you can understand what I am experiencing.
1 Like
Please check this out again @awonnink
A Pen by Smithangshu Ghosh (codepen.io)
You will see it works as expected most of the times. But fails sometimes. Please let me know if you have any idea to make it full proof.
for both the canvas and the dom to receive events, events have to be registered on the parent that contains both the canvas and the dom overlay, you also have to use clientX/Y, not offsetX/Y, this is still all just css and pointer event rules on the dom.
though at that scale, if you are mixing html and canvas, does it really make sense to do this in vanilla + css3drenderer? use react + three: interesting-sunset-pk0lpw - CodeSandbox the html component is lightyears ahead of css3d and it couldn’t be simpler to use.
with this html can also be an actual part of your scene, sandwiched between meshes The three graces - CodeSandbox
Hi @drcmda, I used clientX/Y and already using mousemove event of the parent div of the iframe. And currently I am integrating things in Svelte, and we are a light year ahead with it. At this point it’s not an option to switch between technologies. And I think changing the technology would not help here because it’s we are stuck in basic principle of the HTML. So, if it’s a solution then it would work even in HTML otherwise, it won’t work anywhere.
svelte has a direct copy of drei/html, see @threlte/extras: HTML | Threlte
imo no matter how far you are, mixing a framework with imperative document.createElement calls will become a hinderance as you’re now dealing with three completely separate worlds that have no interop: declarative svelte and the dom, imperative webgl, imperative css3d. in even the slightest scale this will collapse.
but either way, just a suggestion, it’s available in svelte if you wanted it.
Yeah thanks mate. Though, I already know about Threlte. But I preferred making it from scratch since I needed huge customization of Three.js as I am developing an 3D Content Creator with Threejs. It’s already very complex so I would prefer to stay with the original. But if you can produce the behavior which I am looking for using Drei/Html or Threlte please go ahead and let me so I can derive what I am looking for from it.
@drcmda he figured how to mix html+webgl, but the main issue is that when webgl is in front of html, we should not be able to click on the html (block the pointer events as if the webgl is like regular DOM). Ray casting is needed to make it work. Ideally this can be built into the mixing system.