THREE.js中存在RayCasting問題 - 交點是令人tempe，的，大部分時間沒有返回相交點

我在THREE.js中使用Raycaster專注於具有鼠標位置的對象。這是我以前做過一百萬次沒有問題的事情，但是在我當前的設置中有一些不起作用的東西。THREE.js中存在RayCasting問題 - 交點是令人tempe，的，大部分時間沒有返回相交點

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

來源

2017-01-26 Jack Wild

你不必嘗試單獨交叉每個對象。你可以使用'raycaster.intersectObjects（scene.children）;'或者你可以傳遞給'raycaster.intersectObjects'對象數組來測試相交。 – gaitat

謝謝，我也試過這個，但它仍然不起作用。我將它們分開交叉，因爲它使onBlur和onFocus回調工作變得更容易。 –

幾個非常令人沮喪小時後我發現， Raycaster在使用非常低的cameraNar值時遇到問題。

我把相機設置爲0.000001，但是當我將它增加到0.01時，它工作正常。

來源

2017-01-27 13:07:29

THREE.js中存在RayCasting問題 - 交點是令人tempe，的，大部分時間沒有返回相交點

回答

相關問題