Raycast to boundingBox of TextGeometry rather than the mesh

Question

I'm trying to raycast to TextGeometry's boundingBox. Currently, raycasting works for textGeometry when click is on the letters not around or inbetween letters. If the click is inbetween the text letters/aphabets, no object is intersected with intersectObjects(). I need the raycast to intersect the textGeo object when click is inbetween the letters as well.

I'm defining TextGeometry as:

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

After searching for solutions, going with the boundingBox seemed the best approach. Please advice or point to how this can be achieved. Any ideas or tips on how to do this? Or if there is any currently available approach.

How would I make the raycast intersect the bounding box?

Answer 1

I found a solution in the Three.js lib itself. They have an optimization piece in the raycast function for a Mesh that looks at the BoundingBox and BoundingSphere to figure if the ray falls outside to skip checking for intersection. I flipped it around for my case:

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

Answer 2

1. Create the bounding box of your geometry and create geometry for the bbox.
2. Create a THREE.Object3D and add the bounding as its child (name it obbox)
3. Add obbox to the scene.

Now if you intersect the scene you will get the obbox object first because it will always be closer to the origin of the ray.