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
网友评论