javascript - 三个js : computing the bounding box of rotated text

Question

在我的场景中，我有一段文字。创建它之后，我旋转它以适合正确的区域。然而，边界框完全忽略了旋转。

我在这里做了一个 fiddle :http://jsfiddle.net/paulocoelho/qMqH7/5/

如果你检查你得到的输出:

// 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…}

因为我在 Z 轴上旋转 90 度，所以我希望看到“旋转后边界”为:

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

有没有办法轻松实现这一点？

Answer 1

几何 对旋转一无所知。您有两个选择。

第一个选项是通过对几何体应用旋转矩阵而不是旋转网格来旋转几何体。例如，

geometry.rotateZ( Math.PI / 2 );

现在您可以调用 geometry.computeBoundingBox()，您应该会看到预期的结果。

第二个选项是使用 Box3.setFromObject( object ) 来计算网格的边界框:

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

此函数计算对象(包括其子项)的世界轴对齐边界框，同时考虑对象和子项的世界变换。

编辑:更新到 three.js r.95