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
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。