From 57eefb3a7ef60694923a74069fcc209a89c86b79 Mon Sep 17 00:00:00 2001 From: Luca Dalli Date: Tue, 7 Sep 2021 06:38:05 +0200 Subject: [PATCH 1/4] Replace touches with targetTouches --- .../examples/stagingandcameras/index.html | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/modelviewer.dev/examples/stagingandcameras/index.html b/packages/modelviewer.dev/examples/stagingandcameras/index.html index 1fb14e4de1..2fe9914b6c 100644 --- a/packages/modelviewer.dev/examples/stagingandcameras/index.html +++ b/packages/modelviewer.dev/examples/stagingandcameras/index.html @@ -269,15 +269,15 @@

Event listeners can cooperate with camera-controls

}, true); modelViewer.addEventListener('touchstart', (event) => { - startX = event.touches[0].clientX; - startY = event.touches[0].clientY; - panning = event.touches.length === 2; + startX = event.targetTouches[0].clientX; + startY = event.targetTouches[0].clientY; + panning = event.targetTouches.length === 2; if (!panning) return; - const {touches} = event; - lastX = 0.5 * (touches[0].clientX + touches[1].clientX); - lastY = 0.5 * (touches[0].clientY + touches[1].clientY); + const {targetTouches} = event; + lastX = 0.5 * (targetTouches[0].clientX + targetTouches[1].clientX); + lastY = 0.5 * (targetTouches[0].clientY + targetTouches[1].clientY); startPan(); }, true); @@ -290,12 +290,12 @@

Event listeners can cooperate with camera-controls

}, true); modelViewer.addEventListener('touchmove', (event) => { - if (!panning || event.touches.length !== 2) + if (!panning || event.targetTouches.length !== 2) return; - const {touches} = event; - const thisX = 0.5 * (touches[0].clientX + touches[1].clientX); - const thisY = 0.5 * (touches[0].clientY + touches[1].clientY); + const {targetTouches} = event; + const thisX = 0.5 * (targetTouches[0].clientX + targetTouches[1].clientX); + const thisY = 0.5 * (targetTouches[0].clientY + targetTouches[1].clientY); movePan(thisX, thisY); }, true); @@ -304,7 +304,7 @@

Event listeners can cooperate with camera-controls

}, true); self.addEventListener('touchend', (event) => { - if (event.touches.length === 0) { + if (event.targetTouches.length === 0) { recenter(event.changedTouches[0]); } }, true); @@ -369,12 +369,12 @@

Add other interactions like rotating the skybox

}, true); modelViewer.addEventListener('touchstart', (event) => { - panning = event.touches.length === 2; + panning = event.targetTouches.length === 2; if (!panning) return; - const {touches} = event; - lastX = 0.5 * (touches[0].clientX + touches[1].clientX); + const {targetTouches} = event; + lastX = 0.5 * (targetTouches[0].clientX + targetTouches[1].clientX); startPan(); }, true); @@ -387,11 +387,11 @@

Add other interactions like rotating the skybox

}, true); modelViewer.addEventListener('touchmove', (event) => { - if (!panning || event.touches.length !== 2) + if (!panning || event.targetTouches.length !== 2) return; - const {touches} = event; - const thisX = 0.5 * (touches[0].clientX + touches[1].clientX); + const {targetTouches} = event; + const thisX = 0.5 * (targetTouches[0].clientX + targetTouches[1].clientX); updatePan(thisX); }, true); From 56d434ca4b2e1005b03abee578b94b0468cbeedd Mon Sep 17 00:00:00 2001 From: Luca Dalli Date: Tue, 7 Sep 2021 06:40:23 +0200 Subject: [PATCH 2/4] Attach touchend listeners to modelViewer element --- .../modelviewer.dev/examples/stagingandcameras/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/modelviewer.dev/examples/stagingandcameras/index.html b/packages/modelviewer.dev/examples/stagingandcameras/index.html index 2fe9914b6c..c1dedc209d 100644 --- a/packages/modelviewer.dev/examples/stagingandcameras/index.html +++ b/packages/modelviewer.dev/examples/stagingandcameras/index.html @@ -303,7 +303,7 @@

