three.js事件绑定插件--onEvent

Three.js是构建web3d场景非常流行的框架，利用three.js我们可以更优雅地创建出三维场景和三维动画，本文主要针对three.js的点击事件以及相关插件进行介绍。
最近在使用three.js开发Web3d的时候，想要给的3d物体添加onclick事件，查遍了three的官方文档发现，three.js的mesh（3d网格）没有类似HTML里dom的addEventListener的绑定事件，只提供了一个Raycast类进行物体拾取，引用three.js中文文档介绍如下：

光线投射器（Raycaster）

按照官方文档，实现3d物体的点击事件代码如下：

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

function onMouseMove( event ) {

    // calculate mouse position in normalized device coordinates
    // (-1 to +1) for both components

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

}

function render() {

    // update the picking ray with the camera and mouse position
    raycaster.setFromCamera( mouse, camera );

    // calculate objects intersecting the picking ray
    var intersects = raycaster.intersectObjects( scene.children );

    for ( var i = 0; i < intersects.length; i++ ) {

        intersects[ i ].object.material.color.set( 0xff0000 );

    }

    renderer.render( scene, camera );

}

window.addEventListener( 'mousemove', onMouseMove, false );

window.requestAnimationFrame(render);

这里先创建了Raycaster对象，通过setFromCamera函数像场景物体发出射线，再通过intersectObject检测射线投射到的物体。

setFromCamera ( coords, camera ) coords — 鼠标的二维坐标，在归一化的设备坐标(NDC)中，也就是X 和 Y 分量应该介于 -1 和 1 之间。 camera — 射线起点处的相机，即把射线起点设置在该相机位置处。 用一个新的原点和方向向量来更新射线（ray）。 intersectObject ( object, recursive ) object — 用来检测和射线相交的物体。recursive — 如果为true，它还检查所有后代。否则只检查该对象本身。缺省值为false。

显然，这种点击物体的实现代码有些啰嗦，因为每一次想要给物体添加或移除点击事件时，需要在全局里修改intersectObjects的列表，在render里面去单独控制回调。
根据JavaScript的发布-订阅的设计模式，本文实现了一套可供mesh（three.js的物体）绑定事件的模块。该模块参考了dom的addEventListener的绑定方式，使用on和off进行事件注册，该插件封装了click点击、hover悬停，以及最近挺火的webVR的gaze凝视事件等。

安装

$ npm install three-onevent --save
# 或者
$ yarn add three-onevent
# 或直接在页面 '