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在使用非常低的相机值时会出现问题。

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

THREE.js中的RayCasting问题 - 交叉点很不稳定，大部分时间都没有返回交叉

1 个答案: