three.js獲取三維物體的點擊事件

three.js文檔里面有介紹到一個raycaster的屬性 

文檔地址：https://threejs.org/docs/index.html?q=raycaster#api/zh/core/Raycaster;

首先生成一條射線和二維空間的坐標

            var  raycaster = new THREE.Raycaster();
            var  mouse = new THREE.Vector2();

然后計算鼠標對對於三維空間的坐標

 

function onMouseMove( event ) {

    // 將鼠標位置歸一化為設備坐標。x 和 y 方向的取值范圍是 (-1 to +1)

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

}

intersectObjects是判斷它們有沒有相交，返回的是一個數組格式，空數組就是沒有相交；

                var intersects = raycaster.intersectObjects(group.children);


                if (intersects.length > 0) {
                　　console.log(intersects[0].object)
                }