Correcting orientation after using lookAt method

My 3D math skills suck - yeah, I know this is a problem when working with 3D graphics.
Can someone with better math than me help to fix this PG please.

I want the cubes evenly spaced around the sphere, and I want the cube normals aligned to the sphere normals (i.e. boxes “look at” the center of the sphere), and this part is working just fine.

The problem is that box.lookAt(BABYLON.Vector3.Zero()) leaves the boxes rotated around their local Y-Axis. How to I rotate the boxes so that they are still “looking at” the center of the sphere, but the text drawn on the box is parallel to the equator?

This will be really hard to help without a repro in the playground to really get the issue.

I think the PG shows it very clearly. How can I explain better?

After the line that says box.lookAt(BABYLON.Vector3.Zero()); I need to add another line something like box.rotation.z = ????;. I want to know how to write a formula on the right hand side that will make the text on all of the boxes have the correct orientation. Right now some of the text is upside down, vertical, or whatever angle.

Oh I missed the PG was a linnnnnk :slight_smile: let me look into it :slight_smile:

They actually all seem align to the equator if you rotate around like here:

I am not exactly sure what the intented behavior is ?

Yes, the bottom row look like they have the correct orientation more or less, and the bottom half of the middle column too, but all of the other cubes are at various angles.

I want the text to read horizontally for all of the cubes by applying a rotation.z value to each cube. I just don’t know how to calculate the correct value of z for each cube so that all of the cubes are the right way around.

I used the Inspector tool to manually set the z rotation on the cubes near the center so that you can see what it should look like. I just did this by eye, so the z rotations are not exactly right, but it should give you the idea.

Another way to look at this issue is to comment out the line that says box.lookAt(BABYLON.Vector3.Zero()); and now you will see that the text on all of the cubes is facing the same way. The lookAt function is correctly pointing the cubes towards the origin, but also making text on the cubes have all different orientations and I need to correct for this.

I guess it is because you do it at the pole: https://www.babylonjs-playground.com/#6H1SAC#10

Also you might benefit from our Gui3d which does that: Babylon 3D GUI | Babylon.js Documentation

This PG is just an illustration of the problem, I am not actually trying to place cubes on a sphere, so the 3D GUI is not helpful in this case. I only wrote in the cubes so that you could see their orientation.

Your new version of the PG has all of the cubes with the same orientation, but rotated 90 degrees instead of all different angles. Since you changed a whole lot of things in the PG, I can’t figure out which change actually changed the behavior of the lookAt function.

The only one impacting it is the fact that the position is not around the pole when doing the look at as the up vector is considered along the positive y axis hence the distribution you are seeing here https://www.babylonjs-playground.com/#6H1SAC#11

I had a ton of problems with the arc rotate camera, and the solution was to base my map around the pole. Changing that in my game now to reorient everything around different axes would be lots of days work, and would bring back all of the camera issues I had before.

Manually setting the z rotation of each cube does fix the orientation issue, I really just need to find the correct formula for calculating the z rotation value.

You could easily adapt the full lookat taking an orientation: https://www.babylonjs-playground.com/#6H1SAC#12

Thanks. The BABYLON.Matrix.LookAtRH method looks promising. I will try that against my original PG centered around the pole and see if I can make it work.

Actually I provided the wrong PG, the LH method is more adapted: https://www.babylonjs-playground.com/#6H1SAC#14 so the text orientation is the correct vector and not the opposite

1 Like

So, I applied your technique to my original PG (which represents the situation I have in my game) and it’s very close but not quite right. See https://www.babylonjs-playground.com/#6H1SAC#15 where the text seems to be oriented correctly but the cubes do not all “look at” the target.

Nevermind, I failed to copy this line lookAt = lookAt.invert(); It is perfect now.
The final version is https://www.babylonjs-playground.com/#6H1SAC#16
Thank you so much for your help.

I implemented this solution in my game, and discovered that the problem is not quite solved.
You can see the issue by switching cubes for cones (https://www.babylonjs-playground.com/#6H1SAC#17).

With the lookAt call commented out it looks like this:

But with lookAt included the cones are all rotated like this:

This issue wasn’t apparent when using cubes.