Enable logarithmic depth buffer for snapping examples

xeokit · Sep 13, 2023 · 2bd7a5b · 2bd7a5b
1 parent fc14ed0
commit 2bd7a5b
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 12 deletions.
diff --git a/examples/picking/snapToEdge.html b/examples/picking/snapToEdge.html
@@ -34,6 +34,7 @@ <h3>Components Used</h3>
 
     const viewer = new Viewer({
         canvasId: "myCanvas",
+        logarithmicDepthBufferEnabled: true,
         dtxEnabled: true // Enable data texture model representation
     });
 
@@ -67,14 +68,14 @@ <h3>Components Used</h3>
     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 @@ <h3>Components Used</h3>
             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);
 
 
 </script>

diff --git a/examples/picking/snapToVertex.html b/examples/picking/snapToVertex.html
@@ -34,6 +34,7 @@ <h3>Components Used</h3>
 
     const viewer = new Viewer({
         canvasId: "myCanvas",
+        logarithmicDepthBufferEnabled: true,
         dtxEnabled: true // Enable data texture model representation
     });
 
@@ -67,14 +68,14 @@ <h3>Components Used</h3>
     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 @@ <h3>Components Used</h3>
             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);
 
 </script>
 </html>
diff --git a/examples/picking/snapToVertex_vbo.html b/examples/picking/snapToVertex_vbo.html
@@ -34,6 +34,7 @@ <h3>Components Used</h3>
 
     const viewer = new Viewer({
         canvasId: "myCanvas",
+        logarithmicDepthBufferEnabled: true,
         dtxEnabled: false // Disable data texture model representation
     });
 
@@ -67,14 +68,14 @@ <h3>Components Used</h3>
     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 @@ <h3>Components Used</h3>
             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);
 
 </script>
 </html>