Threejs:计算旋转文本的边界框
Threejs: computing the bounding box of rotated text
在我的场景中,我有一个文本。在我创建它之后,我旋转它以适合正确的区域。但是,边界框完全忽略了旋转。
我在这里做了一把小提琴: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}
有没有一种方法可以轻松实现这一点?
geometry
对旋转一无所知。你有两个选择。
第一个选项是通过将旋转矩阵应用于几何体而不是旋转网格来旋转几何体。例如,
geometry.rotateZ( Math.PI / 2 );
现在您可以调用geometry.computeBoundingBox()
,您应该看到您所期望的内容。
第二个选项是使用Box3.setFromObject( object )
来计算网格的边界框:
var box = new THREE.Box3().setFromObject( object );
此函数计算对象(包括其子对象)的世界轴对齐边界框,同时考虑对象和子对象的世界变换。
EDIT:更新为three.js r.95
相关文章:
- 如何使用jquery在填充自动完成的值后使文本框只读
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 用程序搜索JQuery数据表中的文本
- jQuery匹配JSON对象的部分文本
- onkeyup无法动态创建多个文本区域
- 如何在下面的ES6循环中获得前面的文本
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 借助asp.net验证或java脚本对多个文本进行验证
- 无法在ajaxStart中更改跨度文本
- 高亮显示时编辑文本大小和颜色
- 为什么可以't我得到了这个d3.js文本的边界框
- 如何在D3 SVG上绘制文本,如果它's的边界框符合某些标准
- 使用引导材料设计为文本区域的所有边界添加渐变
- Threejs:计算旋转文本的边界框
- SVG在Javascript中获取文本字符边界
- 如何根据用户在文本框中输入的城市在谷歌地图上给出城市边界
- 边界框不显示文本,填充框不正确显示
- IE6文本区域边界聚焦错误