Three.js raycaster究竟在做什麼？使用three.js所碰撞檢測

Question

我看到示例代碼全部具有一段代碼爲：

var vector = new THREE.Vector3((event.clientX/window.innerWidth) * 2 - 1, - (event.clientY/window.innerHeight) * 2 + 1, 0.5); 
projector.unprojectVector(vector, camera); 

我的問題是，什麼是event.clientX/window.innerWidth）* 2 - 1 &事件.clientY/window.innerHeight）* 2是否正確？爲什麼這些價值？

我需要編寫一個正交相機撞擊檢測代碼，但我首先需要了解透視相機案例中發生了什麼。

Answer 1

(event.clientX/window.innerWidth) * 2 - 1, - (event.clientY/window.innerHeight) * 2 + 1 

將屏幕空間中的像素座標映射到標準化設備座標（NDC）空間中的點。

projector.unprojectVector(vector, camera); 

將NDC空間中的點映射到世界空間中的點。

Raycaster然後通過該世界點從相機位置創建光線。

如果您需要幫助瞭解這些概念，請參閱this answer中的參考文獻。

此外，對於正射相機，您需要使用稍微不同的方法。有關更多信息，請參閱this answer。

three.js r.66