How to recenter loaded model on the scene

Questions
1

Hi! I’m allowing users to add their object to the scene within a defined area. I don’t have any control on how user builds their models and how they center it in Blender, but I want to scale it to fit the area I provide them and put the model to the center of the area.

I managed to calculate the scale and resize the model using Box3(). however I still can’t recenter it to the middle of the scene.
Here is an example:

Users model (Not centered in blender)

image
image681×520 20.6 KB

The area and the users model once loaded as glb file.
As you may see the model has a correct scale however it’s shifted to the top. How can I recenter it?
image

Here is my code so far

      const objectBox = new THREE.Box3().setFromObject(element);
      const objectWidth = objectBox.max.x - objectBox.min.x;
      const objectHeight = objectBox.max.z - objectBox.min.z;

      const squareBox = new THREE.Box3().setFromObject(square.placeholder);
      const squareWidth = squareBox.max.x - squareBox.min.x;
      const squareHeight = squareBox.max.z - squareBox.min.z;
      
      const newScale = calculateScale({ // this not important - just a function that calculates the scale
        width: objectWidth,
        height: objectHeight,
        currentScale: 10,
      }, { width: squareWidth, height: squareHeight });

      element.scale.set(newScale/2, newScale/2, newScale/2)

P.S here is another example of a model that was perfectly centered in Blender and it appear just right on my area
image

2

Maybe this will help you?

From the Collection of examples from discourse.threejs.org

LoadGLTFmove

BeginnerExample step 3

4

Hi!

You can center a model by calling the center() method on its geometry.

E.g.

gltf.scene.children[0].geometry.center();