THREE.js 中的 RayCasting 问题 - 交点是喜怒无常的，大多数情况下不会返回任何交点答案

【问题标题】：RayCasting issue in THREE.js — Intersections are temperamental, most of the time returning no intersectsTHREE.js 中的 RayCasting 问题 - 交点是喜怒无常的，大多数情况下不会返回任何交点
【发布时间】：2017-01-27 21:07:29
【问题描述】：

我在 THREE.js 中使用 Raycaster 来关注具有鼠标位置的对象。这是我之前做过一百万次没有问题的事情，但是我当前的设置中有一些东西不起作用。

有时会触发 onFocus 回调，但大多数时候会调用 onBlur 回调。据我从示例和 Stack Overflow 问题中可以看出，我做的事情是正确的，但似乎不是......我现在和其他时间之间看到的唯一区别是我的相机通常在0, 0, 0.0001，向外看物体，这次相机在上方，看物体。

相机在130、325、194，物体在0、0、0。

下面的代码sn-ps：

scene = new THREE.Scene();
scene.add(camera);

const geometry = new THREE.CubeGeometry(50, 50, 50);
const material = new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: false } );
const mesh = new THREE.Mesh(geometry, material);
mesh.onFocus = () => {
    console.log('focus test');
}
mesh.onBlur = () => {
    console.log('blur test');
}
intersectableObjects.push(mesh);
scene.add(mesh);



const onMouseMove = ({ clientX, clientY }) => {
    const x = (clientX / window.innerWidth) * 2 - 1;
    const y = - (clientY / window.innerHeight) * 2 + 1;
    mouseVector.set(x, y);
    raycaster.setFromCamera(mouseVector, camera);
    castFocus();
}



const castFocus = () => {
    intersectableObjects.forEach((obj, i) => {
        const intersects = raycaster.intersectObject( obj, false );
        if (intersects.length) return obj.onFocus();
        obj.onBlur();
    });
}

【问题讨论】：

您不必单独尝试与每个对象相交。您可以使用raycaster.intersectObjects( scene.children ); 或者您可以将对象数组传递给raycaster.intersectObjects 以测试相交。
谢谢，我也试过了，但还是不行。我将它们分别相交，因为这样可以更轻松地使用 onBlur 和 onFocus 回调。

标签： javascript three.js raycasting

【解决方案1】：

经过几个非常令人沮丧的小时后，我发现 Raycaster 在使用非常低的 cameraNear 值时会出现问题。

我将相机设置为接近 0.000001，但是当我将其增加到 0.01 时，它工作正常。

【讨论】：