Event listeners can cooperate with camera-controls

recenter(event); }, true); - self.addEventListener('touchend', (event) => { + modelViewer.addEventListener('touchend', (event) => { if (event.targetTouches.length === 0) { recenter(event.changedTouches[0]); } @@ -399,7 +399,7 @@

Add other interactions like rotating the skybox

panning = false; }, true); - self.addEventListener('touchend', (event) => { + modelViewer.addEventListener('touchend', (event) => { panning = false; }, true); From f5b5875e8b5513d2f909859220dff54dbac6f13d Mon Sep 17 00:00:00 2001 From: Luca Dalli Date: Tue, 7 Sep 2021 07:15:54 +0200 Subject: [PATCH 3/4] Check that all touches are on the model-viewer element --- .../examples/stagingandcameras/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/modelviewer.dev/examples/stagingandcameras/index.html b/packages/modelviewer.dev/examples/stagingandcameras/index.html index c1dedc209d..0d21b4ca51 100644 --- a/packages/modelviewer.dev/examples/stagingandcameras/index.html +++ b/packages/modelviewer.dev/examples/stagingandcameras/index.html @@ -269,13 +269,13 @@

Event listeners can cooperate with camera-controls

}, true); modelViewer.addEventListener('touchstart', (event) => { - startX = event.targetTouches[0].clientX; - startY = event.targetTouches[0].clientY; - panning = event.targetTouches.length === 2; + const {targetTouches, touches} = event; + startX = targetTouches[0].clientX; + startY = targetTouches[0].clientY; + panning = targetTouches.length === 2 && targetTouches.length === touches.length; if (!panning) return; - const {targetTouches} = event; lastX = 0.5 * (targetTouches[0].clientX + targetTouches[1].clientX); lastY = 0.5 * (targetTouches[0].clientY + targetTouches[1].clientY); startPan(); @@ -369,11 +369,11 @@

Add other interactions like rotating the skybox

}, true); modelViewer.addEventListener('touchstart', (event) => { - panning = event.targetTouches.length === 2; + const {targetTouches, touches} = event; + panning = targetTouches.length === 2 && targetTouches.length === touches.length; if (!panning) return; - const {targetTouches} = event; lastX = 0.5 * (targetTouches[0].clientX + targetTouches[1].clientX); startPan(); }, true); From ce05942d1fb2e422786b5351510d1c2339869e88 Mon Sep 17 00:00:00 2001 From: Luca Dalli Date: Tue, 7 Sep 2021 09:34:27 +0200 Subject: [PATCH 4/4] Fix recenter bug on touchend --- .../modelviewer.dev/examples/stagingandcameras/index.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/modelviewer.dev/examples/stagingandcameras/index.html b/packages/modelviewer.dev/examples/stagingandcameras/index.html index 0d21b4ca51..07fe7f35b9 100644 --- a/packages/modelviewer.dev/examples/stagingandcameras/index.html +++ b/packages/modelviewer.dev/examples/stagingandcameras/index.html @@ -247,8 +247,8 @@

Event listeners can cooperate with camera-controls

Math.abs(pointer.clientY - startY) > tapDistance) return; const rect = modelViewer.getBoundingClientRect(); - const x = event.clientX - rect.left; - const y = event.clientY - rect.top; + const x = pointer.clientX - rect.left; + const y = pointer.clientY - rect.top; const hit = modelViewer.positionAndNormalFromPoint(x, y); modelViewer.cameraTarget = hit == null ? 'auto auto auto' : hit.position.toString(); @@ -306,6 +306,10 @@

Event listeners can cooperate with camera-controls

modelViewer.addEventListener('touchend', (event) => { if (event.targetTouches.length === 0) { recenter(event.changedTouches[0]); + + if (event.cancelable) { + event.preventDefault(); + } } }, true); })();