對象拾取

對象拾取也就是要獲得鼠標事件發生位置的圖形對象。在threejs中，是通過Raycaster 對象來拾取對象的，ray是射線，caster是投射器，從字面上即可理解其工作原理是：從某個方向發射一條射線，穿過鼠標所在的點，則這條射線經過的對象就是鼠標點擊的對象。示例如下：

let raycaster = new THREE.Raycaster(); let mouse = new THREE.Vector2(); function pickupObjects(e){//將鼠標點擊位置的屏幕坐標轉成threejs中的標準坐標mouse.x = (e.clientX/window.innerWidth)*2 -1;mouse.y = -(e.clientY/window.innerHeight)*2 + 1;//從相機發射一條射線，經過鼠標點擊位置raycaster.setFromCamera(mouse,camera);//計算射線相機到的對象，可能有多個對象，因此返回的是一個數組，按離相機遠近排列let intersects = raycaster.intersectObjects(scene.children);for ( var i = 0; i < intersects.length; i++ ) {intersects[ i ].object.material.color.set( 0x00ff00 );} }

下面分析一下例子的代碼，先看看鼠標點擊位置的坐標轉換：

mouse.x = (e.clientX/window.innerWidth)*2 -1; mouse.y = -(e.clientY/window.innerHeight)*2 + 1;

為什么這樣就能得到threejs的標準坐標？下面是我寫的一個推導過程：

把上面的x1換成e.clientX，把y1換成e.clientY，就可以得到例子中的式子了。所以，當threejs的屏幕寬度并不是window.innerWidth時，也要記得根據實際從新推導。

其它并不復雜，可以參考一下Raycaster對象的文檔，看看這些方法的說明。

總結

以上是生活随笔為你收集整理的threejs对象拾取的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。