Youtube videos on a mesh (port of CSS3DRenderer.js)

So a couple of new notes…

  • The iframe-bg-sphere I added for improving detection of onmouseout events has a limit of around 100 in-engine units in scale due to Babylon’s raycasting system, which makes it a useful idea, but with limitations. I would recommend sticking with onmouseout event detection as it is and perhaps adding a list of meshes you want to detect that will disable the onfocus boolean.

  • The PointerEvent in the playground uses event.offsetX and event.offsetY for the mouse position. However depending on your own use case you should consider using event.x and event.y or alternatively event.pageX and event.pageY, as all of these different X/Y coordinates are useful in different scenarios. In my own repo I added an enum option when creating an iframe for selecting which mouse event coordinates to use for the Babylonjs raycast.

[EDIT]
Hey everyone!

After looking around, I found that the CSS3D-iFrame input position bug on Chrome has already been officially reported. However the issue isn’t get much attention (reported on June 21, last comment from a Chromium contributor was on June 30th).

I would appreciate it if you could favorite the bug in the Chromium tracker and leave a comment saying you would also like to see the bug resolved. Thanks!

4 Likes