javascript - 光线转换到 TextGeometry 的边界框而不是网格

标签 javascript three.js raycasting

我正在尝试将光线转换到 TextGeometry 的边界框。当前,当单击不在字母周围或字母之间的字母时,光线转换适用于 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);

在搜索解决方案之后,使用边界框似乎是最好的方法。请建议或指出如何实现这一目标。有关如何执行此操作的任何想法或提示?或者如果有任何当前可用的方法。

如何使光线转换与边界框相交?

最佳答案

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

关于javascript - 光线转换到 TextGeometry 的边界框而不是网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33762803/

相关文章:

javascript - 使用 Google Map V3 进行地理定位

javascript - 如何处理模型增删改查异常

javascript - Three.js为行星添加高分辨率纹理的方法

javascript - Three.js 获取可见区域中心的粒子

javascript - Three.js - 未捕获的类型错误 : undefined is not a function

c# - 光线转换到 Unity 中的特定层

javascript - 为什么 NVD3.js 线加条形图示例呈现两个图表而不是一个?

javascript - GoJS中如何动态添加Node数据和Link数据?

c# - Unity3d : Get a direction vector parallel to plane

three.js - 可视化 Raycaster