GLTF Loader: resizing importet models to fit the current scene

Questions
, ,
1

Hello, I am trying to import GLTF models, but the problem is, that after importing the models do not fit the scene. Some are very big (700 * 700 * 700) and have to be reduced in size, some are very tiny (0.5 * 0.5 * 0.5). How can I check with JS how big a imported model is and resize the model to given parameters? For example, I want to import a Euro Palle with the sizes of 1.2 * 0.8 * 0.144 from a GLTF file and show 3 cubes (cardboard boxes), which i create with THREE.js.
Thanks for your help, I already searched google for many hours but didn´t find a working solution :’(

2

theory
make Box3()

use box3.setFromObject(model) to calculate bounding box of model

use box3.getSize() to get the size as x,y z

find the biggest side

set the new scale by using model.scale.setScalar(1/biggest size)

this should scale the model to be 1 unit in size

1 Like
3

wow, thanks for the quick replay! And it works :slight_smile:

here is my source code, for all people which are interrested:

var palette; //used to add the cardboard boxes => palette.add(box) in the function, which creates the boxes

export function createPalette(filepath) {
const loader = new GLTFLoader()
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath(’/3DModels/Draco/’);
loader.setDRACOLoader(dracoLoader);
loader.load(
filepath,
function (gltf) {
let desiredScale = 1.2; //the length of the palette
let box = new THREE.Box3();
box.setFromObject(gltf.scene);
let size = new THREE.Vector3();
box.getSize(size);

        let maxSize = 0
        if (size.x >= size.z && size.x >= size.y) {
            maxSize = size.x
        }
        else if (size.y >= size.x && size.y >= size.z) {
            maxSize = size.y
        }
        else if (size.z >= size.x && size.z >= size.y) {
            maxSize = size.z
        }

        gltf.scene.scale.setScalar(1 / (maxSize / desiredScale ))
        palette = gltf.scene
        scene.add(gltf.scene)
    },
    function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    function (error) {
        console.log('An error happened creating a palette');
        console.log(error)
    }
)

}

1 Like