THREE.jsのレイキャスティングの問題 - 交差点は気質が悪く、ほとんどの場合交差しません。

Question

THREE.jsのRaycasterを使用して、マウスの位置にあるオブジェクトにフォーカスしています。これまで何百万回も問題を起こしてきたことですが、私の現在の設定には問題があります。

場合によっては、onFocusコールバックが起動されますが、ほとんどの場合はonBlurコールバックが呼び出されます。限り、私は例とスタックオーバーフローの質問から私が正しくやっていることがわかりますが、それはそう思わない...今と私はそれをした他の時間の間に見ることができる唯一の違いは、通常私のカメラは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に増やすとうまくいきました。