Three.js是構(gòu)建web3d場景非常流行的框架，利用three.js我們可以更優(yōu)雅地創(chuàng)建出三維場景和三維動畫，本文主要針對three.js的點擊事件以及相關(guān)插件進行介紹。
最近在使用three.js開發(fā)Web3d的時候，想要給的3d物體添加onclick事件，查遍了three的官方文檔發(fā)現(xiàn)，three.js的mesh（3d網(wǎng)格）沒有類似HTML里dom的addEventListener的綁定事件，只提供了一個Raycast類進行物體拾取，引用three.js中文文檔介紹如下：

光線投射器（Raycaster）

按照官方文檔，實現(xiàn)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);

這里先創(chuàng)建了Raycaster對象，通過setFromCamera函數(shù)像場景物體發(fā)出射線，再通過intersectObject檢測射線投射到的物體。

setFromCamera ( coords, camera ) coords — 鼠標的二維坐標，在歸一化的設(shè)備坐標(NDC)中，也就是X 和 Y 分量應(yīng)該介于 -1 和 1 之間。 camera — 射線起點處的相機，即把射線起點設(shè)置在該相機位置處。 用一個新的原點和方向向量來更新射線（ray）。 intersectObject ( object, recursive ) object — 用來檢測和射線相交的物體。recursive — 如果為true，它還檢查所有后代。否則只檢查該對象本身。缺省值為false。

顯然，這種點擊物體的實現(xiàn)代碼有些啰嗦，因為每一次想要給物體添加或移除點擊事件時，需要在全局里修改intersectObjects的列表，在render里面去單獨控制回調(diào)。
根據(jù)JavaScript的發(fā)布-訂閱的設(shè)計模式，本文實現(xiàn)了一套可供mesh（three.js的物體）綁定事件的模塊。該模塊參考了dom的addEventListener的綁定方式，使用on和off進行事件注冊，該插件封裝了click點擊、hover懸停，以及最近挺火的webVR的gaze凝視事件等。

安裝

$ npm install three-onevent --save
# 或者
$ yarn add three-onevent
# 或直接在頁面 '<script>' 中引用onEvent.js

開始

引用方式

• 1.node：webpack或者rollup模塊引入：require ('three-onevent.js') 或者 import 'three-onevent.js'
• 2.瀏覽器：在html引入onEvent.js <script src ='three-onevent/onEvent.js'>

初始化

• 請確保已經(jīng)引用three.js. See examples

使用方法：THREE.onEvent(scene:THREE.Scene,camera:THREE.Camera);

// 在render渲染之前初始化
// 傳入場景和相機
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(fov,window.innerWidth/window.innerHeight,0.1,10000);
camera.position.set( 0, 0, 0 );
scene.add(WebVR.Camera);
THREE.onEvent(scene,camera);
...Render渲染...

添加監(jiān)聽器 "on"

使用方法：mesh.on(method:string,callback:function) 這里的mesh指的是THREE.Mesh的實例

// 給一個立方體綁定點擊事件
var geo = new THREE.CubeGeometry(5,5,5);
var mat = new THREE.MeshBasicMaterial({color:0x00aadd});
var mesh = new THREE.Mesh(geo,mat);
mesh.on('click',function(m) {
  m.scale.set(2,2,2); // m指向mesh
})
myScene.add(mesh);

移除監(jiān)聽器 "off"

使用方法: mesh.off(method:stiring)

//移除點擊事件
mesh.off('click');

method可選參數(shù)

method: string 'click','hover','gaze','longGaze'

// hover鼠標懸停監(jiān)聽 
mesh.on('hover',function(m) {
  // mouse enter the mesh
  m.scale.set(2,2,2); 
},function(m) {
  // mouse leave out the mesh
  m.scale.set(1,1,1);
});

// webvr gaze凝視監(jiān)聽
mesh.on('gaze',function(m) {
  // mesh is gazed in
  m.material.color = 0x00ddaa;
},function(m) {
  // mesh is gazed out
  m.material.color = 0x00aadd;
})

詳情查看完整介紹
案例：https://yonechen.github.io/three-onEvent/example.html