Threejs:计算旋转文本的边界框 [英] Threejs: computing the bounding box of rotated text

问题描述

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

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.

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

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

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

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?

推荐答案

geometry 对旋转一无所知.你有两个选择.

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 );

现在您可以调用 geometry.computeBoundingBox() 并且您应该会看到您所期望的.

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

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

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.

更新为three.js r.95

updated to three.js r.95

这篇关于Threejs:计算旋转文本的边界框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！