Trying to create pivot points for the gltf object but it won't work

Questions
,
1

I’m trying to load GLTF objects and change their pivot values using object traverse and geometry values. But when centered the object gets disassembled and won’t look like it anymore. Here is my code:

                   object.traverse(function(child) {
                            if (child.isMesh) {
                                child.geometry.center();
                                child.geometry.translate(0, 5, 0);
                            }
                        });

is there any way to get the exact desired pivot position of an object without changing original properties of an object loaded?
check this codepen https://codepen.io/saiviru/pen/abbWQpX
I’m trying to translate values and gltf object child elements are changing.

2

I think you should confirm a same translation for every geometry. For example, remove child.geometry.center();, just translate geometries with same value.

3

Hey, thanks for the reply.
I tried translate, it’s the same and it won’t work on all the models.
And also (0,0,0) doesn’t center on the object. Need an efficient solution that works on almost all the gltf and glb models.
Thanks.

4

Check this codepen https://codepen.io/saiviru/pen/abbWQpX and translate doesn’t work

5

Any help from anyone?
Thanks in advance.

6

I can’t see any image in that codepen.:mask:
I think you should compute the bounding box of the whole object. And then translate the geomteries by the center of the bounding box.

7

Did you create the gLTF yourself in something like Blender 2.8?
If so, maybe if you reset all transforms of the model in blender, that might help.

8

No, I haven’t created that gLTF, taken that from threejsfundamentals.org.

9

It takes some time to load I think. But, there is a gLTF object. Let me try the bounding box way.

10

By bounding box, you mean Box Helper? I couldn’t find it as any help. I get so many x , y and z values :frowning:

11

:hugs:No, it’s Box3: three.js docs

12

I used Box3 to get the center and I tried applying that center to translate but still the same issue. Updated the code in the codepen https://codepen.io/saiviru/pen/abbWQpX

13

I still can’t see any object int the codepen.:thinking:
But I would do like this(not tested) to set the pivot of an object to (0,0,0):

        var bbox = new THREE.Box3();
        var cent = new THREE.Vector3();
        bbox.setFromObject(object);
        bbox.getCenter(cent);

        console.log("actual center ", cent);
        object.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.geometry.translate(-cent.x, -cent.y, -cent.z);
            }
        });
14

it is still the same, everything flies in the air on applying translate. Check the original GLTF object here, https://threejsfundamentals.org/threejs/resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf try to replicate the code locally and check. Please help me with this.

15

I test it and find that it really flies.:persevere: I have to admit that I have no experience on gltf loading. But if anyone else wants to help and can’t see any object in saiviru's codepen, please check this: https://codepen.io/toniff/pen/MWWvKRN

16

Can anyone please try to help me on this?

17

@saiviru
Hmm! I’m sure everybody that can help are also busy with other stuffs, but it’s pretty easy if you just remove all the parent objects and attach it to a singular pivotMesh, and move it instead:

Here is an updated playground:

https://codepen.io/marshall_hunts/pen/PooEBNB?editors=0010

1 Like
18

Hey, thanks for taking time and replying, I tried adding controls to pivotMesh but I get transform controls added at one of the corners of the object not at the center.