meta-client/meta-client/Device/Touch.js

redefining space

import {log} from '../Utilities';

import {Raycaster, Vector2, Mesh, PlaneGeometry, MeshBasicMaterial} from 'three';

import {DeviceOrientationControls} from './lib/DeviceOrientationControls';

var Hammer = require('hammerjs');

let RAYCASTER = new Raycaster();
let MOUSE = new Vector2();
let TIMEOUT = false;

let INTERSECTED = false;
let HELPPLANE = false;

let MOVE = false;

const NAME = 'TouchDevice';

let DEFAULT = {};
DEFAULT.PRESS = 500; //ms (after that time a TOUCH becomes a PRESS)
DEFAULT.TOUCH = 80; //

class Touch {
  constructor(WORLD, HUMAN){
    let that = this;
    this.name = 'TouchDevice';
    log(this.name);

    CONTROLS = new DeviceOrientationControls(CAMERA);
    CAMERA.position.set(0,1,0);

    addEventListener('touchstart', (event) => {
      log(NAME, 'TOUCH start');

      event.preventDefault();

      MOUSE.x = ( event.touches[0].clientX / window.innerWidth ) * 2 - 1;
    	MOUSE.y = - ( event.touches[0].clientY / window.innerHeight ) * 2 + 1;

    	RAYCASTER.setFromCamera( MOUSE, CAMERA );

    	var intersects = RAYCASTER.intersectObjects( SCENE.children, true );

      if(intersects.length>0){

        if(CONTROLS)
           CONTROLS.enabled=false;

        INTERSECTED = intersects[0];

          HUMAN.go('touch', INTERSECTED);
          log(NAME, 'INTERSECTED '+INTERSECTED.object.name);

        }else{
          HUMAN.go('touch');
        }
    });

    addEventListener('touchend', that.mouseUp);

    addEventListener('touchmove', that.mouseMove);
    addEventListener('keydown', function(event){
      //event.preventDefault();
      that.keyUp(event);
    });

    var hammertime = new Hammer(document.body);

    hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
    hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });

    //swipe

    hammertime.on('swiperight', function(ev) {
      ev.preventDefault();
      log(that.name, 'swiperight')
    	HUMAN.go('swipeleft')
    });

    hammertime.on('swipeleft', function(ev) {
      ev.preventDefault();
      log(that.name, 'swipeleft')
    	HUMAN.go('swiperight')
    });

    hammertime.on('swipeup', function(ev) {
      ev.preventDefault();
      log(that.name, 'up')
    	HUMAN.go('swipeup')
    });

    hammertime.on('swipedown', function(ev) {
      ev.preventDefault();
      log(that.name, 'down')
    	HUMAN.go('swipedown')
    });

    //pan

    hammertime.on('panright', function(ev) {
      ev.preventDefault();
      log(that.name, 'panright')
      HUMAN.go('panright')
    });

    hammertime.on('panleft', function(ev) {
      ev.preventDefault();
      log(that.name, 'panleft')
      HUMAN.go('panleft')
    });

    hammertime.on('panup', function(ev) {
      ev.preventDefault();
      log(that.name, 'paneup')
      HUMAN.go('panup')
    });

    hammertime.on('pandown', function(ev) {
      ev.preventDefault();
      log(that.name, 'pandown')
      HUMAN.go('pandown')
    });


  }

  mouseUp(HUMAN){

    //event.preventDefault();

    MOVE = false;

    if(TIMEOUT){
      clearTimeout(TIMEOUT);
      TIMEOUT=false;
      log(NAME, 'TOUCH timeout')
    }

    log(NAME, 'TOUCH end')


    //was something INTERSECTED?
    if(INTERSECTED){
      if(CONTROLS)
         CONTROLS.enabled=true;
      //was mouseMove triggered?
      if(HELPPLANE){
        SCENE.remove(HELPPLANE);
        HELPPLANE=false;
      }else{
        //console.log(INTERSECTED)
      }
    HUMAN.go('release', INTERSECTED);
    INTERSECTED = false;
    }
  }

  mouseMove(){

    MOVE=true;

    event.preventDefault();

    if(TIMEOUT){
      clearTimeout(TIMEOUT);
      TIMEOUT=false;
      log(NAME, 'TOUCH timeout')
    }

    //log(NAME, 'TOUCH move')

    MOUSE.x = ( event.touches[0].clientX / window.innerWidth ) * 2 - 1;
  	MOUSE.y = - ( event.touches[0].clientY / window.innerHeight ) * 2 + 1;

    // update the picking ray with the camera and mouse position
    if(INTERSECTED){
      //log(NAME, 'set HELPPLANE')

      if(!HELPPLANE){
        //create helping plane
        HELPPLANE = new Mesh(new PlaneGeometry(100,100,100,100), new MeshBasicMaterial({color:0x0000ff, wireframe:true, transparent:true, opacity:0}))
        HELPPLANE.position.set(INTERSECTED.object.position.x, INTERSECTED.object.position.y, INTERSECTED.object.position.z);
        HELPPLANE.rotation.set(CAMERA.rotation.x, CAMERA.rotation.y, CAMERA.rotation.z);
        SCENE.add(HELPPLANE);
      }

      RAYCASTER.setFromCamera( MOUSE, CAMERA );

      //send new rays
      let HELPPLANE_INTERSECTS = RAYCASTER.intersectObject(HELPPLANE);
      //hit
      if (HELPPLANE_INTERSECTS.length > 0) {

        let data = { position: HELPPLANE_INTERSECTS[0].point};

        //log(NAME, 'INTERSECTION '+JSON.stringify(data));

        //send grab event
        HUMAN.go('grab', INTERSECTED.object, data);

      }

    }

  }
  keyUp(event){

    switch(event.keyCode){
      case 40: //down
        HUMAN.go('down', event);
      break;
      case 38: //up
        HUMAN.go('up', event);
      break;
      case 37:
        HUMAN.go('left', event);
      break;
      case 39:
        HUMAN.go('right', event);
      break;
      case 13:
        HUMAN.go('enter', event);
      break;
    }
  }

}

export default Touch;