Three.js开发之鼠标点击选中模型

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

function onMouseClick(event){

    //将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标
    mouse.x = (event.clientX/window.innerWidth)*2-1
    mouse.y = -((event.clientY/window.innerHeight)*2-1)
    //console.log("mouse:"+mouse.x+","+mouse.y)
 
    // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
    raycaster.setFromCamera( mouse, camera );

    // 获取raycaster直线和所有模型相交的数组集合
    var intersects = raycaster.intersectObjects( scene.children );
    console.log(intersects);

     //将所有的相交的模型的颜色设置为红色
    for ( var i = 0; i < intersects.length; i++ ) {
        intersects[ i ].object.material.color.set( 0xff0000 );
    }
}

mouse.x和mouse.y对应的公式可以通过console.log打印的方式来推算，总之是在整个屏幕上点击的时候mouse.x和mouse.y的变化范围是从-1到1，然后在屏幕的正中心的地方都是0。

后面无脑调用raycaster就好啦！

点击前后效果如图~

要做其他功能的话把事件换成mousemove，也可以对照打印出的选中模型信息更改其他属性~