爲什麼我的raycast不會與任何東西相交？

Question

我有這樣的代碼，旨在發現用戶點擊網：

// scene and camera are defined outside of this code 
var mousePoint = new THREE.Vector2(); 
var raycaster = new THREE.Raycaster(); 
var intersections; 

function onClick(event) { 
    mousePoint.x = event.clientX; 
    mousePoint.y = event.clientY; 
    raycaster.setFromCamera(mousePoint, camera); 
    intersections = raycaster.intersectObjects(
    scene.children); 
} 

然而，每一個我點擊一次，intersections回來爲空數組，什麼也沒有得到相交。我究竟做錯了什麼？

Answer 1

從the three.js documentation for Raycaster（重點煤礦）：

coords - 鼠標的2D座標，在歸一化設備座標（NDC）--- X和Y分量應爲-1之間和1.
camera - 光線應從其起始的相機

更新光線具有新的起源和方向。

因此，設置的mousePoint座標時，而不是直接設置x和y到event.clientX和event.clientY，它們應該被轉換到這個座標空間：

// calculate mouse position in normalized device coordinates 
// (-1 to +1) for both components 
mousePoint.x = (event.clientX/window.innerWidth) * 2 - 1; 
mousePoint.y = (event.clientY/window.innerHeight) * -2 + 1;