Threejs: computing the bounding box of rotated text

Question

On my scene I have a text. After I create it I rotate it to fit the right area. However, the bounding box is completely ignoring the rotation.

I've made a fiddle here: http://jsfiddle.net/paulocoelho/qMqH7/5/

If you check the output you get:

// before rotation
THREE.Vector3 {x: 28.365000000000006, y: 6.2806, z: 0.5, constructor: function, set: function…}
THREE.Vector3 {x: 0.2542, y: 0, z: 0, constructor: function, set: function…}
// after rotation
THREE.Vector3 {x: 28.365000000000006, y: 6.2806, z: 0.5, constructor: function, set: function…}
THREE.Vector3 {x: 0.2542, y: 0, z: 0, constructor: function, set: function…}

Because I am rotating 90deg on Z, i would expect to see the "after rotation boundary" as:

{x: 2.2806, y: 28.365000000000006, z: 0.5}

Is there a way to easily achieve this?

Answer 1

The geometry does not know anything about rotation. You have two options.

The first option is to rotate your geometry by applying a rotation matrix to the geometry, instead of rotating the mesh. For example,

geometry.rotateZ( Math.PI / 2 );

Now you can call geometry.computeBoundingBox() and you should see what you expect.

The second option is to use Box3.setFromObject( object ) to compute the bounding box of the mesh:

var box = new THREE.Box3().setFromObject( object );

This function computes the world-axis-aligned bounding box of an object (including its children), accounting for both the object's, and children's, world transforms.

EDIT: updated to three.js r.95