Align local Z axis on click

Hi,
I have a https://www.babylonjs-playground.com/#EYZE4Q#451 where i try to change the z axis on click input. My goal is it to click on the cubes side and define the new z axis. In my current version this isnt working yet. If i add in an other object like a sphere and click on it, the y axis will be set to this clicked position (which does work, but it should be the z axis and on click to the cube).

I tried another solution with mesh.lookAt() but this is not what i am looking for since it will rotate in a wrong way.

In Conclusio, i have a cube or maybe a sphere. Now when i click it i want from that pickedPoint pointing up to be the new local z axis. Is there already a function implemented that does this for me or how could I change my solution up for it to be working?

let me ping our geometry master @syntheticmagus

Hi Patrick_Luthi,

I’m not quite sure I understand what you’re trying to set the Z axis to. The logic you have seems to be based heavily on normals, and I don’t have a clear picture in my mind of the intent, but I wouldn’t typically expect normals to be the way you’d want to interact with cubes, which have only 6 normals.

In general, if you have unit vectors that you know you want to be the axes of your space, you can build a rotation matrix directly out of those axes. Probably the easiest way to do this in Babylon would be to use Quaternion.RotationQuaternionFromAxes, though I think you’ve achieved something similar already by combining utility functions for Euler angles and yaw-pitch-roll. If what you’re looking for is just a way to build a rotation from your known axes, I’d recommend you give the above quaternion method a try.

If that’s not what you’re looking for (presumably because the axes themselves don’t correctly represent the space you want to rotate to), can you add some more detail about your intended result? Specifically, you mentioned in your question that lookAt(...) produces a rotation that is “wrong”; can you clarify why it’s wrong and what would be right instead?

Thank you for your fast responds… :slight_smile:
I dont think we are on the same page yet. So let me explain in detail…

So this is what we have currently. We have a navigation cube in the bottom left corner and in the center a modell of a building (this can be anything). Now the building is build with multiple meshes and all together display a buidling like you see here.

Our problem is that maybe the building is not straight or a user wants to change the direction of the building (for example the left side is the new front side).
I think the best way to change that is to hit a button which activates the option to change it. The next click (on the building) will determine which is the new front side. That could be also from top from the side or pretty much every possible side.
Before I can change any side to forward I need to get the new rotation angle (or maybe in an other way?). I dont know how to achive that and hopefully you can help me with that…
If we have a solution to get the correct rotation angle there will be a new problem we need to think about. I cant just rotate all the single meshes cause they obviously would mess up the whole modell (merging is no option). Maybe there is a solution for that or if not i can trick it with rotating the navigation cube and simulating everything else (like planes in the building).

I hope this clarifies what I am trying to achive. If not please let me know :slight_smile:

Thanks so much for diving deeper! Yes, that definitely helps me understand better what’s going on. The question actually reminds me of another question from quite a long while back, so it might be worth taking a look at that thread in case there’s any overlap.

One thing to consider is that in use cases like the one you’re describing, the usual recommended course of action is to move and rotate the camera, not rotate the model. Those operations are partly just inverses to one another, so if you can do one you can (mostly) do the other. But by rotating the camera, you only have to deal with manipulating the state on one object, thereby avoiding the issues you mentioned that could arise from trying to rotate a lot of different meshes in a scene individually (though there are other ways to get around that problem too, if necessary).

Probably the easiest way I can think of to get to the behavior you’re looking for is to surround your building with a simplified “hull” and make that pickable instead of the building itself, then use the pick information to determine where the camera should go. This will abstract away certain nuances of the behavior from being mesh- or math-specific and will allow you to control your intended behavior mostly by just changing the hulling mesh.

In the case of the screenshot you pasted above, for example, assuming you only wanted to view it from dominant axes (front, back, left, right, back, etc.), you could “hull” it with a simple box mesh. The box would be invisible, but when the user clicked, it would be the box that received the pick, not the building. You could then just take the picked point and the box’s normal at that point, then move the camera to look at that point from a direction indicated by the normal. (See the linked topics above for examples of things like this being done.) In this case, using the box eliminates the potential for strange, unintended results from clicks hitting precise geometry – the sides of a window indentation, for example – which might have wildly different normals from the surrounding geometry and consequently send your camera logic to the wrong side of the building.

And if you wanted different behavior, all you’d have to do is change the hulling mesh. If, for example, you wanted to be able to look at the mesh from more angles than just the dominant axes, you’d just need to replace your box with a mesh that has more normals, like a capsule. This, without any further changes, would cause the same logic outlined above for dominant axes to power any viewing angle. In fact, almost any viewing behavior in this category could likely be enabled simply by changing the hulling mesh, which would allow you to cleanly reuse your code for any number of different kinds of buildings, or even other objects.

Hope this helps, and best of luck!

1 Like

Hi syntheticmagus,
Thank you for your suggestions, for the first solution I went with your idea. I created a hull around the object and was able to change the main sides direction. I will later add a solution that is going to pick every angle and not just the main ones from the hull. I might come back with more questions for you :slight_smile: