Skip to content

Commit 0a1131f

Browse files
mrdoobmrdoob
committed
Examples: Replaced all touch events usage.
1 parent 3f1cf4e commit 0a1131f

20 files changed

+169
-594
lines changed

‎examples/css3d_panorama.html

Lines changed: 24 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
var lon = 90, lat = 0;
2222
var phi = 0, theta = 0;
2323

24-
var touchX, touchY;
24+
var pointerX, pointerY;
2525

2626
init();
2727
animate();
@@ -70,6 +70,7 @@
7070
var side = sides[ i ];
7171

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

@@ -86,11 +87,10 @@
8687

8788
//
8889

89-
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
90-
document.addEventListener( 'wheel', onDocumentMouseWheel, false );
90+
document.body.style.touchAction = 'none';
91+
document.body.addEventListener( 'pointerdown', onPointerDown, false );
9192

92-
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
93-
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
93+
document.addEventListener( 'wheel', onDocumentMouseWheel, false );
9494

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

@@ -105,29 +105,36 @@
105105

106106
}
107107

108-
function onDocumentMouseDown( event ) {
108+
function onPointerDown( event ) {
109+
110+
if ( event.isPrimary === false ) return;
109111

110-
event.preventDefault();
112+
pointerX = event.clientX;
113+
pointerY = event.clientY;
111114

112-
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
113-
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
115+
document.addEventListener( 'pointermove', onPointerMove, false );
116+
document.addEventListener( 'pointerup', onPointerUp, false );
114117

115118
}
116119

117-
function onDocumentMouseMove( event ) {
120+
function onPointerMove( event ) {
118121

119-
var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
120-
var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
122+
if ( event.isPrimary === false ) return;
121123

122-
lon -= movementX * 0.1;
123-
lat += movementY * 0.1;
124+
lon -= ( event.clientX - pointerX ) * 0.1;
125+
lat += ( event.clientY - pointerY ) * 0.1;
126+
127+
pointerX = event.clientX;
128+
pointerY = event.clientY;
124129

125130
}
126131

127-
function onDocumentMouseUp() {
132+
function onPointerUp() {
133+
134+
if ( event.isPrimary === false ) return;
128135

129-
document.removeEventListener( 'mousemove', onDocumentMouseMove );
130-
document.removeEventListener( 'mouseup', onDocumentMouseUp );
136+
document.removeEventListener( 'pointermove', onPointerMove );
137+
document.removeEventListener( 'pointerup', onPointerUp );
131138

132139
}
133140

@@ -141,31 +148,6 @@
141148

142149
}
143150

144-
function onDocumentTouchStart( event ) {
145-
146-
event.preventDefault();
147-
148-
var touch = event.touches[ 0 ];
149-
150-
touchX = touch.screenX;
151-
touchY = touch.screenY;
152-
153-
}
154-
155-
function onDocumentTouchMove( event ) {
156-
157-
event.preventDefault();
158-
159-
var touch = event.touches[ 0 ];
160-
161-
lon -= ( touch.screenX - touchX ) * 0.1;
162-
lat += ( touch.screenY - touchY ) * 0.1;
163-
164-
touchX = touch.screenX;
165-
touchY = touch.screenY;
166-
167-
}
168-
169151
function animate() {
170152

171153
requestAnimationFrame( animate );

‎examples/screenshots/webgl_points_billboards.jpg

-9.36 KB
Loading

‎examples/screenshots/webgl_points_waves.jpg

-2.27 KB
Loading

‎examples/webgl_geometry_nurbs.html

Lines changed: 14 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -169,9 +169,8 @@
169169
stats = new Stats();
170170
container.appendChild( stats.dom );
171171

172-
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
173-
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
174-
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
172+
container.style.touchAction = 'none';
173+
container.addEventListener( 'pointerdown', onPointerDown, false );
175174

176175
//
177176

@@ -192,66 +191,34 @@
192191

193192
//
194193

195-
function onDocumentMouseDown( event ) {
194+
function onPointerDown( event ) {
196195

197-
event.preventDefault();
198-
199-
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
200-
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
201-
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
196+
if ( event.isPrimary === false ) return;
202197

203198
mouseXOnMouseDown = event.clientX - windowHalfX;
204199
targetRotationOnMouseDown = targetRotation;
205200

206-
}
207-
208-
function onDocumentMouseMove( event ) {
209-
210-
mouseX = event.clientX - windowHalfX;
211-
212-
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
213-
214-
}
215-
216-
function onDocumentMouseUp() {
217-
218-
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
219-
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
220-
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
201+
document.addEventListener( 'pointermove', onPointerMove, false );
202+
document.addEventListener( 'pointerup', onPointerUp, false );
221203

222204
}
223205

224-
function onDocumentMouseOut() {
206+
function onPointerMove( event ) {
225207

226-
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
227-
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
228-
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
208+
if ( event.isPrimary === false ) return;
229209

230-
}
231-
232-
function onDocumentTouchStart( event ) {
233-
234-
if ( event.touches.length == 1 ) {
235-
236-
event.preventDefault();
237-
238-
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
239-
targetRotationOnMouseDown = targetRotation;
210+
mouseX = event.clientX - windowHalfX;
240211

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

243214
}
244215

245-
function onDocumentTouchMove( event ) {
246-
247-
if ( event.touches.length == 1 ) {
216+
function onPointerUp() {
248217

249-
event.preventDefault();
218+
if ( event.isPrimary === false ) return;
250219

251-
mouseX = event.touches[ 0 ].pageX - windowHalfX;
252-
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
253-
254-
}
220+
document.removeEventListener( 'pointermove', onPointerMove );
221+
document.removeEventListener( 'pointerup', onPointerUp );
255222

256223
}
257224

‎examples/webgl_geometry_shapes.html

Lines changed: 16 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -354,9 +354,8 @@
354354
stats = new Stats();
355355
container.appendChild( stats.dom );
356356

357-
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
358-
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
359-
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
357+
container.style.touchAction = 'none';
358+
container.addEventListener( 'pointerdown', onPointerDown, false );
360359

361360
//
362361

@@ -366,6 +365,8 @@
366365

367366
function onWindowResize() {
368367

368+
windowHalfX = window.innerWidth / 2;
369+
369370
camera.aspect = window.innerWidth / window.innerHeight;
370371
camera.updateProjectionMatrix();
371372

@@ -375,66 +376,34 @@
375376

376377
//
377378

378-
function onDocumentMouseDown( event ) {
379-
380-
event.preventDefault();
379+
function onPointerDown( event ) {
381380

382-
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
383-
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
384-
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
381+
if ( event.isPrimary === false ) return;
385382

386383
mouseXOnMouseDown = event.clientX - windowHalfX;
387384
targetRotationOnMouseDown = targetRotation;
388385

389-
}
390-
391-
function onDocumentMouseMove( event ) {
392-
393-
mouseX = event.clientX - windowHalfX;
394-
395-
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
396-
397-
}
398-
399-
function onDocumentMouseUp() {
400-
401-
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
402-
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
403-
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
386+
document.addEventListener( 'pointermove', onPointerMove, false );
387+
document.addEventListener( 'pointerup', onPointerUp, false );
404388

405389
}
406390

407-
function onDocumentMouseOut() {
391+
function onPointerMove( event ) {
408392

409-
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
410-
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
411-
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
393+
if ( event.isPrimary === false ) return;
412394

413-
}
414-
415-
function onDocumentTouchStart( event ) {
416-
417-
if ( event.touches.length == 1 ) {
418-
419-
event.preventDefault();
420-
421-
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
422-
targetRotationOnMouseDown = targetRotation;
395+
mouseX = event.clientX - windowHalfX;
423396

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

426399
}
427400

428-
function onDocumentTouchMove( event ) {
429-
430-
if ( event.touches.length == 1 ) {
401+
function onPointerUp() {
431402

432-
event.preventDefault();
403+
if ( event.isPrimary === false ) return;
433404

434-
mouseX = event.touches[ 0 ].pageX - windowHalfX;
435-
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
436-
437-
}
405+
document.removeEventListener( 'pointermove', onPointerMove );
406+
document.removeEventListener( 'pointerup', onPointerUp );
438407

439408
}
440409

‎examples/webgl_geometry_text.html

Lines changed: 15 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -192,9 +192,9 @@
192192

193193
// EVENTS
194194

195-
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
196-
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
197-
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
195+
container.style.touchAction = 'none';
196+
container.addEventListener( 'pointerdown', onPointerDown, false );
197+
198198
document.addEventListener( 'keypress', onDocumentKeyPress, false );
199199
document.addEventListener( 'keydown', onDocumentKeyDown, false );
200200

@@ -444,66 +444,34 @@
444444

445445
}
446446

447-
function onDocumentMouseDown( event ) {
448-
449-
event.preventDefault();
447+
function onPointerDown( event ) {
450448

451-
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
452-
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
453-
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
449+
if ( event.isPrimary === false ) return;
454450

455451
mouseXOnMouseDown = event.clientX - windowHalfX;
456452
targetRotationOnMouseDown = targetRotation;
457453

458-
}
459-
460-
function onDocumentMouseMove( event ) {
461-
462-
mouseX = event.clientX - windowHalfX;
463-
464-
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
465-
466-
}
467-
468-
function onDocumentMouseUp() {
469-
470-
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
471-
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
472-
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
454+
document.addEventListener( 'pointermove', onPointerMove, false );
455+
document.addEventListener( 'pointerup', onPointerUp, false );
473456

474457
}
475458

476-
function onDocumentMouseOut() {
459+
function onPointerMove( event ) {
477460

478-
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
479-
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
480-
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
461+
if ( event.isPrimary === false ) return;
481462

482-
}
483-
484-
function onDocumentTouchStart( event ) {
485-
486-
if ( event.touches.length == 1 ) {
487-
488-
event.preventDefault();
489-
490-
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
491-
targetRotationOnMouseDown = targetRotation;
463+
mouseX = event.clientX - windowHalfX;
492464

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

495467
}
496468

497-
function onDocumentTouchMove( event ) {
498-
499-
if ( event.touches.length == 1 ) {
469+
function onPointerUp() {
500470

501-
event.preventDefault();
502-
503-
mouseX = event.touches[ 0 ].pageX - windowHalfX;
504-
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
471+
if ( event.isPrimary === false ) return;
505472

506-
}
473+
document.removeEventListener( 'pointermove', onPointerMove );
474+
document.removeEventListener( 'pointerup', onPointerUp );
507475

508476
}
509477

0 commit comments

Comments
 (0)