THREE.js 中的 RayCasting 问题 — 交叉点是喜怒无常的，大多数时候没有返回交叉点

Question

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

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

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

下面的代码片段：

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

Answer 1

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

我将相机设置为接近 0.000001，但是当我将其增加到 0.01 时，效果很好。

THREE.js 中的 RayCasting 问题 — 交叉点是喜怒无常的，大多数时候没有返回交叉点

RayCasting issue in THREE.js — Intersections are temperamental, most of the time returning no intersects

javascript

three.js

raycasting