Three.js Model Sizing Issue with Rotated Blender Models

The issue you're experiencing is related to how bounding boxes are calculated for rotated models. When a model is rotated in Blender before export, the bounding box calculation in Three.js is still based on the axis-aligned bounding box (AABB) of the model in its current orientation.

Why This Happens

When you rotate a model in Blender and then export it, the rotation becomes part of the model's geometry. The Three.js Box3 class calculates an axis-aligned bounding box, which means it will create a box that encompasses all vertices of your model aligned with the world axes, not with the model's local orientation.

Solution Approaches

Here are a few approaches to solve this issue:

1. Use Object3D.updateMatrixWorld() before computing the bounding box

Make sure the model's matrix is updated before calculating the bounding box:

JAVASCRIPTCopied
model.updateMatrixWorld(true);
const box = new THREE.Box3().setFromObject(model);

2. Reset rotation in Blender before export

The simplest solution is to apply all transformations in Blender before exporting:

1. Select your model in Blender
2. Press Ctrl+A
3. Choose "All Transforms" to apply rotation, scale, and location
4. Export the model

3. Create an oriented bounding box (OBB)

If you need a tighter fit, you might want to implement an oriented bounding box instead of an axis-aligned one. This is more complex but would give you a box that's oriented to match your model's orientation.

4. Use a different computation method

Instead of using the built-in bounding box calculation, you could compute the dimensions by analyzing the model's geometry directly:

JAVASCRIPTCopied
function getModelDimensions(model) {
  let minX = Infinity, minY = Infinity, minZ = Infinity;
  let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
  
  model.traverse(function(child) {
    if (child.isMesh) {
      child.geometry.computeBoundingBox();
      const box = child.geometry.boundingBox.clone();
      box.applyMatrix4(child.matrixWorld);
      
      minX = Math.min(minX, box.min.x);
      minY = Math.min(minY, box.min.y);
      minZ = Math.min(minZ, box.min.z);
      
      maxX = Math.max(maxX, box.max.x);
      maxY = Math.max(maxY, box.max.y);
      maxZ = Math.max(maxZ, box.max.z);
    }
  });
  
  return {
    size: new THREE.Vector3(maxX - minX, maxY - minY, maxZ - minZ),
    center: new THREE.Vector3((minX + maxX) / 2, (minY + maxY) / 2, (minZ + maxZ) / 2)
  };
}

The most reliable solution is to apply transformations in Blender before export, as this ensures the model's geometry is in its final form without any hidden transformations that might affect bounding box calculations.