three.js中的事件

以上一篇入门篇为例来简单的设置下3d模型当中的交互事件，上一篇我们已经完成了在3d页面中添加了一个红色球，下面我们给这个球一个点击事件让它Y轴位置上升，再设置一个鼠标移入到球上时让其变色。

1.其实three.js当中没有事件可以直接选中物体的，我们需要监听window对象来完成与3d页面的交互，通过使用到three.js当中RayCaster对象，用于在三维空间中进行鼠标拾取，原理是：相机与鼠标所在的设备坐标之间的连线与哪些物体相交。相交的物体离屏幕越近的越靠前，所以第一个物体就是我们选中的对象。

第一步：给window对象添加点击事件监听器；

    window.addEventListener('mousedown', mouseDownFuc);

第二步：在事件监听函数里拾取到点击的对象集合；

    function mouseDownFuc(){
        let raycaster = new THREE.Raycaster();//创建光线投射对象
        let mouse = new THREE.Vector2();//创建二维平面
        let intersectsObjArr = getSelsectOBj(mouse,raycaster, e);//通过封装的getSelsectOBj函数获取鼠标选中对象集合，e是点击事件对象
    }     
    //获取事件操作对象
    function getSelsectOBj(mouse,raycaster, e) {
        //将html坐标系转化为webgl坐标系，并确定鼠标点击位置
        mouse.x =  e.clientX / renderer.domElement.clientWidth*2-1;
        mouse.y =  -(e.clientY / renderer.domElement.clientHeight*2)+1;
        raycaster.setFromCamera(mouse,camera);//以camera为z坐标，确定所点击物体的3D空间位置
        let intersects = raycaster.intersectObjects(scene.children, true);//确定所点击位置上的物体数量集合
        return intersects;//返回连线经过的物体集合
    }

第三步：判断intersectsObjArr集合长度不为零，确认我们鼠标点击的地方有物体,如果有物体那么intersectsObjArr[0]就是我们选中的对象，通过页面console.log（intersectsObjArr[0]）发现intersectsObjArr[0]包含了相交点的许多信息，而我们只需要交点的对象，所以我们需要取到intersectsObjArr[0].object对象；然后我们还需要进行一次判断当前