From 0cb2da3bc10fdf55e5405fe8774a58ab95432bbc Mon Sep 17 00:00:00 2001 From: x0penghui Date: Sat, 9 Nov 2019 15:55:33 +0800 Subject: [PATCH] Add event "touchs" --- src/EventHandler.js | 174 ++++++++++++++++++++++++++++++++++++++------ 1 file changed, 150 insertions(+), 24 deletions(-) diff --git a/src/EventHandler.js b/src/EventHandler.js index ec308a6..d19c0eb 100644 --- a/src/EventHandler.js +++ b/src/EventHandler.js @@ -1,52 +1,80 @@ + + + + var EventHandler = { mouse : vec3.create(), oldMouse : vec3.create(), - vector : vec3.create(), - state : "up", button : 0, - timeoutID : null, - + moveNum : 0, + ScrollNum : 0, + targetTouches : {length:0}, + os :function (){ + var ua = navigator.userAgent, + isWindowsPhone = /(?:Windows Phone)/.test(ua), + isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone, + isAndroid = /(?:Android)/.test(ua), + isFireFox = /(?:Firefox)/.test(ua), + isChrome = /(?:Chrome|CriOS)/.test(ua), + isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)), + isPhone = /(?:iPhone)/.test(ua) && !isTablet, + isPc = !isPhone && !isAndroid && !isSymbian; + return { + isTablet: isTablet, + isPhone: isPhone, + isAndroid: isAndroid, + isPc: isPc + }; + }(), + init : function() { window.addEventListener( "resize", bind( this, this.onResize ), false ); - vec3.zero( this.oldMouse ); vec3.zero( this.mouse ); }, bind : function() { - - canvas.addEventListener( 'mousemove', bind( this, this.onMouseMove ), false ); - canvas.addEventListener( 'mousedown', bind( this, this.onMouseDown ), false ); - canvas.addEventListener( 'mouseup', bind( this, this.onMouseUp ), false ); - - document.addEventListener( "DOMMouseScroll", bind( this, this.onScroll ), false ); - document.addEventListener( "mousewheel", bind( this, this.onScroll ), false ); - + if (this.os.isAndroid || this.os.isPhone || this.os.isTablet) { + $("body").css({'touch-action': 'none'}); + document.body.addEventListener('touchmove', (e) => { + e.preventDefault(); + e.stopPropagation(); + }, { passive: false }); + canvas.addEventListener( 'touchmove', bind( this, this.onTouchmove ), false ); + canvas.addEventListener( 'touchstart', bind( this, this.onTouchstart ), false ); + canvas.addEventListener( 'touchend', bind( this, this.onTouchend ), false ); + }else{ + canvas.addEventListener( 'mousemove', bind( this, this.onMouseMove ), false ); + canvas.addEventListener( 'mousedown', bind( this, this.onMouseDown ), false ); + canvas.addEventListener( 'mouseup', bind( this, this.onMouseUp ), false ); + document.addEventListener( "DOMMouseScroll", bind( this, this.onScroll ), false ); + document.addEventListener( "mousewheel", bind( this, this.onScroll ), false ); + } document.addEventListener( "keydown", bind( this, this.onKeyDown ), false ); document.addEventListener( "keyup", bind( this, this.onKeyUp ), false ); canvas.addEventListener( 'contextmenu', function( event ) { event.preventDefault(); }, false ); canvas.onselectstart = function() { return false; }; - }, - + getMouse : function( event, mouse ) { - - mouse[0] = event.clientX; - mouse[1] = event.clientY; - + if(event.isTrusted && !event.clientX){ + mouse[0] = event.changedTouches[0].clientX; + mouse[1] = event.changedTouches[0].clientY; + }else{ + mouse[0] = event.clientX; + mouse[1] = event.clientY; + } return mouse; - }, - + onMouseDown : function( event ) { - event.stopPropagation(); canvas.setCapture(); @@ -76,7 +104,6 @@ var EventHandler = { }, onMouseUp : function( event ) { - event.stopPropagation(); document.releaseCapture(); @@ -94,7 +121,6 @@ var EventHandler = { }, onMouseMove : function( event ) { - event.stopPropagation(); var mouse = this.getMouse( event, this.mouse ), @@ -132,6 +158,106 @@ var EventHandler = { } }, + onTouchstart : function( event ) { + event.stopPropagation(); + canvas.setCapture(); + this.state = "down"; + this.targetTouches=event.targetTouches; + if(this.targetTouches.length == 1){ + this.button=0; + }else if(this.targetTouches.length > 1){ + this.button=2; + } + + if ( invertedControls ) { + + this.button = ( this.button + 2 ) % 4; + + } + + var oldMouse = this.getMouse( event, this.oldMouse ); + + if ( this.button === 0 ) { + + Camera.startRotate( oldMouse ); + + } else if ( this.button === 2 ) { + + Camera.startPan( oldMouse ); + + } + + this.onTouchmove(event); + this.timeoutID = setTimeout( bind( this, this.onClickTimeout ), 250 ); + }, + + onTouchend : function( event ) { + event.stopPropagation(); + document.releaseCapture(); + this.ScrollNum=0; + if ( this.state === "down" ) { + this.onClick( event ); + clearTimeout( this.timeoutID ); + }else if(this.moveNum < 3 && this.state === "drag" && this.targetTouches.length == 1 ){ + this.button=2; + if ( invertedControls ) { + this.button = ( this.button + 2 ) % 4; + } + if ( this.button==2 ) { + var oldMouse = this.getMouse( event, this.oldMouse ); + Camera.startPan( oldMouse ); + } + this.onClick( event ); + clearTimeout( this.timeoutID ); + } + + if(this.state === "drag"){ + this.moveNum=0; + } + + this.targetTouches=event.targetTouches; + this.state = "up"; + Camera.updateRay = true; + }, + + onTouchmove : function( event ) { + event.stopPropagation(); + this.moveNum++; + if(event.targetTouches.length > 1){ + var length = Math.pow(event.targetTouches[1].clientX-event.targetTouches[0].clientX,2)+Math.pow(event.targetTouches[1].clientY-event.targetTouches[0].clientY,2); + var width = document.body.clientWidth*0.4; + length=Math.sqrt(length); + if( (this.ScrollNum == 0 && length > width) || this.ScrollNum != 0 ){ + if(this.ScrollNum == 0){ + this.ScrollNum=length; + } + px=length-this.ScrollNum; + var bakevent = event; + event.wheelDelta=px/2; + this.onScroll(event); + clearTimeout( this.timeoutID ); + return true; + } + } + var mouse = this.getMouse( event, this.mouse ), + len, ray; + if ( this.state === "down" ) { + len = vec3.lengthSquared( vec3.subtract( mouse, this.oldMouse, this.vector ) ); + if ( len > 60 ) { + this.state = "drag"; + clearTimeout( this.timeoutID ); + } + } + if ( this.state === "drag" ) { + if ( this.button === 0 ) { + Camera.rotate(); + } else if ( this.button === 2 ) { + Camera.pan(); + } + } else { + Camera.updateRay = true; + } + }, onClick : function( ) {