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
# 或直接在页面 '<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'>

初始化

• 请确保已经引用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渲染...

添加监听器 "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);

移除监听器 "off"

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

 

//移除点击事件
mesh.off('click');

method可选参数

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

 

// hover鼠标悬停监听 
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凝视监听
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

作者：YoneChen
链接：https://www.jianshu.com/p/61ba1906f9a7
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。