Centering a glTF geometry

Questions
,
1

I’m trying to use the geometry.center() method to center my gltf model but can’t seem to get it right.
Here’s the link to my fiddle

The .center() method works when using my .js model but not the .glb version of my car model.

On line 272 I’m using
var loader = new THREE.GLTFLoader();
loader.load(“https://raw.githubusercontent.com/baronwatts/models/master/lego-lamb-racer.glb”, function(gltf) {

   gltf.scene.traverse( function( node ) {
      if ( node instanceof THREE.Mesh ) { 
        node.castShadow = true; 
        node.material.side = THREE.DoubleSide;
        node.geometry.center();
      }
    });

  var model = gltf.scene;
  model.scale.set(6, 6, 6);
  model.rotateY(Math.PI / 2);
  body.add(model);
});

Not sure if I’m using it right in the traverse method.

2

Centering an object with BufferGeometry.center() does only center the geometry. It does not work if the object or its ancestors are transformed. Hence, it’s better to use the following pattern:

const box = new THREE.Box3().setFromObject( gltf.scene );
const center = box.getCenter( new THREE.Vector3() );

gltf.scene.position.x += ( gltf.scene.position.x - center.x );
gltf.scene.position.y += ( gltf.scene.position.y - center.y );
gltf.scene.position.z += ( gltf.scene.position.z - center.z );

As you can see, you compute the bounding box of the entire scene and then offset its origin according to the AABB’s center point.

3 Likes
3

So would I replace the new THREE.Vector3() with the position of the parent that my model sits in? I tried but still can’t seem to center it.

4

No, you just have to pass a vector to Box3.getCenter() since the method expects the result object as a parameter.

Um, this method should work since it is actually used in the following viewer: https://gltf-viewer.donmccurdy.com/

Is your object centered when you drag it into the viewer? Besides, check out the code in this post: Model not casting/receiving shadows - #9 by Mugen87

5

I updated the fiddle

I centered the wheel inside the cylinder wireframe and the lego inside the box wireframe. I’m just trying to do the same for the car model.

On line 220 I added the centering code you provided but it’s still not centering within the box wirefame.