WebVR开发教程——交互事件（三）Cardboard与注视

摘要：开发传送门开发教程交互事件一头显与手柄开发教程交互事件二使用开发教程深度剖析关于的开发调试方案以及原理机制开发教程标准入门使用开发场景的入门教程

Cardboard可以说是手机VR头显的元老了，狭义上指的是Google推出的一个带有双凸透镜的盒子，广义上则表示智能手机+盒子的VR体验平台。

它的交互方式较为简单，利用了手机的陀螺仪，采用gaze注视行为来触发场景里的事件，比如用户在虚拟商店中注视一款商品时，弹出这个商品的价格信息。

注视事件是WebVR最基本的交互方式，用户通过头部运动改变视线朝向，当用户视线正对着物体时，触发物体绑定的事件，具体分为三个基本事件，分别是gazeEnter,gazeTrigger,gazeLeave。
我们可以设置一个位于相机中心的准心来描述这三个基本事件（准确的说，在VR模式下是两个，分别位于左右相机的中心）

gazeEnter：当准心进入物体时，即用户注视了物体，触发一次

gazeLeave：当准心离开物体时，即用户停止注视该物体时，触发一次

gazeTrigger：当准心处于物体时触发，不同于gazeEnter，gazeTrigger会在每一帧刷触发，直到准心离开物体

注视事件触发条件其实就是物体被用户视线“击中”。在每帧动画渲染中，从准心处沿z轴负方向发出射线，如果射线与物体相交，即物体被射线击中，说明前方的物体被用户注视，这里使用Three提供的raycaster对象,对场景里的3d物体进行射线拾取。

下面是使用THREE.Raycaster拾取物体的简单例子:

// 创建射线发射器实例raycaster
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(origin,camera); // 设置射线源点
raycaster.intersectObjects(targetList); // 检测targetList的object物体是否与射线相交
if (intersects.length > 0) {
    // 获取从源点触发，与射线相交的首个物体
    const target = intersects[0].object;
    // TODO
}

主要分为三步：

new THREE.Raycaster()创建一个射线发射器；

调用.setFromCamera(origin,camera)设置射线发射源位置，第一个参数origin传入NDC标准化设备坐标，即归一化的屏幕坐标，第二个参数传入相机，此时射线将在屏幕的origin处，沿垂直于相机的近切面的方向进行投射；

调用.intersectObjects(targetList)检测targetList的物体是否相交
Raycaster借鉴了光线投射法进行物体拾取，更多用法可参考three.js官方文档

根据上文对gaze基本事件的描述，现在开始创建注视监听器Gazer类，提供事件绑定on、解绑off、更新update的公用方法，物体可注册gazeEnter,gazeLeave,gazeTrigger事件回调，以下是完整代码。

// 注视事件监听器
class Gazer {
    constructor() {
        // 初始化射线发射源
        this.raycaster = new THREE.Raycaster();
        this._center = new THREE.Vector2();
        this.rayList = {},this.targetList = [];
        this._lastTarget = null;
    }
    /** 物体绑定gaze事件的公用方法
     * @param {THREE.Object3D} target 监听的3d网格
     * @param {String} eventType 事件类型 
     * @param {Function} callback 事件回调
     **/
    on(target, eventType, callback) {
        const noop = () => {};
        // target首次绑定事件，则创建监听对象，加入raylist监听列表，并将三个基本事件的回调初始为空方法
        if (!this.rayList[target.id]) this.rayList[target.id] = { target, gazeEnter: noop, gazeTrigger: noop, gazeLeave: noop };
        // 根据传入的 eventType与callback更新事件回调
        this.rayList[target.id][eventType] = callback;
        this.targetList = Object.keys(this.rayList).map(key => this.rayList[key].target);
    }
    off(target) {
        delete this.rayList[target.id];
        this.targetList = Object.keys(this.rayList).map(key => this.rayList[key].target);
    }
    update(camera) {
        if (this.targetList.length <= 0) return;
        //更新射线位置
        this.raycaster.setFromCamera(this._center,camera);
        const intersects = this.raycaster.intersectObjects(this.targetList);
        if (intersects.length > 0) { // 当前帧射线击中物体
            const currentTarget = intersects[0].object;
            if (this._lastTarget) { // 上一帧射线击中物体
                if (this._lastTarget.id !== currentTarget.id) { // 上一帧射线击中物体与当前帧不同
                    this.rayList[this._lastTarget.id].gazeLeave(); 
                    this.rayList[currentTarget.id].gazeEnter();
                }
            } else { // 上一帧射线未击中物体
                this.rayList[currentTarget.id].gazeEnter(); // 触发当前帧物体的gazeEnter事件
            }
            this.rayList[currentTarget.id].gazeTrigger(); // 当前帧射线击中物体，触发物体的gazeTrigger事件
            this._lastTarget = currentTarget;
        } else { // 当前帧我击中物体
            if ( this._lastTarget ) this.rayList[this._lastTarget.id].gazeLeave(); // 触发上一帧物体gazeLeave
            this._lastTarget = null;
        }
    }
}

