Skip to content

Commit 8636e7d

Browse files
mrdoobmrdoob
authored
Merge pull request #20316 from Mugen87/dev35
Examples: More usage of pointer events and terminology.
2 parents ef47b33 + 8be3d86 commit 8636e7d

9 files changed

+70
-69
lines changed

‎examples/misc_boxselection.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
body {
1010
background-color: #f0f0f0;
1111
color: #000;
12+
touch-action: none;
1213
}
1314

1415
a {
@@ -138,7 +139,7 @@
138139
var selectionBox = new SelectionBox( camera, scene );
139140
var helper = new SelectionHelper( selectionBox, renderer, 'selectBox' );
140141

141-
document.addEventListener( 'mousedown', function ( event ) {
142+
document.addEventListener( 'pointerdown', function ( event ) {
142143

143144
for ( var item of selectionBox.collection ) {
144145

@@ -153,7 +154,7 @@
153154

154155
} );
155156

156-
document.addEventListener( 'mousemove', function ( event ) {
157+
document.addEventListener( 'pointermove', function ( event ) {
157158

158159
if ( helper.isDown ) {
159160

@@ -180,7 +181,7 @@
180181

181182
} );
182183

183-
document.addEventListener( 'mouseup', function ( event ) {
184+
document.addEventListener( 'pointerup', function ( event ) {
184185

185186
selectionBox.endPoint.set(
186187
( event.clientX / window.innerWidth ) * 2 - 1,

‎examples/webgl_geometry_nurbs.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@
3535
var group;
3636

3737
var targetRotation = 0;
38-
var targetRotationOnMouseDown = 0;
38+
var targetRotationOnPointerDown = 0;
3939

40-
var mouseX = 0;
41-
var mouseXOnMouseDown = 0;
40+
var pointerX = 0;
41+
var pointerXOnPointerDown = 0;
4242

4343
var windowHalfX = window.innerWidth / 2;
4444

@@ -195,8 +195,8 @@
195195

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

198-
mouseXOnMouseDown = event.clientX - windowHalfX;
199-
targetRotationOnMouseDown = targetRotation;
198+
pointerXOnPointerDown = event.clientX - windowHalfX;
199+
targetRotationOnPointerDown = targetRotation;
200200

201201
document.addEventListener( 'pointermove', onPointerMove, false );
202202
document.addEventListener( 'pointerup', onPointerUp, false );
@@ -207,9 +207,9 @@
207207

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

210-
mouseX = event.clientX - windowHalfX;
210+
pointerX = event.clientX - windowHalfX;
211211

212-
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
212+
targetRotation = targetRotationOnPointerDown + ( pointerX - pointerXOnPointerDown ) * 0.02;
213213

214214
}
215215

‎examples/webgl_geometry_shapes.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@
2929
var group;
3030

3131
var targetRotation = 0;
32-
var targetRotationOnMouseDown = 0;
32+
var targetRotationOnPointerDown = 0;
3333

34-
var mouseX = 0;
35-
var mouseXOnMouseDown = 0;
34+
var pointerX = 0;
35+
var pointerXOnPointerDown = 0;
3636

3737
var windowHalfX = window.innerWidth / 2;
3838

@@ -380,8 +380,8 @@
380380

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

383-
mouseXOnMouseDown = event.clientX - windowHalfX;
384-
targetRotationOnMouseDown = targetRotation;
383+
pointerXOnPointerDown = event.clientX - windowHalfX;
384+
targetRotationOnPointerDown = targetRotation;
385385

386386
document.addEventListener( 'pointermove', onPointerMove, false );
387387
document.addEventListener( 'pointerup', onPointerUp, false );
@@ -392,9 +392,9 @@
392392

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

395-
mouseX = event.clientX - windowHalfX;
395+
pointerX = event.clientX - windowHalfX;
396396

397-
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
397+
targetRotation = targetRotationOnPointerDown + ( pointerX - pointerXOnPointerDown ) * 0.02;
398398

399399
}
400400

‎examples/webgl_geometry_text.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -77,10 +77,10 @@
7777
for ( var i in weightMap ) reverseWeightMap[ weightMap[ i ] ] = i;
7878

7979
var targetRotation = 0;
80-
var targetRotationOnMouseDown = 0;
80+
var targetRotationOnPointerDown = 0;
8181

82-
var mouseX = 0;
83-
var mouseXOnMouseDown = 0;
82+
var pointerX = 0;
83+
var pointerXOnPointerDown = 0;
8484

8585
var windowHalfX = window.innerWidth / 2;
8686

@@ -448,8 +448,8 @@
448448

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

451-
mouseXOnMouseDown = event.clientX - windowHalfX;
452-
targetRotationOnMouseDown = targetRotation;
451+
pointerXOnPointerDown = event.clientX - windowHalfX;
452+
targetRotationOnPointerDown = targetRotation;
453453

454454
document.addEventListener( 'pointermove', onPointerMove, false );
455455
document.addEventListener( 'pointerup', onPointerUp, false );
@@ -460,9 +460,9 @@
460460

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

463-
mouseX = event.clientX - windowHalfX;
463+
pointerX = event.clientX - windowHalfX;
464464

465-
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
465+
targetRotation = targetRotationOnPointerDown + ( pointerX - pointerXOnPointerDown ) * 0.02;
466466

467467
}
468468

‎examples/webgl_loader_ttf.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@
3535
var mirror = true;
3636

3737
var targetRotation = 0;
38-
var targetRotationOnMouseDown = 0;
38+
var targetRotationOnPointerDown = 0;
3939

40-
var mouseX = 0;
41-
var mouseXOnMouseDown = 0;
40+
var pointerX = 0;
41+
var pointerXOnPointerDown = 0;
4242

4343
var windowHalfX = window.innerWidth / 2;
4444

@@ -239,8 +239,8 @@
239239

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

242-
mouseXOnMouseDown = event.clientX - windowHalfX;
243-
targetRotationOnMouseDown = targetRotation;
242+
pointerXOnPointerDown = event.clientX - windowHalfX;
243+
targetRotationOnPointerDown = targetRotation;
244244

245245
document.addEventListener( 'pointermove', onPointerMove, false );
246246
document.addEventListener( 'pointerup', onPointerUp, false );
@@ -251,9 +251,9 @@
251251

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

254-
mouseX = event.clientX - windowHalfX;
254+
pointerX = event.clientX - windowHalfX;
255255

256-
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
256+
targetRotation = targetRotationOnPointerDown + ( pointerX - pointerXOnPointerDown ) * 0.02;
257257

258258
}
259259

‎examples/webgl_materials_cubemap_dynamic.html‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
77
<link type="text/css" rel="stylesheet" href="main.css">
8+
<style>
9+
body {
10+
touch-action: none;
11+
}
12+
</style>
813
</head>
914
<body>
1015

@@ -88,7 +93,7 @@
8893

8994
//
9095

91-
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
96+
document.addEventListener( 'pointerdown', onPointerDown, false );
9297
document.addEventListener( 'wheel', onDocumentMouseWheel, false );
9398

9499
window.addEventListener( 'resize', onWindowResized, false );
@@ -104,7 +109,7 @@
104109

105110
}
106111

107-
function onDocumentMouseDown( event ) {
112+
function onPointerDown( event ) {
108113

109114
event.preventDefault();
110115

@@ -114,22 +119,22 @@
114119
onPointerDownLon = lon;
115120
onPointerDownLat = lat;
116121

117-
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
118-
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
122+
document.addEventListener( 'pointermove', onPointerMove, false );
123+
document.addEventListener( 'pointerup', onPointerUp, false );
119124

120125
}
121126

122-
function onDocumentMouseMove( event ) {
127+
function onPointerMove( event ) {
123128

124129
lon = ( event.clientX - onPointerDownPointerX ) * 0.1 + onPointerDownLon;
125130
lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
126131

127132
}
128133

129-
function onDocumentMouseUp() {
134+
function onPointerUp() {
130135

131-
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
132-
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
136+
document.removeEventListener( 'pointermove', onPointerMove, false );
137+
document.removeEventListener( 'pointerup', onPointerUp, false );
133138

134139
}
135140

‎examples/webgl_materials_texture_canvas.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
right: 0px;
1414
z-index: 3000;
1515
cursor: crosshair;
16+
touch-action: none;
1617
}
1718
</style>
1819
</head>
@@ -79,26 +80,26 @@
7980
var paint = false;
8081

8182
// add canvas event listeners
82-
drawingCanvas.addEventListener( 'mousedown', function ( e ) {
83+
drawingCanvas.addEventListener( 'pointerdown', function ( e ) {
8384

8485
paint = true;
8586
drawStartPos.set( e.offsetX, e.offsetY );
8687

8788
} );
8889

89-
drawingCanvas.addEventListener( 'mousemove', function ( e ) {
90+
drawingCanvas.addEventListener( 'pointermove', function ( e ) {
9091

9192
if ( paint ) draw( drawingContext, e.offsetX, e.offsetY );
9293

9394
} );
9495

95-
drawingCanvas.addEventListener( 'mouseup', function () {
96+
drawingCanvas.addEventListener( 'pointerup', function () {
9697

9798
paint = false;
9899

99100
} );
100101

101-
drawingCanvas.addEventListener( 'mouseleave', function () {
102+
drawingCanvas.addEventListener( 'pointerleave', function () {
102103

103104
paint = false;
104105

‎examples/webgl_panorama_equirectangular.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@
2121
var camera, scene, renderer;
2222

2323
var isUserInteracting = false,
24-
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
25-
lon = 0, onMouseDownLon = 0,
26-
lat = 0, onMouseDownLat = 0,
24+
onPointerDownMouseX = 0, onPointerDownMouseY = 0,
25+
lon = 0, onPointerDownLon = 0,
26+
lat = 0, onPointerDownLat = 0,
2727
phi = 0, theta = 0;
2828

2929
init();
@@ -120,11 +120,11 @@
120120

121121
isUserInteracting = true;
122122

123-
onMouseDownMouseX = event.clientX;
124-
onMouseDownMouseY = event.clientY;
123+
onPointerDownMouseX = event.clientX;
124+
onPointerDownMouseY = event.clientY;
125125

126-
onMouseDownLon = lon;
127-
onMouseDownLat = lat;
126+
onPointerDownLon = lon;
127+
onPointerDownLat = lat;
128128

129129
document.addEventListener( 'pointermove', onPointerMove, false );
130130
document.addEventListener( 'pointerup', onPointerUp, false );
@@ -135,8 +135,8 @@
135135

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

138-
lon = ( onMouseDownMouseX - event.clientX ) * 0.1 + onMouseDownLon;
139-
lat = ( event.clientY - onMouseDownMouseY ) * 0.1 + onMouseDownLat;
138+
lon = ( onPointerDownMouseX - event.clientX ) * 0.1 + onPointerDownLon;
139+
lat = ( event.clientY - onPointerDownMouseY ) * 0.1 + onPointerDownLat;
140140

141141
}
142142

‎examples/webgl_video_panorama_equirectangular.html‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
77
<link type="text/css" rel="stylesheet" href="main.css">
8+
<style>
9+
body {
10+
touch-action: none;
11+
}
12+
</style>
813
</head>
914
<body>
1015
<div id="info">
@@ -66,10 +71,9 @@
6671
renderer.setSize( window.innerWidth, window.innerHeight );
6772
container.appendChild( renderer.domElement );
6873

69-
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
70-
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
71-
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
72-
document.addEventListener( 'wheel', onDocumentMouseWheel, false );
74+
document.addEventListener( 'pointerdown', onPointerDown, false );
75+
document.addEventListener( 'pointermove', onPointerMove, false );
76+
document.addEventListener( 'pointerup', onPointerUp, false );
7377

7478
//
7579

@@ -86,9 +90,7 @@
8690

8791
}
8892

89-
function onDocumentMouseDown( event ) {
90-
91-
event.preventDefault();
93+
function onPointerDown( event ) {
9294

9395
isUserInteracting = true;
9496

@@ -100,7 +102,7 @@
100102

101103
}
102104

103-
function onDocumentMouseMove( event ) {
105+
function onPointerMove( event ) {
104106

105107
if ( isUserInteracting === true ) {
106108

@@ -111,20 +113,12 @@
111113

112114
}
113115

114-
function onDocumentMouseUp() {
116+
function onPointerUp() {
115117

116118
isUserInteracting = false;
117119

118120
}
119121

120-
function onDocumentMouseWheel( event ) {
121-
122-
distance += event.deltaY * 0.05;
123-
124-
distance = THREE.MathUtils.clamp( distance, 1, 50 );
125-
126-
}
127-
128122
function animate() {
129123

130124
requestAnimationFrame( animate );

0 commit comments

Comments
 (0)