XRGestures

Add touch gestures to a WebXR AR app without using dom-overlay.

XRGestures

You-Tube tutorial

XRGestures tutorial

Get Started

Add XRGestures.js to your project

Create a gestures object, it needs a Three.JS WebGLRenderer object as a parameter

const gestures = new XRGestures( renderer );

Add a tap event

gestures.addEventListener( 'tap', (ev)=>{
    console.log( 'tap' ); 
});

Add a doubletap event

gestures.addEventListener( 'doubletap', (ev)=>{
    console.log( 'double tap' ); 
});

Add a press event. A touch hold over 0.5 seconds

gestures.addEventListener( 'press', (ev)=>{
    console.log( 'press' );    
});

Add a swipe event.

//ev attributes
//direction: string value, up or down
gestures.addEventListener( 'swipe', (ev)=>{
    console.log(`swipe ${ev.direction}` );
});

Add a pan event. This event gets an initialise property for the first callback.

//ev attributes
//initialise: only exists for the first callback
//delta: Vector3 distance moved since previous callback
gestures.addEventListener( 'pan', (ev)=>{
    if (ev.initialise !== undefined){
        console.log('pan: initialise');
    }else{
        console.log()`pan x:${ev.delta.x.toFixed(3)}, y:${ev.delta.y.toFixed(3)}, x:${ev.delta.z.toFixed(3)}` );
    }
);

Add a pinch event. This event gets an initialise property for the first callback.

//ev attributes
//initialise: only exists for the first callback
//delta: distance moved since previous callback
//scale: current distance between touches/start distance between touches
gestures.addEventListener( 'pinch', (ev)=>{
    if (ev.initialise !== undefined){
        console.log('pinch: initialise');
    }else{
        console.log(`pan x:${ev.delta.x.toFixed(3)}, y:${ev.delta.y.toFixed(3)}, x:${ev.delta.z.toFixed(3)}` );
    }
);

Add a rotate event. This event gets an initialise property for the first callback.

//ev attributes
//initialise: only exists for the first callback
//theta: radian angle change from first call
gestures.addEventListener( 'rotate', (ev)=>{ 
    if (ev.initialise !== undefined){
        console.log('rotate: initialise');
    }else{
        console.log(`rotate ${ev.theta.toFixed(3)}`);
    }
});

An online example is available here

NikLever / XRGestures

readme

XRGestures

You-Tube tutorial

Get Started

Links