Skip to content

Commit

Permalink
Examples: Replaced all touch events usage.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrdoob
mrdoob committed Sep 1, 2020
1 parent 3f1cf4e commit 0a1131f
Show file tree
Hide file tree
Showing 20 changed files with 169 additions and 594 deletions.
66 changes: 24 additions & 42 deletions examples/css3d_panorama.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
var lon = 90, lat = 0;
var phi = 0, theta = 0;

var touchX, touchY;
var pointerX, pointerY;

init();
animate();
Expand Down Expand Up @@ -70,6 +70,7 @@
var side = sides[ i ];

var element = document.createElement( 'img' );
element.draggable = false;
element.width = 1026; // 2 pixels extra to close the gap.
element.src = side.url;

Expand All @@ -86,11 +87,10 @@

//

document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'wheel', onDocumentMouseWheel, false );
document.body.style.touchAction = 'none';
document.body.addEventListener( 'pointerdown', onPointerDown, false );

document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
document.addEventListener( 'wheel', onDocumentMouseWheel, false );

window.addEventListener( 'resize', onWindowResize, false );

Expand All @@ -105,29 +105,36 @@

}

function onDocumentMouseDown( event ) {
function onPointerDown( event ) {

if ( event.isPrimary === false ) return;

event.preventDefault();
pointerX = event.clientX;
pointerY = event.clientY;

document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'pointermove', onPointerMove, false );
document.addEventListener( 'pointerup', onPointerUp, false );

}

function onDocumentMouseMove( event ) {
function onPointerMove( event ) {

var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
if ( event.isPrimary === false ) return;

lon -= movementX * 0.1;
lat += movementY * 0.1;
lon -= ( event.clientX - pointerX ) * 0.1;
lat += ( event.clientY - pointerY ) * 0.1;

pointerX = event.clientX;
pointerY = event.clientY;

}

function onDocumentMouseUp() {
function onPointerUp() {

if ( event.isPrimary === false ) return;

document.removeEventListener( 'mousemove', onDocumentMouseMove );
document.removeEventListener( 'mouseup', onDocumentMouseUp );
document.removeEventListener( 'pointermove', onPointerMove );
document.removeEventListener( 'pointerup', onPointerUp );

}

Expand All @@ -141,31 +148,6 @@

}

function onDocumentTouchStart( event ) {

event.preventDefault();

var touch = event.touches[ 0 ];

touchX = touch.screenX;
touchY = touch.screenY;

}

function onDocumentTouchMove( event ) {

event.preventDefault();

var touch = event.touches[ 0 ];

lon -= ( touch.screenX - touchX ) * 0.1;
lat += ( touch.screenY - touchY ) * 0.1;

touchX = touch.screenX;
touchY = touch.screenY;

}

function animate() {

requestAnimationFrame( animate );
Expand Down
Binary file modified examples/screenshots/webgl_points_billboards.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_points_waves.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
61 changes: 14 additions & 47 deletions examples/webgl_geometry_nurbs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,9 +169,8 @@
stats = new Stats();
container.appendChild( stats.dom );

document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
container.style.touchAction = 'none';
container.addEventListener( 'pointerdown', onPointerDown, false );

//

Expand All @@ -192,66 +191,34 @@

//

function onDocumentMouseDown( event ) {
function onPointerDown( event ) {

event.preventDefault();

document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
if ( event.isPrimary === false ) return;

mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;

}

function onDocumentMouseMove( event ) {

mouseX = event.clientX - windowHalfX;

targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

}

function onDocumentMouseUp() {

document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
document.addEventListener( 'pointermove', onPointerMove, false );
document.addEventListener( 'pointerup', onPointerUp, false );

}

function onDocumentMouseOut() {
function onPointerMove( event ) {

document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
if ( event.isPrimary === false ) return;

}

function onDocumentTouchStart( event ) {

if ( event.touches.length == 1 ) {

event.preventDefault();

mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
mouseX = event.clientX - windowHalfX;

}
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

}

function onDocumentTouchMove( event ) {

if ( event.touches.length == 1 ) {
function onPointerUp() {

event.preventDefault();
if ( event.isPrimary === false ) return;

mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;

}
document.removeEventListener( 'pointermove', onPointerMove );
document.removeEventListener( 'pointerup', onPointerUp );

}

Expand Down
63 changes: 16 additions & 47 deletions examples/webgl_geometry_shapes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,9 +354,8 @@
stats = new Stats();
container.appendChild( stats.dom );

document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
container.style.touchAction = 'none';
container.addEventListener( 'pointerdown', onPointerDown, false );

//

Expand All @@ -366,6 +365,8 @@

function onWindowResize() {

windowHalfX = window.innerWidth / 2;

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

Expand All @@ -375,66 +376,34 @@

//

function onDocumentMouseDown( event ) {

event.preventDefault();
function onPointerDown( event ) {

document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
if ( event.isPrimary === false ) return;

mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;

}

function onDocumentMouseMove( event ) {

mouseX = event.clientX - windowHalfX;

targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

}

function onDocumentMouseUp() {

document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
document.addEventListener( 'pointermove', onPointerMove, false );
document.addEventListener( 'pointerup', onPointerUp, false );

}

function onDocumentMouseOut() {
function onPointerMove( event ) {

document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
if ( event.isPrimary === false ) return;

}

function onDocumentTouchStart( event ) {

if ( event.touches.length == 1 ) {

event.preventDefault();

mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
mouseX = event.clientX - windowHalfX;

}
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

}

function onDocumentTouchMove( event ) {

if ( event.touches.length == 1 ) {
function onPointerUp() {

event.preventDefault();
if ( event.isPrimary === false ) return;

mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;

}
document.removeEventListener( 'pointermove', onPointerMove );
document.removeEventListener( 'pointerup', onPointerUp );

}

Expand Down
62 changes: 15 additions & 47 deletions examples/webgl_geometry_text.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,9 +192,9 @@

// EVENTS

document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
container.style.touchAction = 'none';
container.addEventListener( 'pointerdown', onPointerDown, false );

document.addEventListener( 'keypress', onDocumentKeyPress, false );
document.addEventListener( 'keydown', onDocumentKeyDown, false );

Expand Down Expand Up @@ -444,66 +444,34 @@

}

function onDocumentMouseDown( event ) {

event.preventDefault();
function onPointerDown( event ) {

document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
if ( event.isPrimary === false ) return;

mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;

}

function onDocumentMouseMove( event ) {

mouseX = event.clientX - windowHalfX;

targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

}

function onDocumentMouseUp() {

document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
document.addEventListener( 'pointermove', onPointerMove, false );
document.addEventListener( 'pointerup', onPointerUp, false );

}

function onDocumentMouseOut() {
function onPointerMove( event ) {

document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
if ( event.isPrimary === false ) return;

}

function onDocumentTouchStart( event ) {

if ( event.touches.length == 1 ) {

event.preventDefault();

mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
mouseX = event.clientX - windowHalfX;

}
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

}

function onDocumentTouchMove( event ) {

if ( event.touches.length == 1 ) {
function onPointerUp() {

event.preventDefault();

mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
if ( event.isPrimary === false ) return;

}
document.removeEventListener( 'pointermove', onPointerMove );
document.removeEventListener( 'pointerup', onPointerUp );

}

Expand Down

0 comments on commit 0a1131f

Please sign in to comment.