How can I move position gizmo axis?

Hi everyone , I’m a freshman of babylon.js .
I have a question and I hope someone can help me .

My story:

I use SceneLoader.ImportMesh to import a stl file and it can be loaded successfully .
Then I add a GizmoManager to my app .
I can see position gizmo axis on screen like the top one of this photo:


I hope I can move the gizmo axis to the center of loaded stl file just like bottom one of last photo:

So , how can I move the position gizmo axis ?

Thank for everyone’s help.

1 Like

Hiya TV5, welcome to the forum… good to have you with us.

We REALLY like BabylonJS Playground demos that reproduce the problem… so we helpers can team-up and be better helpers.

So, I found one, already created by another… https://www.babylonjs-playground.com/#13C4ZS#2

In lines 23-25, I put a little Y-axis animator on the sword model… to show that its origin or pivotPoint is not positioned in the center of the mesh vertex points. I predict that if YOU rotate your mesh in a similar way, it would ALSO make a big circle like our sword is doing.

If the pivotPoint/origin were located in the center of the mesh’s “volume”, the sword would be spinning more “around itself” and not make such a big circle.

These origins/pivots are created in the modeling software, and, like the sword in the demo, it is common that they arrive in BJS scenes… with an offset origin/pivot.

Now, I’m a beginner at re-centering pivotPoints on imported mesh… but there are other experts nearby that can help, and so can this section of BabylonJS docs, perhaps.

You can click on the sword, and see the GizmoManager activate… at the CURRENT origin/pivot-point of the mesh… which is not centered on mesh volume-area whatsoever.

I will let you study/test the pivots documentation link above, and/or wait for smarter people than I… to help “center-up” the origin/pivotPoint… with the mesh’s volume. I am not very good-at doing that… so I will watch and learn, too. I think we use setPivotMatrix() for that, but I always struggle with determining the parameters (how much to move it, and in which directions)… for setPivotMatrix and setPivotPoint.

I hope I have been helpful.

2 Likes

Hi again. There is ANOTHER possibility. Maybe the pivot is fine, but maybe newMeshes[0] is a PARENT of newMeshes[1]… and newMeshes[1] is positioned AWAY FROM its parent… making it APPEAR that we have an offset pivot-point.

The playground’s “inspector” feature helps me see parenting easily. Many mesh arrive with a “root” node… a master parent… invisible in the scene, but still there.

https://www.babylonjs-playground.com/#13C4ZS#3

That was the case with our sword. in Lines 17-19, I worked hard to remove rotations and positioning… hoping the sword would re-center. It didn’t.

But, when I went to work-on newMeshes[1] in lines 22-25, things started squaring-up nicely. newMeshes[1] (the non-“root” part of the model) had a .position of x: -256.3781, y: 190.2577, z: -214.0378… and its invisible parent “root” was at 0,0,0. That’s no good. :slight_smile:

So, there we go. No need for a setPivotMatrix/Point. In this case… root/parent was at home, but its child… was across the street at the neighbor’s house. :slight_smile:

Me I replace the pivot for the gizmo this way when I need.

var oldPos = mesh.position.clone();
var oldPivotTranslation = mesh.getPivotMatrix().getTranslation();
mesh.position.set(-oldPivotTranslation.x, -oldPivotTranslation.y, -oldPivotTranslation.z);        
mesh.setPivotMatrix(BABYLON.Matrix.Translation(1.0, 1.0, 1.0), false);
mesh.bakeCurrentTransformIntoVertices();
mesh.position.copyFrom(oldPos);

I hope it helps.

1 Like

Hi Wingnut, thank for your reply.
I will try to use BabylonJS Playground in the future.

I read your content, and I try to do something what you guide me to do.
But I didn’t get what I wanted . I will strive to refenrence other documentation.

I can simplify this question , I don’t need to move it exactly to the center of the mesh . I only need a funtion to move it , I have data about center of mesh . If I know this function , I can move it to the center of mesh volume.

Thank for your help in the end , if I have other idea about this question , I will contact you , thank you.

1 Like

Hi Dad72 . Thank for your reply.
I try your code , but it doesn’t seem to good.

I think , the difficulty of my question is that stl files contain position information and these origins/pivots are created in the modeling software. So I can’t change it easy.

Thank for your help in the end , if I have other idea about this question , I will contact you , thank you.

You must change the translation values ​​for this to work properly for your case.

BABYLON.Matrix.Translation(1.0, 1.0, 1.0)

Whatever the pivot create with your modeling software, it can be modify with my code provided.

@Dad72 … do you know of a way to “re-center” any offset pivot/origin, no matter what amount of offset?

TV5 might load many modeled-by-others mesh, and each mesh could have different offsets.

I wish/hope we have a mesh.setPivotToBoundsCenter() or something “universal” like that. :slight_smile: Perhaps not possible. (I have SO MUCH to learn - it never ends!)

That’s exactly what my code does, no? At home it works perfectly I’ll try PG run in a moment

ahh, ok, sorry. I didn’t test it… it looked complicated… gave me a little headache. :slight_smile:

When you said that, I thought you were saying that TV5 needed to know the amount of offset for each imported mesh. I misunderstood.

Note: I think you have extra “)” in 4th line of your previous code-paste.

Yes I just saw him. I have to correct my post.

The problem comes from the design of the model, it will not work whatever the method.

I do not know how the template was designed. The object should be merged directly into the modeling software, and then correctly replace the pivot.

When I try with another model, it works perfectly well:
https://www.babylonjs-playground.com/#13C4ZS#4

1 Like

Best example here:
https://www.babylonjs-playground.com/#13C4ZS#5

@Wingnut @Dad72

Hi everyone !

I am here again with my first PG demo !
https://www.babylonjs-playground.com/#LLL145#2

It import my mesh : tooth.stl and gingiva.stl .

I only need replace the pivot of Tooth . Gingiva is used for contrast with Tooth’s position (it also can be delete)

I read Dad72’s code seriously , I think it is no problem.
Then I copy it and show it in PG demo .

But as you can see , there’re some unnecessary movements .

In my opinion , maybe because it’s offset ?

I don’t have any definite idea , just like Wingnut said , I have so much to learn .
I will attempt to solve this question industriously.

I think it’s a bug or it’s not yet supported by stl files. (The Gizmo does not seem to be updated correctly in the .stl files. The modification of the pivot moves the object and the bounding box, I suppose that it is a bug)

My code should work, it works with .babylon files.

Why not change the pivot directly in the modeling software instead, or export .babylon

Hey @TremblingV5.
I found a workaround.
https://www.babylonjs-playground.com/#LLL145#8 - line 21

Hi MarianG!

I read your code but I think it doesn’t follow my mind.
This is a PG demo , some code copy from your code:
https://www.babylonjs-playground.com/#LLL145#9

As we can see , the Tooth was moved to the center of the WORLD .
But I hope tooth should be immobile , only move pivot .

Thank for your reply !

Hi Dad72!
I know it .

The stl files were provided by others , I can’t change it easily. But it still a possible method .
In addition , I will try to export a .babylon file.

Thank for your reply !

You can reposition them anytime
https://www.babylonjs-playground.com/#LLL145#10

1 Like

Very thankful !

I’m careless , I didn’t think of repositioning it .

THANK YOU !!!

When I solve this question after using your code , I jumped from my chair !

1 Like