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); \ No newline at end of file diff --git a/examples/picking/snapToVertex_vbo.html b/examples/picking/snapToVertex_vbo.html index 1b28858ba..a827b7b84 100644 --- a/examples/picking/snapToVertex_vbo.html +++ b/examples/picking/snapToVertex_vbo.html @@ -34,6 +34,7 @@

Components Used

const viewer = new Viewer({ canvasId: "myCanvas", + logarithmicDepthBufferEnabled: true, dtxEnabled: false // Disable 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); \ No newline at end of file