Quick summary, I’ve been playing around with getting an HTML view to show up with correct Z-ordering in a BJS scene. I’m trying to do this with CSS 3D transforms so that eventually it’s interactive.
Last time with help from the forum I got the right integrated “hole” punched through the 3d scene that allows objects to correctly cover in front and others to correctly fall behind the hole in appropriate and complex ways: (Forum Link.) Awesome!
Next on my todo list was arguably the hard part, port the relevant parts of a ThreeJS CSS renderer to Babylon so that I can create a matrix3d css transform to match the BJS camera and plane I’m trying to map to. I’ve started down that path with this playground: https://playground.babylonjs.com/#5CGWLN#4
I started to port the relevant parts of CSS3DRenderer, but am finding more differences than I expected. First problem figuring out why the BJS Matrix returned from the camera appeared to be a 3x3 instead of a 4x4? Then I ran into a copyPosition function from Three that doesn’t seem to have an equivalent in BJS?
I can continue down the rabbit hole and see if I can port each of these pieces correctly, but I also wondered if this is something common and if there’s a better BJS way of doing it than how I’m approaching it?
So ultimately my question is: given my goal, am I approaching this in a way the community would recommend? My follow up question is, am I reinventing the wheel for BJS? Is there something else out there doing this I just didn’t find?