So I’ve been making a scene where when you touch a mesh it will first, get that side of the mesh and return to me this position and rotation Quaternion. To this, I can create a plane of the same position and add an Iframe to it.
However, since the iframe uses rotation instead of quaternion, it does not translate properly.
I’ve managed to use mesh.rotationQuaternion.toEulerAngles() to get the vectors of each. But it only works on the y angle (which uses the z value of the given function. I know, its weird xD ).
Is there a way to properly use the quaternion value to the plane mesh without translating it to euler angles (I’ve tried mesh2.rotationQuaternion = mesh.rotationQuaternion but it stretches it to the scene) or if not how can I rotate it on the remaining 2 angles?
I’ve prepared a playground to visualize my issue. (When you click on the front and left blocks, it is showing properly. However, if you click on the right(slanted) block the plane/iframe doesn’t really show properly)
https://www.babylonjs-playground.com/#35HAW1#44
I look forward to the collaboration ahead!
pinging @syntheticmagus to see if he can help
Hi VtuberFan,
Can you dive into the origins of this CSSRenderer type and code that I see in this Playground? By manually tweaking values, I can only conclude that rotation definitely does not do anything I would typically expect from a variable with that name, so it’s either wrong or it’s intended to do something other than what I think it does. Did you write this type, or did it come from somewhere else (such that it perhaps has some creation context and/or documentation)?
Hi Syntheticmagus,
I actually got that class from this feature/post Youtube videos on a mesh (port of CSS3DRenderer.js) - Demos and projects - Babylon.js where they explained that it was a port from css3drenderer. I am sorry, I’m quite new to programming so I’m not sure sure whether there exist a documentation for this 
I see. Thanks for the context, that definitely helps. 
That code is doing some highly customized conversions in order to take a Babylon object’s world-space transform and apply it to a CSS element, but something in the conversion doesn’t correctly handle rotation in any axis but vertical. I checked this on the Playground thread you originally linked to, and I don’t think it works there either, so presumably this is just an attribute of the original code. @ozRocker, is this expected to work? Or is there another way we’re supposed to invoke this behavior? If not, then unfortunately the solution to this will be to debug and repair the matrix conversion code, which is always a bit of an adventure. 
Oh boy math T-T. I guess I’ll start learning matrix and 3d points to understand the conversion. Is that correct?
Something along those lines. Unless you need this to work very urgently, though, you might want to wait a day or two before jumping in in case osRocker drops by with a ready-made solution. If you do end up having to go into the conversion code, my guess would the error will have something to do with a matrix convention—handedness, or major, or world/view, or something similar—which will be a bit fiddly to track down. It’s very doable, so it shouldn’t stop you; but it may slow down a bit, so it might be worth waiting to see if another solution pops up if time is on your side.
After a while. It became from hard to stuck. Since I’m a bit pressed on time I might do the video texture and image text first. Is it possible to create a plane the same size as a face of a mesh/cube on click? I had done just creating the plane but I still need to use the gizmo to properly align it.
It’s possible to create a plane of any size, so I’m guessing you’re looking for a good way to know what size to make it. Are there constraints to the use case? For example, are you trying to click to cover faces in a world where only rectangular prisms are possible? Without constraints, I don’t really have a clear idea of what the right answer might look like. Can you dive into the intended use case a little more deeply?
I’m sorry I should have been more precise 
I guess similar to a virtual tour of some sorts? I want to create a plane on click but it should be on top of any screen that I load (say for example I want to put a plane on a tv or any surface) but it is possible to make the size of the plane similar to the tv or the surface I attach it to on create of that plane?
I only used the rectangular prisms as they are both easy to put. But I guess its also complicates as I have a mesh of curved tv so I’m a bit overwhelmed.
A part of it as well that I’m trying to do is to save it all in a JSON (like the position, rotation, and size of the plane that the admin created) where I can load this up in another computer as a guest.
There are several things you could try, but honestly I think the best choice for your scenario would be to manually place a plane per clickable object, then just enable or disable that plane depending whether the object has been clicked or not. Since you’re already placing the objects, the additional work should be very small, and this approach will give you the most control over placement: you can decide how you want to resolve any ambiguities on a case-by-cases basis instead of trying to predict them all from a generalized conception of the problem. Then, once you have your planes placed, all you should have to do is enable them to display the planes themselves, or you can use them as a reference to copy out position/rotation/size information for other things you may want to display in that case.
As I said before, there are other things you can try, but every other solution I can think of is probably just going to make things more complicated than they need to be and harder in the long run than just placing the planes exactly where you want them upfront. Hope this helps, and best of luck!