Raycast到TextGeometry的boundingBox而不是网格

时间:2015-11-17 17:00:09

标签: javascript three.js raycasting

我正在尝试将光线投射到TextGeometry的boundingBox。目前,当点击不在字母周围或字母之间时,光线投射适用于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似乎是最好的方法。请建议或指出如何实现这一目标。有关如何执行此操作的任何想法或提示?或者,如果有任何当前可用的方法。

如何让光线投射与边界框相交?

2 个答案:

答案 0 :(得分:2)

我在Three.js lib中找到了一个解决方案。他们在光线投射功能中有一个优化部分,用于观察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
    }
}

答案 1 :(得分:0)

  1. 创建几何体的边界框并为bbox创建几何体。
  2. 创建THREE.Object3D并将边界添加为其子项(将其命名为obbox)
  3. 将obbox添加到场景中。
  4. 现在,如果你与场景相交,你将首先获得obbox对象,因为它总是更接近光线的原点。