Rotating an upside down custom mesh to make it straight up

Questions
1

Hi everyone. I just started using the framework and am absolutely loving it. Thanks a lot.

Also, I’m a newbie and while I Don’t understand a lot I have been able to achieve a lot of stuff due to Babylon js.

The problem I’m running into is basically this.
I’m making a custom mesh of a human face by feeding in vertices, indices, computing normal and calculating uvs as specified here :
https://doc.babylonjs.com/how_to/custom
All of this is being done in the runtime.

Then I have an arc rotate camera and a spotlight whose direction is set to the centre of bounding box of mesh.

The issue is that the mesh so formed is upside down, i.e. mouth is up and eyes are down.
How do I fix this?

Everytime I try to rotate it the mesh goes outside the canvas.

Can you please help me regarding this without a PG. I understand a PG would make stuff easy on your part but it’s not possible for me to provide it.
And all I want is a way to rotate the mesh about the centre of its bounding box in order to make the rendered mesh straight up.
For maestros who lurk here this should be too easy to answer.

Thanks

2

Have you tried the following: Rotate Around an Axis About a Point - Babylon.js Documentation ?
centerWorld of the boundingBox will provide you the pivot position.

1 Like
3

@Raggar thanks for.your response. Yes I did. Probably I’m not getting the axis correct. How do I get the axis?

4

Hmm. I don’t think it matters to be honest, as it rotates according to the parent/pivot.
Did you try pivot.rotation.x/y/z += x and what happens then?

1 Like
5

@Raggar

var pivot = new BABYLON.TransformNode("root");
pivot.position =customMesh.getBoundingInfo().boundingBox.centerWorld;

customMesh.parent = pivot;

pivot.rotate(new BABYLON.Vector3(0, 0, -1),  Math.PI/4, BABYLON.Space.WORLD);

for this the mesh again goes out of view from the camera

6 
var pivot = new BABYLON.TransformNode("root");
pivot.position =customMesh.getBoundingInfo().boundingBox.centerWorld;

customMesh.parent = pivot;

pivot.rotation.z -= Math.PI

On doing this the mesh does become straight and is inside the canvas but not in the centre of the camera

Does applying rotation not change the centre of the bounding box?

7

Try

var pivot = new BABYLON.TransformNode("root");
customMesh.parent = pivot;
pivot.position = customMesh.getBoundingInfo().boundingBox.centerWorld;
pivot.rotation.z -= Math.PI
1 Like
8

thanks man it worked.
also, it seems to me that Rotation changes mesh.position but not change the bounding box info

Is that supposed to be the desired behaviour?

9

Rotation shouldn’t change the position of the pivot.
The absolute position of the child mesh(your head), may change depending on its own pivot in relation to the pivot of the … pivot.

Changing the position After setting the parent, as I did above, is equal to using setParent(x).
Are you sure the boundingBox information isn’t altered? When are you checking the boundingBox?
You should check it the next frame, as it will have updated by then. If you need it immediately, you’ll have to call head.computeWorldMatrix(true) to forcefully and manually update it.

10

Hi @Noob007 and welcome to the forum from me. A couple of pointers for future reference that are hopefully helpful.

While providing full code in a PG is often difficult and occasionally impossible it is nearly always possible to produce one illustrating the issue. In your case the issue is producing a custom mesh that is upside down with reference to the camera. So a simple triangle would suffice eg

Then we can show example solutions that may also work for you.

  1. since you are creating a custom mesh multiply all y components by -1 and to keep normal direction for each set of three index value in indices for a tringular facet swap two.

OR
2. Invert the upVector for your camera y direction and change scene to right handed system

2 Likes