下面一起来看Gazer实现的三步曲，这里用“击中”表示射线与物体相交。

第一步，使用构造函数constructor初始化：

初始化射线发射器raycaster实例；

创建rayList以记录注册gaze事件的物体对象；

创建lastTarget记录前一帧被射线击中的物体，初始为null。

第二步，创建on方法提供事件绑定API

通过调用gazer.on(target,eventType,callback)方式，传入绑定事件的Obect3D对象target，绑定事件类型eventType以及事件回调callback三个参数。

判断这个target是否存在，不存在，则创建一个监听对象，存在则更新对象里的事件函数。这个对象包括传入的target本身，以及三个基本事件的回调函数（初始值为空方法）：

this.rayList[target.id] = { 
   target, 
   gazeEnter, 
   gazeTrigger, 
   gazeLeave
}

将这个对象以键值对形式赋值给raylist[target.id]监听序列对象；

将raylist对象处理成[ target1, ..., targetN ]的形式赋值给this.targetList，作为raycaster.intersectObjects的入参。

第三步，创建update方法，在动画帧中监听三个基本事件是否触发

调用raycaster.setFromCamera更新射线起点与方向；

调用raycaster.intersectObjects检测监听序列this.targetList是否有物体与射线相交；

根据gazeEnter和gazeLeave和gazeTrigger实现的情况，总结了以下这三个事件触发的逻辑图。

逻辑图里的三个条件用代码表示如下：

当前帧射线是否击中物体：if (intersects.length > 0)
上一帧射线是否击中物体：if (this._lastTarget)
当前帧射线击中物体是否与上一帧不同：if (this._lastTarget.id !== currentTarget.id)

if (intersects.length > 0) { // 当前帧射线击中物体
    const currentTarget = intersects[0].object;
    if (this._lastTarget) { // 上一帧射线击中物体
        if (this._lastTarget.id !== currentTarget.id) { 
            // 上一帧射线击中物体与当前帧不同，触发上一帧物体的gazeLeave事件，触发当前帧物体的gazeEnter事件
            this.rayList[this._lastTarget.id].gazeLeave(); 
            this.rayList[currentTarget.id].gazeEnter();
        }
    } else { // 上一帧射线未击中物体
        this.rayList[currentTarget.id].gazeEnter(); // 上一帧射线没有击中物体，触发当前帧物体的gazeEnter事件
    }
    this.rayList[currentTarget.id].gazeTrigger(); // 当前帧射线击中物体，触发物体的gazeTrigger事件
    this._lastTarget = currentTarget;
} else { // 当前帧我击中物体
    if ( this._lastTarget ) this.rayList[this._lastTarget.id].gazeLeave(); // 上一帧射线击中物体，触发上一帧物体gazeLeave
    this._lastTarget = null;
}

最后，我们需要更新this._lastTarget值，供下一帧进行逻辑判断，如果当前帧有物体击中，则this._lastTarget = currentTarget，否则执行this._lastTarget = null。

接下来，我们调用前面定义的Gazer类开发gaze交互，实现一个简单例子：随机创建100个cube立方体，当用户注视立方体时，立方体半透明。
首先创建准心，设置为一个圆点作为展现给用户的光标，当然你可以创建其它准心形状，比如十字形或环形等。

// 创建准心
createCrosshair () {
    const geometry = new THREE.CircleGeometry( 0.002, 16 );
    const material = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        opacity: 0.5,
        transparent: true
    });
    const crosshair = new THREE.Mesh(geometry,material);
    crosshair.position.z = -0.5;
    return crosshair;
}

