Unit of measurement.Same scale for all 3dmodels in Three.js Scene,1*1.Models size are huge

Questions
1

Hi
When I add different 3dmodels in my threejs scene,theire size are different
So,I want to match them with a unit,I mean when I add 11 scale cube as a geometry I want to change other 3dmodels that I upload like this cube
For example; car 11 should be like cube 11
But now the scales number are the same but they are not the same in real scene
Some models are huge but with scale 11*1 ,

How can I match them with the same Unit of measurement?

2

I face similar issue, in fact it is quite common when dealing with rigged/animated objects:
files with same scale/unit, suddenly up/down scaled by 10

Only way (as far I know) is to manually change scaling of the culprits.
mesh.scale.set(0.1, 0.1, 0.1);

3

But 0.10.10.1 all imported models are not the same

4

you just have to rescale it in threejs with mesh.scale(), even if the scale from 3d software such as 3ds max or blender is in m or mm units, sometimes when u load it in threejs the scale changes when u used gltf as a mesh or gltf.scene, the scale is different, it drops down to mm.

5

You can find the bounding box min and max for each model, add the inverse of min.x to max.x and divide 1 by this number times by 10 for x y z scale

6

Yes
Thanks ,I found a good solution like this you said:
(It is worked completely)

A cube as a pattern:

let mat = new THREE.MeshLambertMaterial({
            color: 0xff0000
        });
        let boxGeom = new THREE.BoxGeometry(1, 1, 1);
        let cube = new THREE.Mesh(boxGeom, mat);
        cube.name = 'newCUBE';
        cube.position.set(3, 1, 0)
        cube.scale.set(1, 1, 1);
        cube.material.fog = false
        // scene.current.add(cube);
        mainBounds = new THREE.Box3().setFromObject(cube);
        console.log('main is >>>>>>>>', mainBounds);

In gltfLoader:

  let bbox = new THREE.Box3().setFromObject(gltf.scene);
                let helper = new THREE.Box3Helper(bbox, new THREE.Color(0xFF8551));
                let newBounds = new THREE.Box3().setFromObject(gltf.scene);
                console.log('newBounds is >>>>>>>>', newBounds);

And then when you want to add your model tho scene :

    let lengthSceneBounds = {
                    x: Math.abs(mainBounds.max.x - mainBounds.min.x),
                    y: Math.abs(mainBounds.max.y - mainBounds.min.y),
                    z: Math.abs(mainBounds.max.z - mainBounds.min.z),
                };

                // Calculate side lengths of glb-model bounding box
                let lengthMeshBounds = {
                    x: Math.abs(newBounds.max.x - newBounds.min.x),
                    y: Math.abs(newBounds.max.y - newBounds.min.y),
                    z: Math.abs(newBounds.max.z - newBounds.min.z),
                };

                // Calculate length ratios
                let lengthRatios = [
                    (lengthSceneBounds.x / lengthMeshBounds.x),
                    (lengthSceneBounds.y / lengthMeshBounds.y),
                    (lengthSceneBounds.z / lengthMeshBounds.z),
                ];

                // Select smallest ratio in order to contain the model within the scene
                let minRatio = Math.min(...lengthRatios);

                // If you need some padding on the sides
                let padding = 0;
                minRatio -= padding;

                // Use smallest ratio to scale the model
                group.scale.set(minRatio, minRatio, minRatio);
1 Like