Hi!
I’m trying to rotate meshes using a transform matrix around the world axis instead of the local one. Some of my meshes might have been previously rotated.
I think my transformations are currently applied relative to the “local mesh space” instead of the global one. I’m guessing there’s a way to either :
a) apply the transformation using another method so it’s computed relative to the world
b) “reset” the mesh space so it match the global one
c) compute the required axis (in BABYLON.Matrix.RotationAxis) that fit the world from the local object point of view
d) other – it might be way more complicated than I think…
Whatever I do, I need to keep the object at its mesh and it’s pivotPoint where it is so the new transformation is applied relative to the current pivot point around the world axis.
What would be the best way to do that?
For reference, I made a small playground : Babylon.js Playground
There, you can see 8 squares. On the first row (left), you can see one unrotated square and 3 squares rotated 90 degrees on each axis). On the second row, you see those same squares with the same 45 degrees Z rotation applied. The rotation need to be applied relative to the world, in the same direction as the first unrotated square.
I think it’s a relatively common issue… I tried searching for a solution in the forum and google (and tried stuff I found randomly in the documentation), but I didn’t find anything that worked… But I’m pretty sure I just don’t have the right vocabulary to describe / search my issue correctly…
If you can point me in the right direction, I’d appreciate it greatly!
Thanks for your help!
Well, normally people will use a parent TransformNode for that.
In your case, as you’re applying a matrix transform, looking quickly I would say that you should first put those objects inside an Array, then iterate through the Array translating that matrix by each object’s position. That would give you the effect you want, if I understood what you want.
Something like this: https://playground.babylonjs.com/#N6EUH1#1
Might be slightly off from what you want exactly, but it’s how I understood you, and shows a way of pivoting, so just tweak it to what you want exactly.
I don’t think I can apply your proposed solution – it appear to move everything as a “block”. I need each mesh to be “individual” and need to be rotated by themselves around their pivot point in the direction of the world X axis.
I updated my playground to (I hope), demo it better… I now have 3 columns (each column contains 4 squares, one unrotated and one rotated by 90 degrees on each axis)
- I added yellow spheres representing the pivot points
- The blue meshes are examples of my “starting” meshes
- The green meshes are our expected results (I faked them manually)
- The red meshes are the transformed meshes. This is what I need to fix (so its angle match the green meshes)
Most of what I did in there is “fake” to represent the state I have to work with. Normally, what I need to do / fix is starting at the line 115 in this playground.
I tried using bakeTransformIntoVertices, but I can do it any other way if needed. Note that I might have more than 1 transformation here. In the playground, I only have a matrix to rotate around the X axis, but I might also have transformations in Y and Z, so I might need to control the transformation order (X, Y and Z) — that’s the original reason why I did it using bakeTransformIntoVertices initially.
Of course, the transformations would normally be done “in place”, so the red and green meshes should be at their starting position (over the blue mesh, rotated around the pivotPoint). I displayed them all and moved them for demo purposes.
I think my red meshes are currently rotated around their origin point (?), in the direction of their local x-axis. I need them to rotate around their pivotPoint in the direction of the global / world x-axis. So I appear to have two issues :
- Pivot point is not respected
- Rotation direction not respected
I can’t see how I can use your proposed solution to fix this issue, but maybe I’m wrong?
Thank you for your time!
I believe that the problem with pivot not being respected is because you’re applying a matrix rotation directly. Abstract things like pivot points are respected when you follow the normal path of transforms.
I would prefer to manipulate those rotations using only rotationQuaternion, but as you touched rotation, here is an updated PG using euler angles then:
Only box2c is wrong now, but I believe that happens because of the rotations sequence. The “idea” of the rotations around pivots is there already.
1 Like
Using “box.rotation = box.rotation.add” with Quaternion rotate around the pivot, but as you said yourself, it does not always rotate correctly… It might have something to do with the rotation’s order, but I’m not quite sure how to fix it…
For test purposes, I added rotations on the other axis on this new playground. Again, it’s close but not quite OK… There’s more error now that I do multiple transformations…
BUT if I “bakeCurrentTransformIntoVertices” before doing those final transformations lines 129-132), the final rotations appear to be PERFECT… but now, the pivotPoint is lost again… (you can comment lines 129 to 132 to see)
Whit the lines uncommented, I think those final rotations are done around the world center [0,0,0] or something like that… I’m trying to find a way to restore or reset the pivot point, but I didn’t find how to do that yet…
Is there a way to specify a rotation point in world coordinate in box2d.rotation.add ? (I would still need to find my pivot’s world position, though…)
Yes, there is world space rotation, ex:
box2c.rotate(BABYLON.Axis.X, finalRotationX, BABYLON.Space.WORLD);
I did yet another PG based on your last one, which gets close to the rotation you want:
Rotations can easily become a real mess if not done right from the start, and using the same sequence and method.
One alternative way of doing those nasty rotations would be to use parenting. The parent TransformNode becomes your pivot then. You move you child object so that its pivot is centered on the parent and then you rotate the parent.
Anyway, you’re getting rotations around the pivot points already. What is messing now is the rotation order etc, I think.
1 Like
Hello, just checking in, was your question answered? @csuture0a
Yes, even though no answer perfectly fixed the issue in the fictional playground code, it DID help me fix the issues in my actual code.
Imerso did help me a lot (thanks!). I just marked their last answer as the solution.
1 Like