光线投射到 TextGeometry 的 boundingBox 而不是网格答案

【问题标题】：Raycast to boundingBox of TextGeometry rather than the mesh光线投射到 TextGeometry 的 boundingBox 而不是网格
【发布时间】：2016-02-19 04:05:03
【问题描述】：

我正在尝试将光线投射到 TextGeometry 的边界框。目前，当点击不在字母周围或字母之间的字母时，光线投射适用于 textGeometry。如果单击在文本字母/aphabets 之间，则没有对象与 intersectObjects() 相交。当点击在字母之间时，我也需要光线投射与 textGeo 对象相交。

我将 TextGeometry 定义为：

var textGeo = new THREE.TextGeometry( text, {
                    size: size,
                    height: 1,
                    font: 'helvetica'
                });

textGeo.computeBoundingBox();
var textMaterial = new THREE.MeshBasicMaterial({ color: fontColor });
var textMesh = new THREE.Mesh(textGeo, textMaterial);

在寻找解决方案之后，使用 boundingBox 似乎是最好的方法。请建议或指出如何实现这一点。关于如何做到这一点的任何想法或提示？或者是否有任何当前可用的方法。

如何使光线投射与边界框相交？

【问题讨论】：

标签： javascript three.js raycasting

【解决方案1】：

我在 Three.js 库本身中找到了解决方案。他们在 Mesh 的光线投射函数中有一个优化部分，它查看 BoundingBox 和 BoundingSphere 以确定光线是否落在外面以跳过检查相交。我为我的情况翻转了它：

var inverseMatrix = new THREE.Matrix4(), ray = new THREE.Ray();
//for example textGeo is the textGeometry
inverseMatrix.getInverse(textGeo.matrixWorld);
ray.copy(raycaster.ray).applyMatrix4(inverseMatrix);

if(textGeo.geometry.boundingBox !== null){
    if(ray.isIntersectionBox(textGeo.geometry.boundingBox) === true){
       //intersected
    }
}

【讨论】：

这看起来是我试图解决的问题的一个很好的解决方案。你能给出一个更完整的例子来说明它的使用吗？或者指向正在使用它的地方？谢谢！

【解决方案2】：

创建几何体的边界框并为 bbox 创建几何体。
创建一个 THREE.Object3D 并将边界添加为其子项（将其命名为 obbox）
将 obbox 添加到场景中。

现在，如果您与场景相交，您将首先获得 obbox 对象，因为它总是更靠近射线的原点。

【讨论】：

这是我考虑过但正在寻找不同方法的事情。由于我正在创建许多 Textgeos，因此希望避免为每个对象创建一个重复对象的开销。寻找一种可以与现有几何图形一起使用的解决方案，而不必为每个几何图形创建一个新的。
您不会创建一个重复的对象，而是创建一个非常适合光线投射的细节级别低得多的对象。所以这实际上是一个双赢的局面，因为您不需要针对 textgeos 的几何形状（可能会变得非常大）进行光线投射。您只需对平行四边形的六个面进行射线投射。
我也喜欢你的方法，但是对于我想做的场景，我发现上面的方法效果更好。感谢您的回答和 cmets，非常感谢。