Kenneth的部落格

這裏的“鼠標交互”並不是指 addEventListener 提供的交互——雖然也會用到——而 是另一個更具體的問題：鼠標沒有3D坐標，怎麽和三維空間裏的物體交互？想象 一下，如果我們在3D視圖上單擊了一下鼠標，要怎麽找到被單擊的3D對象？

當然，我們可以自己用鼠標二維坐標 + 投影矩陣 + 3D對象的變換矩陣 + 3D對 象的幾何信息，計算出鼠標到底點擊在哪個對象上……或者，我們也可以用 Three.js 提供的 Raycaster .

Ray Casting

Raycaster 使用的方法正是 Ray Casting ，顧名思義就是從一點發射一束“光線” ——動感死光biubiubiu——然後看看這束“光線”在前進路線上會遇到什麽東西。

乍看這似乎和鼠標交互沒什麽關系，但是當我們在用鼠標選擇3D場景中的物體時，可 以想象也有一束“光線”從鏡頭所在的點出發，沿著鼠標所指的方向發射出去，那麽這 一束光線一定會首先遇到鼠標方向上最靠近鏡頭的物體，一般情況下這也正是我們想 要用鼠標操作的物體。

在 Three.js 中，是通過 OrbitControls.js API 來支持鼠標交互的，該 API 位於 Three.js 源代碼樹的 examples/js/controls 目錄。因為不是所有 3D 應用程序都要求用來與其他一些硬件設備進行交互的用戶交互、OrbitControls 和其他 API 是可選的庫（參閱 可選的 Three.js 控制 API 邊欄）。