前言
在三維場(chǎng)景中我們經(jīng)常會(huì)用到一個(gè)功能，那就是與場(chǎng)景中的模型有事件交互即點(diǎn)擊模型對(duì)象希望可以獲取點(diǎn)擊的模型對(duì)象蜜葱，然后進(jìn)行一系列的操作。這個(gè)功能在三維場(chǎng)景中用的比較多，今天和大家分享一下（主要是threejs引擎综芥，其他引擎邏輯一樣）。
1. 坐標(biāo)系轉(zhuǎn)換
要知道我們呈現(xiàn)到用戶(hù)面前的三維場(chǎng)景都是通過(guò)顯示器來(lái)實(shí)現(xiàn)的猎拨，呈現(xiàn)端并非真實(shí)的三維空間膀藐。用戶(hù)在瀏覽器里操作鼠標(biāo)其實(shí)改變的只是平面坐標(biāo)x、和y红省。這里的x和y（鼠標(biāo)在屏幕上的坐標(biāo)）并非我們?nèi)S場(chǎng)景里的坐標(biāo)x额各、y值，但他們有一個(gè)坐標(biāo)轉(zhuǎn)換關(guān)系吧恃；公式推導(dǎo)過(guò)程可以點(diǎn)這里看這位大神分享的過(guò)程虾啦；我這里直接看結(jié)果：
var mouse=new THREE.Vector2();
?mouse.x=(event.clientX/window.innerWidth)*2-1;
?mouse.y=-(event.clientY/window.innerHeight)*2+1;
event.clientX,event.clientY是鼠標(biāo)的x、y坐標(biāo)痕寓；這種情況一般是你畫(huà)布和瀏覽器窗口一樣大的時(shí)候傲醉，一般我們畫(huà)布都不會(huì)這么大，或者畫(huà)面在窗口的某一部分呻率，這時(shí)候這個(gè)公式需要稍微改一下硬毕，改成你畫(huà)面實(shí)際的大小礼仗；改過(guò)后如下：
2.射線(xiàn)檢測(cè)
坐標(biāo)轉(zhuǎn)換完成后我們就該在三維空間里找到我們想要的對(duì)象了吐咳，這里threejs提供了一個(gè)射線(xiàn)檢測(cè)（其它引擎里也是如此）THREE.Raycaster的方法，具體使用方法如下：
3. 拿到模型對(duì)象
一般在射線(xiàn)檢測(cè)會(huì)獲取到鼠標(biāo)位置附近的所有對(duì)象元践，我們只需要取鼠標(biāo)位置最近的一個(gè)就是了挪丢，射線(xiàn)檢測(cè)方法會(huì)按照由近到遠(yuǎn)順序排我們?nèi)?shù)組第一個(gè)就可以了 如下圖：
我在圖例里是改變了選中模型的顏色，如果想讓模型高亮也可以改變材質(zhì)的亮度卢厂，這個(gè)下次再講了乾蓬。到這為止，基本就實(shí)現(xiàn)了鼠標(biāo)點(diǎn)哪哪的模型就會(huì)改變顏色慎恒。
今天模型點(diǎn)擊交互就分享到這了任内，希望可以幫助到大家
