Align to normal on HeightMap but keep sense of direction

PG: Babylon.js Playground

I am trying to have a “car” travel over a heightmap and adjust it orientation based on the normal. I found some code that computes an orientation that is certainly perpendicular to the normal but the sense of “forward” direction is random. I really just want to align my car’s up axis with the normal while still facing “forwards” (obviously that will change a little on pitch. Is there a simpler way to do this?

In the PG you can see the local “forward direction” becomes random.

I know that @cedric did some experiment around the same topic recently. He may be able to help

Let me check that! :slight_smile:

Something like this @MarkM ?

The trick is to compute the right vector once you get the direction and the normal. then recompute the up vector from the direction and the right.
With those 3 vectors, you can get the rotation from axis like 37.


Ahh. He beat me to it


That works well when the box is facing forwards but I cant seem sto get it to work with it when I rotate the box. PG: line 91 and 92
if I set it to use box.forward it goes into a spin. If I don’t use box .forward then I cannot rotate the box as it is always facing (1,0,0).
My goal is to move the box around and have it follow the height and normal.
(the code is a bit messy as I have just hubbled it from bits).

I also tried with @Raggar 's solution with much the same result so i am not getting something. I also tried using box.rotationQuaternion as I thought it could be a fight between rotation and rotationQuaternion.

so there was an issue with order of updating rotation, I have adjusted that here
I am using rotate which sets rotationQuaternion and then ignores rotation but I still cant get it working.

I have a solution that mostly works but it gets some gymbal lock-type issues. But at least I can turn the box and follow height and normal.
Would switching to purely using rotationQuaternion fix the weird spinning that occurs occasionally?

I am really struggling with this and would appreciate any input. There is obviously something about the way BJS handles position/rotation and/or by ref/value that I aam not understanding. I have tried to simplify the PG and only update height + orientation when the box moves.
What confuses me is that if I move the box forward or backwards along its box.forward direction then box.forward changes (see the console). I would not expect this.
I cannot rotate the box. I have tried all sorts of combinations of rotation with or without quaternions. It seems that box.forward may be part of the problem. I am stumped.


Any thoughts @Cedric or @Raggar? Once I try to turn the box I cannot get it to work.

I’ve done a PG with interpolated normal so the orientation is smoothed.
You cannot interpolate Euler angles or you’ll get gimbal locks and almost complete rotation from time to time.
I also keep track of the cube rotation on Y so I can turn easily.

1 Like

Thanks @Cedric, I was able to get it working and the interpolated normal was something else I wa sgoing to implement so that has helped too.
I had tried keeping a track of rotation Y but it hadn’t worked. In fact when I used your code from the PG that worked, it didn’t work in my scene ( the “box” is an imported glb). I eventually got it to work by changing the final box.rotation.copyFrom(curRot); to simply box.rotation = curRot; and it then worked! It must be that something else was affecting the rotation and setting this changed the reference?? Anyway, it is working and just before a presentation to a client :slight_smile:
Thanks heaps.

1 Like