diff --git a/examples/picking/snapToEdge.html b/examples/picking/snapToEdge.html
index 651afa778..60932a324 100644
--- a/examples/picking/snapToEdge.html
+++ b/examples/picking/snapToEdge.html
@@ -34,6 +34,7 @@
Components Used
const viewer = new Viewer({
canvasId: "myCanvas",
+ logarithmicDepthBufferEnabled: true,
dtxEnabled: true // Enable data texture model representation
});
@@ -67,14 +68,14 @@ Components Used
markerDiv.style.position = "absolute";
markerDiv.style.pointerEvents = "none";
- viewer.scene.input.on("mousemove", function (canvasPos) {
+ // Mouse and touch input
+ function updateCursorPosition(canvasPos) {
const snapPickResult = viewer.scene.snapPick({
- canvasPos: canvasPos,
+ canvasPos,
snapRadius: 30,
snapMode: "edge",
});
-
if (snapPickResult && snapPickResult.snappedCanvasPos) {
markerDiv.style.marginLeft = `${snapPickResult.snappedCanvasPos[0] - 10}px`;
markerDiv.style.marginTop = `${snapPickResult.snappedCanvasPos[1] - 10}px`;
@@ -86,7 +87,22 @@ Components Used
markerDiv.style.background = "white";
markerDiv.style.border = "1px solid black";
}
- });
+ }
+
+ function mouseUpdateCursorPosition(event) {
+ event.preventDefault();
+ updateCursorPosition([event.clientX, event.clientY]);
+ }
+
+ function touchUpdateCursorPosition(event) {
+ event.preventDefault();
+ const touch = event.touches[0];
+ updateCursorPosition([touch.clientX, touch.clientY]);
+ }
+
+ document.addEventListener("mousemove", mouseUpdateCursorPosition);
+ document.addEventListener("touchstart", touchUpdateCursorPosition);
+ document.addEventListener("touchmove", touchUpdateCursorPosition);
diff --git a/examples/picking/snapToVertex.html b/examples/picking/snapToVertex.html
index 34285a25b..2676a434a 100644
--- a/examples/picking/snapToVertex.html
+++ b/examples/picking/snapToVertex.html
@@ -34,6 +34,7 @@ Components Used
const viewer = new Viewer({
canvasId: "myCanvas",
+ logarithmicDepthBufferEnabled: true,
dtxEnabled: true // Enable data texture model representation
});
@@ -67,14 +68,14 @@ Components Used
markerDiv.style.position = "absolute";
markerDiv.style.pointerEvents = "none";
- viewer.scene.input.on("mousemove", function (canvasPos) {
+ // Mouse and touch input
+ function updateCursorPosition(canvasPos) {
const snapPickResult = viewer.scene.snapPick({
- canvasPos: canvasPos,
+ canvasPos,
snapRadius: 30,
snapMode: "vertex",
});
-
if (snapPickResult && snapPickResult.snappedCanvasPos) {
markerDiv.style.marginLeft = `${snapPickResult.snappedCanvasPos[0] - 10}px`;
markerDiv.style.marginTop = `${snapPickResult.snappedCanvasPos[1] - 10}px`;
@@ -86,8 +87,22 @@ Components Used
markerDiv.style.background = "white";
markerDiv.style.border = "1px solid black";
}
- });
+ }
+
+ function mouseUpdateCursorPosition(event) {
+ event.preventDefault();
+ updateCursorPosition([event.clientX, event.clientY]);
+ }
+
+ function touchUpdateCursorPosition(event) {
+ event.preventDefault();
+ const touch = event.touches[0];
+ updateCursorPosition([touch.clientX, touch.clientY]);
+ }
+ document.addEventListener("mousemove", mouseUpdateCursorPosition);
+ document.addEventListener("touchstart", touchUpdateCursorPosition);
+ document.addEventListener("touchmove", touchUpdateCursorPosition);