I am currently utilizing threejs to display various models in gltf/glb format. These models vary in size, with some being large and others small. My goal is to standardize the size of all these models.
If I were to use mesh.scale(), it would only scale the object relative to its own size. Is there a method to achieve this without manually calculating the scale for each individual model?
UPDATE:
Below is the code snippet:
function loadModels(points) {
// loader
const loader = new GLTFLoader();
const dl = new DRACOLoader();
dl.setDecoderPath("/scripts/decoder/");
loader.setDRACOLoader(dl);
let lengthRatios;
const meshes = [];
for (let i = 0; i < store.length; i++) {
loader.load(
store[i].model,
(gltf) => {
const mesh = gltf.scene;
const meshBounds = new THREE.Box3().setFromObject(mesh);
// Calculate side lengths of model1
const lengthMeshBounds = {
x: Math.abs(meshBounds.max.x - meshBounds.min.x),
y: Math.abs(meshBounds.max.y - meshBounds.min.y),
z: Math.abs(meshBounds.max.z - meshBounds.min.z),
};
if (lengthRatios) {
lengthRatios = [
lengthRatios[0] / lengthMeshBounds.x,
lengthRatios[1] / lengthMeshBounds.y,
lengthRatios[2] / lengthMeshBounds.z,
];
} else {
lengthRatios = [
lengthMeshBounds.x,
lengthMeshBounds.y,
lengthMeshBounds.z,
];
}
meshes.push(mesh);
if (meshes.length == store.length) {
addModels();
}
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
(error) => {
console.log("An error happened");
}
);
}
function addModels() {
// Select smallest ratio in order to contain the models within the scene
const minRation = Math.min(...lengthRatios);
for (let i = 0; i < meshes.length; i++) {
// Use smallest ratio to scale the model
meshes[i].scale.set(minRation, minRation, minRation);
// position the model/mesh
meshes[i].position.set(...points[i]);
// add it to the scene
scene.add(meshes[i]);
}
}
}