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

avg*_*avg 5 javascript three.js raycasting

我正在尝试将光线投射到 TextGeometry 的 boundingBox。当前,当单击不在字母周围或字母之间的字母时,光线投射适用于 textGeometry。如果单击位于文本字母/字母表之间,则没有对象与 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);
Run Code Online (Sandbox Code Playgroud)

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

我将如何使光线投射与边界框相交?

avg*_*avg 5

我在 Three.js 库中找到了一个解决方案。他们在 Mesh 的 raycast 函数中有一个优化部分,它查看 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
    }
}
Run Code Online (Sandbox Code Playgroud)

  • 对于我正在尝试解决的问题,这看起来是一个很好的解决方案。你能举一个更完整的例子来说明它的用途吗?或者指向正在使用它的地方?谢谢! (2认同)

gai*_*tat 2

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

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