Different size in Blender and Three.js (Dimension)

Questions
, , , , , , ,
1

Hi guys. .I have a 3D model in Three.js and dimension of my floor is :slight_smile:

dimension in blender >>> x: 6.3metr , y:0metr , z: 6.71metr

Screenshot 2024-09-30 at 10.18.27 AM
Screenshot 2024-09-30 at 10.18.27 AM1279Ă—739 70.2 KB

In three.js I use this code:

 // Calculate the mesh size along the desired axes
        const meshSize = new THREE.Vector3();
        selectedObject.geometry.computeBoundingBox();
        selectedObject.geometry.boundingBox.getSize(meshSize);

        console.log('SIZE 2  my selectedObject meter', meshSize)

But result is this :slight_smile:

Vector3 {x: 12.60858678817749, y: 13.412331104278564, z: 0}

How Can I match them ? I need real size dimensions in Three.js

2

Does this work for you?

Blender.x = Three.x / 2
Blender.y = Three.z / 2
Blender.z = Three.y / 2

3

Note that this is only the size of the geometry in local coordinate space. If the mesh attached to that geometry has a scale, or any parent of the geometry has a scale, then this alters the in-scene size of the geometry. Because you’re seeing dimensions scaled 2x, it sounds like the mesh or one of its parents may contain a 2x scale?

About the axes, Blender uses +Z for up, three.js uses +Y.

3 Likes
4

I have fixed this by applying all transforms in the blender.now I have the same sizes in three.js.

Screenshot 2024-10-01 at 3.35.03 PM
Screenshot 2024-10-01 at 3.35.03 PM1402Ă—1192 112 KB

But axes different again.
I have handled by this way :slight_smile:
result looks good,but I am not sure

 // Calculate the mesh size along the desired axes
        const meshSize = new THREE.Vector3();
        selectedObject.geometry.computeBoundingBox();
        selectedObject.geometry.boundingBox.getSize(meshSize);

        const textureLoader2 = new THREE.TextureLoader();
        const textureـbaseColor2 = await 
         textureLoader2.loadAsync(item.baseColor);
        textureـbaseColor2.wrapS = THREE.RepeatWrapping;
        textureـbaseColor2.wrapT = THREE.RepeatWrapping;

        let width2 = textureـbaseColor2.image.width
        let height2 = textureـbaseColor2.image.height;
        let aspecRatio2 = width2 / height2;

        let repeatY2;
        let mainMin = Math.min(meshSize.x, meshSize.y, meshSize.z)
        if (mainMin === meshSize.x) {
            meshSize.x = meshSize.z;
            meshSize.z = mainMin
        }
        let otherMax2 = Math.max(meshSize.y, meshSize.z)
        if (otherMax2 === meshSize.y) {
            repeatY2 = meshSize.y / (height2 / aspecRatio2 * 0.0002645833);
        }
        if (otherMax2 === meshSize.z) {
            repeatY2 = meshSize.z / (height2 / aspecRatio2 * 0.0002645833);
        }

     const repeatX2 = meshSize.x / (width2 / aspecRatio2 * 0.0002645833)

        textureـbaseColor2.repeat.set(repeatX2, repeatY2);
        textureـbaseColor2.colorSpace = THREE.SRGBColorSpace;
5

all of the scales are 1,1,1
and in gltf export blender I set Y+ up.