接下来，在start()方法创建物体并绑定事件，在update监听事件。

// 场景物体初始化
start() {
    const { scene, camera } = this;
    ... 创建灯光、地板等
    // 添加准心到相机
    camera.add(this.createCrosshair());
    this.gazer = new Gazer();
    // 创建立方体
    for (let i = 0; i < 100; i++) {
        const cube = this.createCube(2,2,2 );
        cube.position.set( 100*Math.random() - 50, 50*Math.random() -10, 100*Math.random() - 50 );
        scene.add(cube);
        // 绑定注视事件
        this.gazer.on(cube,"gazeEnter",() => {
            cube.material.opacity = 0.5;
        });
        this.gazer.on(cube,"gazeLeave",() => {
            cube.material.opacity = 1;
        });
    }
}
// 动画更新
update() {
    const { scene, camera, renderer, gazer } = this;
    gazer.update(camera);
    renderer.render(scene, camera);
}

在示例中，我们遵循上一期WebVRApp的代码结构，在start方法里增加了一个准心，为100个cube立方体绑定gazeEnter事件和gazeLeave事件，触发gazeEnter时，立方体半透明，触发gazeLeave时，立方体恢复不透明。

演示地址：yonechen.github.io/WebVR-helloworld/cardboard.html
源码地址：github.com/YoneChen/WebVR-helloworld/blob/master/cardboard.html

注视事件除了以上三种基本事件外，还衍生了像注视延迟事件和注视点击事件，这些gaze事件都可以在gazeTrigger里进行拓展。

注视点击事件

cardboard二代在盒子上提供了一个按钮，当用户通过注视物体并点击按钮，由按钮点击屏幕触发。
实现思路：在window绑定click事件，触发click时改变标志位，在gazeTrigger方法内根据标志位来判断是否执行回调，关键代码如下：

//按钮事件监听
window.addEventListener("click", e => this.state._clicked = true);
this.gazer.on(cube,"gazeTrigger",() => {
    // 当用户点击时触发
    if (this.state._clicked) {
        this.state._clicked = false; // 重置点击标志位
        cube.scale.set(1.5,1.5,1.5); // TODO
    }
});

注视延迟事件

当准心在物体上超过一定时间时触发，一般会在准心处设置一个进度条动画。

实现思路：在gazeEnter时记录开始时间点，在gazeTrigger计算出时间差是否超过预设延迟时间，如果是则执行回调，关键代码如下：

//准心进入物体，开启事件触发计时
this.gazer.on(cube,"gazeEnter",() => {
    this.state._wait = true; // 计时已开始
    this.animate.loader.start(); // 开启准心进度条动画
    this.state.gazeEnterTime = Date.now(); // 记录计时开始时间点
});
this.gazer.on(cube,"gazeTrigger",() => {
    // 当计时已开始，且延迟时长超过1.5秒触发
    if (this.state._wait && Date.now() - this.state.gazeEnterTime > 1500) {
        this.animate.loader.stop(); // 停止准心进度条动画
        this.state._wait = false; // 计时结束
        cube.material.opacity = 0.5; // TODO
    }
});
this.gazer.on(cube,"gazeLeave",() => {
    this.animate.loader.stop(); // 停止准心进度条动画
    this.state._wait = false; // 计时结束
    ...
});

这里准心计时进度条loader动画使用了Tween.js，这里就不展开了，更多可在源码地址查看。

演示地址：yonechen.github.io/WebVR-helloworld/cardboard2.html
源码地址：github.com/YoneChen/WebVR-helloworld/blob/master/cardboard2.html

以上介绍了Cardboard的gaze事件概念与原理，以及三个基本事件的开发过程，通过例子展示gaze交互实现方法，最后文末补充了gaze事件的扩展。
上文提及的注视点击也是Gear VR最常用的交互方式，不过Gear VR提供了更为丰富的touchpad而不是按钮，下一期将详细介绍Gear VR与touchpad的事件开发，敬请期待。

WebVR开发传送门：

WebVR开发教程——交互事件（一）头显与手柄
WebVR开发教程——交互事件（二）使用Gamepad
WebVR开发教程——深度剖析 关于WebVR的开发调试方案以及原理机制
WebVR开发教程——标准入门 使用Three.js开发WebVR场景的入门教程