WebVR开发教程——交互事件(三)Cardboard与注视

WebVR开发教程——交互事件(三)Cardboard与注视

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

Cardboard与gaze注视

WebVR开发教程——交互事件(三)Cardboard与注视

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

WebVR开发教程——交互事件(三)Cardboard与注视

注视事件是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
}

主要分为三步:

  1. new THREE.Raycaster()创建一个射线发射器;
  2. 调用.setFromCamera(origin,camera)设置射线发射源位置,第一个参数origin传入NDC标准化设备坐标,即归一化的屏幕坐标,第二个参数传入相机,此时射线将在屏幕的origin处,沿垂直于相机的近切面的方向进行投射;
  3. 调用.intersectObjects(targetList)检测targetList的物体是否相交
    Raycaster借鉴了光线投射法进行物体拾取,更多用法可参考three.js官方文档

gazeEnter, gazeLeave, gazeTrigger实现

根据上文对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初始化:
  1. 初始化射线发射器Raycaster实例;
  2. 创建rayList以记录注册gaze事件的物体对象;
  3. 创建lastTarget记录前一帧被射线击中的物体,初始为null。
第二步,创建on方法提供事件绑定API

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

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

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

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

  2. rayList对象处理成[ target1, ..., targetN ]的形式赋值给this.targetList,作为raycaster.intersectObjects的入参。
第三步,创建update方法,在动画帧中监听三个基本事件是否触发
  1. 调用raycaster.setFromCamera更新射线起点与方向;
  2. 调用raycaster.intersectObjects检测监听序列this.targetList是否有物体与射线相交;
  3. 根据gazeEntergazeLeavegazeTrigger实现的情况,总结了以下这三个事件触发的逻辑图。

WebVR开发教程——交互事件(三)Cardboard与注视

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

当前帧射线是否击中物体: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时,立方体恢复不透明。

WebVR开发教程——交互事件(三)Cardboard与注视

演示地址: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
    }
});
注视延迟事件

当准心在物体上超过一定时间时触发,一般会在准心处设置一个进度条动画。
WebVR开发教程——交互事件(三)Cardboard与注视

实现思路:在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场景的入门教程

相关推荐