three.js应用篇（三）如何给几何体添加点击事件

        点击事件是js中最基础最核心的交互，在three.js中给几何体添加点击事件有两种方式，一是使用three.interaction.js插件，另一种是使用官方的射线拾取，下面一一介绍其优缺点和使用方式。

        一、使用three.interaction.js插件

        使用three.interaction.js插件实现点击事件非常简单。引入源码，点击three.interaction.js源码下载，引入build下的three.interaction.js文件，若使用Node环境则直接npm下载即可，使用方式：

//虽然interaction对象声明后没有直接引用，但使用interaction必须声明。
let interaction = new THREE.Interaction(renderer, scene, camera);
//绑定点击事件，cube为需要被绑定的几何体
cube.on('click', function(ev) {
    //操作代码
    console.log(cube.name);          
});
cube.on('mousemove', function(ev) {
    console.log(cube.name);          
});
cube.on('mouseout', function(ev) {
    console.log(cube.name);          
});

        three.interaction.js的缺点：从代码就可以看出three.interaction.js在使用上非常的简单，但在实际的开发中，基本上不使用其监听几何体，因为three.interaction.js的依赖版本过旧，若同志们使用Node开发，打开three.interaction.js的package.json查看其版本依赖发现其依赖的three.js的版本还是0.89.0，而这个版本已经是非常旧的版本在three.js的新版本中如果引用three.interaction.js会直接报错无法使用，而如果回退three.js的版本又会丧失在第一视角控制器等多个方面的更新优化，得不偿失。

二、使用官方的THREE.Raycaster

THREE.Raycaster是three.js中的射线类，其实现监听的原理是由相机位置为射线起点，由鼠标位置为射线方向发射射线，其穿过的所有几何体都会被监测到。

let intersects = []; //几何体合集
const pointer = new THREE.Vector2();
document.addEventListener( 'click', meshOnClick );
let raycaster = new THREE.Raycaster();
function meshOnClick(event) {

  pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  raycaster.setFromCamera( pointer, camera );
  //geometrys为需要监听的Mesh合集，可以通过这个集合来过滤掉不需要监听的元素例如地面天空
  //true为不拾取子对象
  intersects = raycaster.intersectObjects( geometrys,true );
  //被射线穿过的几何体为一个集合，越排在前面说明其位置离端点越近，所以直接取[0]
  if ( intersects.length > 0 ) {

    //alert(intersects[0].object.name);
    console.log(intersects[0].object);
    
  } else {
    //若没有几何体被监听到，可以做一些取消操作
  }
  
}