How to scale a GLB scene preserving animations

Questions
1

I have a GLB file containing a scene with a fox running. I need to load the glb file and scale it to 1.0

I am using this code:

const TARGET_SIZE = 1.0;

export const scaleGltf = (gltf) => {
    // Calculate initial bounding box
    const mesh = gltf.scene;
    const boundingBox = new THREE.Box3().setFromObject(mesh);
    const size = new THREE.Vector3();
    boundingBox.getSize(size);
    console.log('Initial GLB size:', {
        width: size.x,
        height: size.y,
        depth: size.z
    });

    // Get the largest dimension
    const maxDimension = Math.max(size.x, size.y, size.z);

    // Scale to fit in a 1x1x1 bounding box
    const scale = TARGET_SIZE / maxDimension;

    // Scale the geometries directly while preserving the hierarchy
    mesh.traverse((child) => {
        if (child.isMesh && child.geometry) {
            // Scale the geometry directly
            child.geometry.scale(scale, scale, scale);
        }
    });

    // Reset the scene scale to 1 (since we scaled the geometries)
    mesh.scale.set(1, 1, 1);
    return gltf;
}

But when I play the animation, the animations are completely out of scale.

2

Without a demo this is just a guess. Scaling an object with subobjects is done by scaling only the top object. The scaling is relayed down the internal objects automatically, because this is how matrices work at low level. Also, always prefer to scale the mesh, not the geometry (unless you have very specific reason to do it). Namely, try this:

mesh.scale.set(scale, scale, scale);

or if you really need to scale internal objects separately from the top object, then this:

mesh.traverse((child) => {
        if (child.isMesh ) {
            child.scale.set(scale, scale, scale);
        }
    });

Edit:

Left - a large object; middle - scale to 1 via parent scale; right - if you need the parent to have scale 1, just wrap it one more level:

image
image660×258 8.52 KB

3

Thanks @PavelBoytchev for your reply. Yes, setting the mesh scale to 1, with

mesh.scale.set(1, 1, 1);

preserves the animation, but doing so the object is set to it’s original size, that in my case is:
{ width: 0.3353704586625099, height: 0.36163274192949757, depth: 0.2816067337989807 }
​

What I want to to is to scale the object so that it is enclosed in a bounding box of 1.

And then set this new size as that one with scale = 1.

I need this because later I need to scale this object and a sphere, from 10 to 150, and they both have to occupy the same space. I need to uniform the scale of my objects

4

This is what I ended up with:

When I import the model, I save the scale used to scale the model so that it fits in a 1x1x1 bounding box.

export const scaleGltf = (gltf) => {
    // Calculate initial bounding box
    const mesh = gltf.scene;
    const boundingBox = new THREE.Box3().setFromObject(mesh);
    const size = new THREE.Vector3();
    boundingBox.getSize(size);


    const maxDimension = Math.max(size.x, size.y, size.z);

    const scale = TARGET_SIZE / maxDimension;

    mesh.scale.set(scale, scale, scale);
    mesh.userData.appliedScale = scale;
    mesh.updateWorldMatrix(true);

    return gltf;
}

Then, when in a slider I need to set the size of my objects (sphere with a radius of 0.5, cube with a side of 1 and imported models), i use this function:

export const applyScale = (mesh, scale) => {
    if (mesh.userData.appliedScale) {
        mesh.scale.set(mesh.userData.appliedScale, mesh.userData.appliedScale, mesh.userData.appliedScale);
    } else {
        mesh.scale.set(1, 1, 1);
    }
    mesh.scale.multiplyScalar(scale);
    mesh.updateMatrixWorld(true);
}