Applying correct scale after a rotation

Questions
1

Hi there!

I’m having a hard time with an issue I’m trying to solve with threejs, and I hope anyone can point me in the right directions. I’m no 3D expert so maybe it’s just a simple thing.
I’m using the latest threejs version, together with the TransformControls.js component (from the examples), and I’m trying to apply the correct scale to an object after it has been rotated.
To be more specific on the problem, I’m trying to do a “scale to max” of an object on top of a platform with a predefined size of X, Y and Z, so that the object scales to the maximum possible size without being out of bounds of the platform. Doing that without the object being rotated is pretty easy. The problem is if the object was already rotated previously I can’t figure out how to apply the correct scale, because the object axis stay the same even after the rotation. Basically I would like to rotate the object but maintain the axis always fixed in relation to the platform and not the object itself…

thanks in advance

1 Like
2

I’m not sure this works but you could calculate the AABB for your rotated object, scale this AABB to your predefined size and then apply this scale to your original object. Use THREE.Box3 to calculate the bounding box for a given object.

1 Like
3

Excuse me for my ignorance, but what is an AABB? Can you give an example? Thanks!

4

It means axis-aligned bounding box. Google will provide many search results for this term :wink:

5

I’ve searched around, and couldn’t find any example of how to do it with threejs…at the moment I’m already calculating the the “regular” bounding box for the object using THREE.Box3().setFromObject( object );
What I would like to do is to change the axis system of the object based on the executed rotation, assuming it’s possible…

6

Interesting.
I ended up with that concept: https://jsfiddle.net/prisoner849/rbek42gL/
I’m not sure that that approach is correct though.

1 Like
7

Thanks, with your code I finally manage to adapt it to my situation and reach the solution. Something like this:

var printAreaSize = new THREE.Vector3(bedWidth, bedDepth, bedHeight);

var ratioSize = new THREE.Vector3();

var tempBox = new THREE.Box3().setFromObject( selectedObject );
ratioSize.copy(printAreaSize).divide(tempBox.getSize());

var scale = Math.min(ratioSize.x, Math.min (ratioSize.y, ratioSize.z));

var newScale = new THREE.Vector3(scale, scale, scale);

selectedObject.scale.multiply(newScale);
transformControls.update();
 // Centers the model based on the current bounding box and places it on the platform (Z axis)        
this.centerModelBBox(selectedObject);