@xeokit/xeokit-sdk 2.6.0-beta-12 → 2.6.0-beta-14

package/dist/xeokit-sdk.es.js

@@ -9141,6 +9141,140 @@ class MarqueePickerMouseControl extends Component {
     }
 }
 
+/**
+ * A PointerCircle shows a circle, centered at the position of the
+ * mouse or touch pointer.
+ */
+class PointerCircle {
+
+    /**
+     * Constructs a new PointerCircle.
+     * @param viewer The Viewer
+     * @param [cfg] PointerCircle configuration.
+     * @param [cfg.active=true] Whether PointerCircle is active. The PointerCircle can only be shown when this is `true` (default).
+     */
+    constructor(viewer, cfg = {}) {
+
+        this.viewer = viewer;
+        this.scene = this.viewer.scene;
+        this._circleDiv = document.createElement('div');
+        this.viewer.scene.canvas.canvas.parentNode.insertBefore(this._circleDiv, this.viewer.scene.canvas.canvas);
+        this._circleDiv.style.backgroundColor = "transparent";
+        this._circleDiv.style.border = "2px solid green";
+        this._circleDiv.style.borderRadius = "50px";
+        this._circleDiv.style.width = "50px";
+        this._circleDiv.style.height = "50px";
+        this._circleDiv.style.margin = "-200px -200px";
+        this._circleDiv.style.zIndex = "100000";
+        this._circleDiv.style.position = "absolute";
+        this._circleDiv.style.pointerEvents = "none";
+
+        this._circlePos = null;
+
+        this._circleMaxRadius = 200;
+        this._circleMinRadius = 2;
+
+        this._active = (cfg.active !== false);
+        this._visible = false;
+
+        this._running = false;
+        this._destroyed = false;
+    }
+
+    /**
+     * Show the circle at the given canvas coordinates and begin shrinking it.
+     */
+    start(circlePos) {
+        if (this._destroyed) {
+            return;
+        }
+        this._circlePos = circlePos;
+        this._running = false;
+        this._circleRadius = this._circleMaxRadius;
+        this._circleDiv.style.borderRadius = `${this._circleRadius}px`;
+        this._circleDiv.style.marginLeft = `${this._circlePos[0] - this._circleRadius}px`;
+        this._circleDiv.style.marginTop = `${this._circlePos[1] - this._circleRadius}px`;
+
+        const startValue = this._circleMaxRadius;
+        const endValue = 2;
+        let startTime;
+        const duration = 300;
+
+        const animateCircle = (currentTime) => {
+            if (!this._running) {
+                return;
+            }
+            if (!startTime) {
+                startTime = currentTime;
+            }
+
+            const elapsedTime = currentTime - startTime;
+            const progress = Math.min(elapsedTime / duration, 1);
+            const interpolatedValue = startValue + (endValue - startValue) * progress;
+
+            this._circleRadius = interpolatedValue;
+            this._circleDiv.style.width = `${this._circleRadius}px`;
+            this._circleDiv.style.height = `${this._circleRadius}px`;
+            this._circleDiv.style.marginLeft = `${this._circlePos[0] - this._circleRadius / 2}px`;
+            this._circleDiv.style.marginTop = `${this._circlePos[1] - this._circleRadius / 2}px`;
+
+            if (progress < 1) {
+                requestAnimationFrame(animateCircle);
+            }
+        };
+        this._running = true;
+        requestAnimationFrame(animateCircle);
+        this._circleDiv.style.visibility = "visible";
+    }
+
+    /**
+     * Stop the shricking circle and hide it.
+     */
+    stop() {
+        if (this._destroyed) {
+            return;
+        }
+        this._running = false;
+        this._circleRadius = this._circleMaxRadius;
+        this._circleDiv.style.borderRadius = `${this._circleRadius}px`;
+        this._circleDiv.style.visibility = "hidden";
+    }
+
+    /**
+     * Sets the zoom factor for the lens.
+     *
+     * This is `2` by default.
+     *
+     * @param durationMs
+     */
+    set durationMs(durationMs) {
+        this.stop();
+        this._durationMs = durationMs;
+    }
+
+    /**
+     * Gets the zoom factor for the lens.
+     *
+     * This is `2` by default.
+     *
+     * @returns Number
+     */
+    get durationMs() {
+        return this._durationMs;
+    }
+
+    /**
+     * Destroys this PointerCircle.
+     */
+    destroy() {
+        if (!this._destroyed) {
+            this.stop();
+            document.body.removeChild(this._circleDiv);
+            this._destroyed = true;
+        }
+    }
+}
+
 /**
  @desc Base class for {@link Viewer} plugin classes.
  */
@@ -12624,6 +12758,46 @@ class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
  *         });
  * });
  * ````
+ *
+ * ## Example 5: Creating AngleMeasurements with Touch Input
+ *
+ * In our fifth example, we'll show how to create angle measurements with touch input, with snapping
+ * to the nearest vertex or edge. While creating the measurements, a long-touch when setting the
+ * start, corner or end point will cause the point to snap to the nearest vertex or edge. A quick
+ * touch-release will immediately set the point at the tapped position on the object surface.
+ *
+ * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/measurement/#angle_createWithTouch_snapping)]
+ *
+ * ````javascript
+ * import {Viewer, XKTLoaderPlugin, AngleMeasurementsPlugin, AngleMeasurementsTouchControl} from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas",
+ *     transparent: true
+ * });
+ *
+ * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];
+ * viewer.scene.camera.look = [10.97, 5.82, -11.22];
+ * viewer.scene.camera.up = [0.36, 0.83, 0.40];
+ *
+ * const xktLoader = new XKTLoaderPlugin(viewer);
+ *
+ * const angleMeasurements = new AngleMeasurementsPlugin(viewer);
+ *
+ * const model = xktLoader.load({
+ *      src: "./models/xkt/duplex/duplex.xkt"
+ * });
+ *
+ * const angleMeasurements = new AngleMeasurementsPlugin(viewer);
+ *
+ * const angleMeasurementsTouchControl  = new AngleMeasurementsTouchControl(angleMeasurements, {
+ *     pointerLens : new PointerLens(viewer),
+ *     snapToVertex: true,
+ *     snapToEdge: true
+ * })
+ *
+ * angleMeasurementsTouchControl.activate();
+ * ````
  */
 class AngleMeasurementsPlugin extends Plugin {
 
@@ -12825,6 +12999,915 @@ class AngleMeasurementsPlugin extends Plugin {
     }
 }
 
+const WAITING_FOR_ORIGIN_TOUCH_START$1 = 0;
+const WAITING_FOR_ORIGIN_QUICK_TOUCH_END$1 = 1;
+const WAITING_FOR_ORIGIN_LONG_TOUCH_END$1 = 2;
+
+const WAITING_FOR_CORNER_TOUCH_START = 3;
+const WAITING_FOR_CORNER_QUICK_TOUCH_END = 4;
+const WAITING_FOR_CORNER_LONG_TOUCH_END = 5;
+
+const WAITING_FOR_TARGET_TOUCH_START$1 = 6;
+const WAITING_FOR_TARGET_QUICK_TOUCH_END$1 = 7;
+const WAITING_FOR_TARGET_LONG_TOUCH_END$1 = 8;
+
+const TOUCH_CANCELING$1 = 7;
+
+/**
+ * Creates {@link AngleMeasurement}s from touch input.
+ *
+ * See {@link AngleMeasurementsPlugin} for more info.
+ *
+ */
+class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
+
+    /**
+     * Creates a AngleMeasurementsTouchControl bound to the given AngleMeasurementsPlugin.
+     */
+    constructor(angleMeasurementsPlugin, cfg = {}) {
+
+        super(angleMeasurementsPlugin.viewer.scene);
+
+        this.pointerLens = cfg.pointerLens;
+        this.pointerCircle = new PointerCircle(angleMeasurementsPlugin.viewer);
+
+        this._active = false;
+
+        const markerDiv = document.createElement('div');
+        const canvas = this.scene.canvas.canvas;
+        canvas.parentNode.insertBefore(markerDiv, canvas);
+
+        markerDiv.style.background = "black";
+        markerDiv.style.border = "2px solid blue";
+        markerDiv.style.borderRadius = "10px";
+        markerDiv.style.width = "5px";
+        markerDiv.style.height = "5px";
+        markerDiv.style.margin = "-200px -200px";
+        markerDiv.style.zIndex = "100";
+        markerDiv.style.position = "absolute";
+        markerDiv.style.pointerEvents = "none";
+
+        this.markerDiv = markerDiv;
+
+        this._currentAngleMeasurement = null;
+
+        this._onCanvasTouchStart = null;
+        this._onCanvasTouchEnd = null;
+        this._longTouchTimeoutMs = 300;
+        this._snapToEdge = cfg.snapToEdge !== false;
+        this._snapToVertex = cfg.snapToVertex !== false;
+        this._touchState = WAITING_FOR_ORIGIN_TOUCH_START$1;
+
+        this._attachPlugin(angleMeasurementsPlugin, cfg);
+    }
+
+    _attachPlugin(angleMeasurementsPlugin) {
+
+        /**
+         * The {@link AngleMeasurementsPlugin} that owns this AngleMeasurementsTouchControl.
+         * @type {AngleMeasurementsPlugin}
+         */
+        this.angleMeasurementsPlugin = angleMeasurementsPlugin;
+
+        /**
+         * The {@link AngleMeasurementsPlugin} that owns this AngleMeasurementsTouchControl.
+         * @type {AngleMeasurementsPlugin}
+         */
+        this.plugin = angleMeasurementsPlugin;
+    }
+
+    /** Gets if this AngleMeasurementsTouchControl is currently active, where it is responding to input.
+     *
+     * @returns {Boolean}
+     */
+    get active() {
+        return this._active;
+    }
+
+    /**
+     * Sets whether snap-to-vertex is enabled for this AngleMeasurementsTouchControl.
+     * This is `true` by default.
+     * @param snapToVertex
+     */
+    set snapToVertex(snapToVertex) {
+        this._snapToVertex = snapToVertex;
+    }
+
+    /**
+     * Gets whether snap-to-vertex is enabled for this AngleMeasurementsTouchControl.
+     * This is `true` by default.
+     * @returns {*}
+     */
+    get snapToVertex() {
+        return this._snapToVertex;
+    }
+
+    /**
+     * Sets whether snap-to-edge is enabled for this AngleMeasurementsTouchControl.
+     * This is `true` by default.
+     * @param snapToEdge
+     */
+    set snapToEdge(snapToEdge) {
+        this._snapToEdge = snapToEdge;
+    }
+
+    /**
+     * Gets whether snap-to-edge is enabled for this AngleMeasurementsTouchControl.
+     * This is `true` by default.
+     * @returns {*}
+     */
+    get snapToEdge() {
+        return this._snapToEdge;
+    }
+
+    /**
+     * Activates this AngleMeasurementsTouchControl, ready to respond to input.
+     */
+    activate() {
+
+        if (this._active) {
+            return;
+        }
+
+        const plugin = this.plugin;
+        const scene = this.scene;
+        const canvas = scene.canvas.canvas;
+        plugin.pointerLens;
+        const pointerWorldPos = math.vec3();
+
+        const touchTolerance = 20;
+
+        let longTouchTimeout = null;
+
+        this._touchState = WAITING_FOR_ORIGIN_TOUCH_START$1;
+
+        const touchStartCanvasPos = math.vec2();
+        const touchMoveCanvasPos = math.vec2();
+        const touchEndCanvasPos = math.vec2();
+
+        let touchId = null;
+
+        const disableCameraMouseControl = () => {
+            this.plugin.viewer.cameraControl.active = false;
+        };
+
+        const enableCameraMouseControl = () => {
+            this.plugin.viewer.cameraControl.active = true;
+        };
+
+        const cancel = () => {
+            if (longTouchTimeout) {
+                clearTimeout(longTouchTimeout);
+                longTouchTimeout = null;
+            }
+            if (this._currentAngleMeasurement) {
+                this._currentAngleMeasurement.destroy();
+                this._currentAngleMeasurement = null;
+            }
+            enableCameraMouseControl();
+            this._touchState = WAITING_FOR_ORIGIN_TOUCH_START$1;
+        };
+
+        canvas.addEventListener("touchstart", this._onCanvasTouchStart = (event) => {
+
+            const currentNumTouches = event.touches.length;
+
+            if (currentNumTouches !== 1) {
+                if (longTouchTimeout) {
+                    clearTimeout(longTouchTimeout);
+                    longTouchTimeout = null;
+                }
+                return;
+            }
+
+            const touch = event.touches[0];
+            const touchX = touch.clientX;
+            const touchY = touch.clientY;
+
+            touchStartCanvasPos.set([touchX, touchY]);
+            touchMoveCanvasPos.set([touchX, touchY]);
+
+            switch (this._touchState) {
+
+                case WAITING_FOR_ORIGIN_TOUCH_START$1:
+                    if (currentNumTouches !== 1 && longTouchTimeout !== null) { // Two or more fingers down
+                        cancel();
+                        return;
+                    }
+                    const snapPickResult = scene.pick({
+                        canvasPos: touchMoveCanvasPos,
+                        snapToVertex: this._snapToVertex,
+                        snapToEdge: this._snapToEdge
+                    });
+                    if (snapPickResult && snapPickResult.snapped) {
+                        pointerWorldPos.set(snapPickResult.worldPos);
+                        this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                    } else {
+                        const pickResult = scene.pick({
+                            canvasPos: touchMoveCanvasPos,
+                            pickSurface: true
+                        });
+                        if (pickResult && pickResult.worldPos) {
+                            pointerWorldPos.set(pickResult.worldPos);
+                            this.pointerCircle.start(pickResult.canvasPos);
+                        } else {
+                            return;
+                        }
+                    }
+                    longTouchTimeout = setTimeout(() => {
+                        if (currentNumTouches !== 1 ||
+                            touchMoveCanvasPos[0] > touchStartCanvasPos[0] + touchTolerance ||
+                            touchMoveCanvasPos[0] < touchStartCanvasPos[0] - touchTolerance ||
+                            touchMoveCanvasPos[1] > touchStartCanvasPos[1] + touchTolerance ||
+                            touchMoveCanvasPos[1] < touchStartCanvasPos[1] - touchTolerance) {
+                            return;   // Has moved
+                        }
+                        // Long touch
+                        if (this.pointerLens) {
+                            this.pointerLens.visible = true;
+                            this.pointerLens.canvasPos = touchStartCanvasPos;
+                            this.pointerLens.cursorPos = touchStartCanvasPos;
+                        }
+                        if (this.pointerLens) {
+                            this.pointerLens.canvasPos = touchMoveCanvasPos;
+                            this.pointerLens.snapped = false;
+                        }
+                        if (this.pointerLens) {
+                            this.pointerLens.cursorPos = snapPickResult.canvasPos;
+                            this.pointerLens.snapped = true;
+                        }
+                        // pointerWorldPos.set(snapPickResult.worldPos);
+                        if (!this._currentAngleMeasurement) {
+                            this._currentAngleMeasurement = plugin.createMeasurement({
+                                id: math.createUUID(),
+                                origin: {
+                                    worldPos: snapPickResult.worldPos
+                                },
+                                corner: {
+                                    worldPos: snapPickResult.worldPos
+                                },
+                                target: {
+                                    worldPos: snapPickResult.worldPos
+                                }
+                            });
+                            this._currentAngleMeasurement.clickable = false;
+                            this._currentAngleMeasurement.originVisible = true;
+                            this._currentAngleMeasurement.originWireVisible = false;
+                            this._currentAngleMeasurement.cornerVisible = false;
+                            this._currentAngleMeasurement.cornerWireVisible = false;
+                            this._currentAngleMeasurement.targetVisible = false;
+                            this._currentAngleMeasurement.targetWireVisible = false;
+                            this._currentAngleMeasurement.angleVisible = false;
+                        } else {
+                            this._currentAngleMeasurement.origin.worldPos = pointerWorldPos;
+                        }
+                        this.angleMeasurementsPlugin.fire("measurementStart", this._currentAngleMeasurement);
+                        // if (this.pointerLens) {
+                        //     this.pointerLens.cursorPos = pickResult.canvasPos;
+                        //     this.pointerLens.snapped = false;
+                        // }
+                        this._touchState = WAITING_FOR_ORIGIN_LONG_TOUCH_END$1;
+                      //  console.log("touchstart: this._touchState= WAITING_FOR_ORIGIN_TOUCH_START -> WAITING_FOR_ORIGIN_LONG_TOUCH_END")
+                        disableCameraMouseControl();
+                    }, this._longTouchTimeoutMs);
+                    this._touchState = WAITING_FOR_ORIGIN_QUICK_TOUCH_END$1;
+                    //console.log("touchstart: this._touchState= WAITING_FOR_ORIGIN_TOUCH_START -> WAITING_FOR_ORIGIN_QUICK_TOUCH_END")
+
+                    touchId = touch.identifier;
+
+                    break;
+
+                case WAITING_FOR_CORNER_TOUCH_START:
+
+                    if (currentNumTouches !== 1 && longTouchTimeout !== null) { // Two or more fingers down
+                        clearTimeout(longTouchTimeout);
+                        longTouchTimeout = null;
+                        return;
+                    }
+                    if (currentNumTouches === 1) { // One finger down
+                        longTouchTimeout = setTimeout(() => {
+                            longTouchTimeout = null;
+                            if (currentNumTouches !== 1 ||
+                                touchMoveCanvasPos[0] > touchStartCanvasPos[0] + touchTolerance ||
+                                touchMoveCanvasPos[0] < touchStartCanvasPos[0] - touchTolerance ||
+                                touchMoveCanvasPos[1] > touchStartCanvasPos[1] + touchTolerance ||
+                                touchMoveCanvasPos[1] < touchStartCanvasPos[1] - touchTolerance) {
+                                // Has moved
+                                return;
+                            }
+
+                            // Long touch
+                            if (this.pointerLens) {
+                                this.pointerLens.visible = true;
+                                this.pointerLens.canvasPos = touchStartCanvasPos;
+                                this.pointerLens.snapped = false;
+                            }
+
+                            const snapPickResult = scene.pick({
+                                canvasPos: touchMoveCanvasPos,
+                                snapToVertex: this._snapToVertex,
+                                snapToEdge: this._snapToEdge
+                            });
+                            if (snapPickResult && snapPickResult.snapped) {
+                                if (this.pointerLens) {
+                                    this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
+                                    this.pointerLens.snapped = true;
+                                }
+                                this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                                pointerWorldPos.set(snapPickResult.worldPos);
+                                this._currentAngleMeasurement.corner.worldPos = snapPickResult.worldPos;
+                                this._currentAngleMeasurement.originVisible = true;
+                                this._currentAngleMeasurement.originWireVisible = true;
+                                this._currentAngleMeasurement.cornerVisible = true;
+                                this._currentAngleMeasurement.cornerWireVisible = false;
+                                this._currentAngleMeasurement.targetVisible = false;
+                                this._currentAngleMeasurement.targetWireVisible = false;
+                                this._currentAngleMeasurement.angleVisible = false;
+                                this.angleMeasurementsPlugin.fire("measurementStart", this._currentAngleMeasurement);
+                            } else {
+                                const pickResult = scene.pick({
+                                    canvasPos: touchMoveCanvasPos,
+                                    pickSurface: true
+                                });
+                                if (pickResult && pickResult.worldPos) {
+                                    if (this.pointerLens) {
+                                        this.pointerLens.cursorPos = pickResult.canvasPos;
+                                        this.pointerLens.snapped = false;
+                                    }
+                                    this.pointerCircle.start(pickResult.canvasPos);
+                                    pointerWorldPos.set(pickResult.worldPos);
+                                    this._currentAngleMeasurement.corner.worldPos = pickResult.worldPos;
+                                    this._currentAngleMeasurement.originVisible = true;
+                                    this._currentAngleMeasurement.originWireVisible = true;
+                                    this._currentAngleMeasurement.cornerVisible = true;
+                                    this._currentAngleMeasurement.cornerWireVisible = false;
+                                    this._currentAngleMeasurement.targetVisible = false;
+                                    this._currentAngleMeasurement.targetWireVisible = false;
+                                    this._currentAngleMeasurement.angleVisible = false;
+                                    this.angleMeasurementsPlugin.fire("measurementStart", this._currentAngleMeasurement);
+                                } else {
+                                    if (this.pointerLens) {
+                                        this.pointerLens.cursorPos = null;
+                                        this.pointerLens.snapped = false;
+
+                                    }
+                                }
+                            }
+                            this._touchState = WAITING_FOR_CORNER_LONG_TOUCH_END;
+                           // console.log("touchstart: this._touchState= WAITING_FOR_CORNER_TOUCH_START -> WAITING_FOR_CORNER_LONG_TOUCH_END")
+
+                            disableCameraMouseControl();
+
+                        }, this._longTouchTimeoutMs);
+
+                        this._touchState = WAITING_FOR_CORNER_QUICK_TOUCH_END;
+                      //  console.log("touchstart: this._touchState= WAITING_FOR_CORNER_TOUCH_START -> WAITING_FOR_CORNER_QUICK_TOUCH_END")
+                    }
+
+                    touchId = touch.identifier;
+
+                    break;
+
+                case WAITING_FOR_TARGET_TOUCH_START$1:
+
+                    if (currentNumTouches !== 1 && longTouchTimeout !== null) { // Two or more fingers down
+                        clearTimeout(longTouchTimeout);
+                        longTouchTimeout = null;
+                        return;
+                    }
+                    if (currentNumTouches === 1) { // One finger down
+                        longTouchTimeout = setTimeout(() => {
+                            longTouchTimeout = null;
+                            if (currentNumTouches !== 1 ||
+                                touchMoveCanvasPos[0] > touchStartCanvasPos[0] + touchTolerance ||
+                                touchMoveCanvasPos[0] < touchStartCanvasPos[0] - touchTolerance ||
+                                touchMoveCanvasPos[1] > touchStartCanvasPos[1] + touchTolerance ||
+                                touchMoveCanvasPos[1] < touchStartCanvasPos[1] - touchTolerance) {
+                                // Has moved
+                                return;
+                            }
+
+                            // Long touch
+                            if (this.pointerLens) {
+                                this.pointerLens.visible = true;
+                                this.pointerLens.canvasPos = touchStartCanvasPos;
+                                this.pointerLens.snapped = false;
+                            }
+
+                            const snapPickResult = scene.pick({
+                                canvasPos: touchMoveCanvasPos,
+                                snapToVertex: this._snapToVertex,
+                                snapToEdge: this._snapToEdge
+                            });
+                            if (snapPickResult && snapPickResult.snapped) {
+                                if (this.pointerLens) {
+                                    this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
+                                    this.pointerLens.snapped = true;
+                                }
+                                this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                                pointerWorldPos.set(snapPickResult.worldPos);
+                                this._currentAngleMeasurement.target.worldPos = snapPickResult.worldPos;
+                                this._currentAngleMeasurement.originVisible = true;
+                                this._currentAngleMeasurement.originWireVisible = true;
+                                this._currentAngleMeasurement.cornerVisible = true;
+                                this._currentAngleMeasurement.cornerWireVisible = true;
+                                this._currentAngleMeasurement.targetVisible = true;
+                                this._currentAngleMeasurement.targetWireVisible = true;
+                                this._currentAngleMeasurement.angleVisible = true;
+                                this.angleMeasurementsPlugin.fire("measurementStart", this._currentAngleMeasurement);
+                            } else {
+                                const pickResult = scene.pick({
+                                    canvasPos: touchMoveCanvasPos,
+                                    pickSurface: true
+                                });
+                                if (pickResult && pickResult.worldPos) {
+                                    if (this.pointerLens) {
+                                        this.pointerLens.cursorPos = pickResult.canvasPos;
+                                        this.pointerLens.snapped = false;
+                                    }
+                                    this.pointerCircle.start(pickResult.canvasPos);
+                                    pointerWorldPos.set(pickResult.worldPos);
+                                    this._currentAngleMeasurement.target.worldPos = pickResult.worldPos;
+                                    this._currentAngleMeasurement.originVisible = true;
+                                    this._currentAngleMeasurement.originWireVisible = true;
+                                    this._currentAngleMeasurement.cornerVisible = true;
+                                    this._currentAngleMeasurement.cornerWireVisible = true;
+                                    this._currentAngleMeasurement.targetVisible = true;
+                                    this._currentAngleMeasurement.targetWireVisible = true;
+                                    this._currentAngleMeasurement.angleVisible = true;
+                                    this.angleMeasurementsPlugin.fire("measurementStart", this._currentAngleMeasurement);
+                                } else {
+                                    if (this.pointerLens) {
+                                        this.pointerLens.cursorPos = null;
+                                        this.pointerLens.snapped = false;
+
+                                    }
+                                }
+                            }
+                            this._touchState = WAITING_FOR_TARGET_LONG_TOUCH_END$1;
+                           // console.log("touchstart: this._touchState= WAITING_FOR_TARGET_TOUCH_START -> WAITING_FOR_TARGET_LONG_TOUCH_END")
+
+                            disableCameraMouseControl();
+
+                        }, this._longTouchTimeoutMs);
+
+                        this._touchState = WAITING_FOR_TARGET_QUICK_TOUCH_END$1;
+                       // console.log("touchstart: this._touchState= WAITING_FOR_TARGET_TOUCH_START -> WAITING_FOR_TARGET_QUICK_TOUCH_END")
+                    }
+
+                    touchId = touch.identifier;
+
+                    break;
+
+
+                default:
+                    if (longTouchTimeout !== null) {
+                        clearTimeout(longTouchTimeout);
+                        longTouchTimeout = null;
+                    }
+                    this._touchState = TOUCH_CANCELING$1;
+                  //  console.log("touchstart: this._touchState= default -> TOUCH_CANCELING")
+                    return;
+            }
+
+        }, {passive: true});
+
+
+        canvas.addEventListener("touchmove", (event) => {
+
+            this.pointerCircle.stop();
+
+            const currentNumTouches = event.touches.length;
+
+            if (currentNumTouches !== 1 || event.changedTouches.length !== 1) {
+                if (longTouchTimeout) {
+                    clearTimeout(longTouchTimeout);
+                    longTouchTimeout = null;
+                }
+                return;
+            }
+
+            const touch = event.touches[0];
+            const touchX = touch.clientX;
+            const touchY = touch.clientY;
+
+            if (touch.identifier !== touchId) {
+                return;
+            }
+
+            touchMoveCanvasPos.set([touchX, touchY]);
+
+            let snapPickResult;
+            let pickResult;
+
+            switch (this._touchState) {
+
+                case WAITING_FOR_ORIGIN_LONG_TOUCH_END$1:
+                    if (this.pointerLens) {
+                        this.pointerLens.canvasPos = touchMoveCanvasPos;
+                    }
+                    snapPickResult = scene.pick({
+                        canvasPos: touchMoveCanvasPos,
+                        snapToVertex: this._snapToVertex,
+                        snapToEdge: this._snapToEdge
+                    });
+                    if (snapPickResult && (snapPickResult.snapped)) {
+                        if (this.pointerLens) {
+                            this.pointerLens.snappedCanvasPos = snapPickResult.snappedCanvasPos;
+                            this.pointerLens.snapped = true;
+                        }
+                        pointerWorldPos.set(snapPickResult.worldPos);
+                        this._currentAngleMeasurement.origin.worldPos = snapPickResult.worldPos;
+                    } else {
+                        pickResult = scene.pick({
+                            canvasPos: touchMoveCanvasPos,
+                            pickSurface: true
+                        });
+                        if (pickResult && pickResult.worldPos) {
+                            if (this.pointerLens) {
+                                this.pointerLens.cursorPos = pickResult.canvasPos;
+                                this.pointerLens.snapped = false;
+                            }
+                            pointerWorldPos.set(pickResult.worldPos);
+                            this._currentAngleMeasurement.origin.worldPos = pickResult.worldPos;
+                        } else {
+                            if (this.pointerLens) {
+                                this.pointerLens.cursorPos = null;
+                                this.pointerLens.snapped = false;
+                            }
+                        }
+                    }
+                    this._touchState = WAITING_FOR_ORIGIN_LONG_TOUCH_END$1;
+                   // console.log("touchmove: this._touchState= WAITING_FOR_ORIGIN_LONG_TOUCH_END -> WAITING_FOR_ORIGIN_LONG_TOUCH_END")
+                    break;
+
+                case WAITING_FOR_CORNER_LONG_TOUCH_END:
+                    if (currentNumTouches !== 1 && longTouchTimeout !== null) { // Two or more fingers down
+                        clearTimeout(longTouchTimeout);
+                        longTouchTimeout = null;
+                        if (this.pointerLens) {
+                            this.pointerLens.visible = false;
+                        }
+                        this._touchState = TOUCH_CANCELING$1;
+                     //   console.log("touchmove: this._touchState= QUICK_TOUCH_FINDING_CORNER -> TOUCH_CANCELING")
+                        return;
+                    }
+                    if (this.pointerLens) {
+                        this.pointerLens.canvasPos = touchMoveCanvasPos;
+                    }
+                    snapPickResult = scene.pick({
+                        canvasPos: touchMoveCanvasPos,
+                        snapToVertex: this._snapToVertex,
+                        snapToEdge: this._snapToEdge
+                    });
+                    if (snapPickResult && snapPickResult.worldPos) {
+                        if (this.pointerLens) {
+                            this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
+                            this.pointerLens.snapped = true;
+                        }
+                        this._currentAngleMeasurement.corner.worldPos = snapPickResult.worldPos;
+                        this._currentAngleMeasurement.originVisible = true;
+                        this._currentAngleMeasurement.originWireVisible = true;
+                        this._currentAngleMeasurement.cornerVisible = true;
+                        this._currentAngleMeasurement.cornerWireVisible = false;
+                        this._currentAngleMeasurement.targetVisible = false;
+                        this._currentAngleMeasurement.targetWireVisible = false;
+                        this._currentAngleMeasurement.angleVisible = false;
+                    } else {
+                        pickResult = scene.pick({
+                            canvasPos: touchMoveCanvasPos,
+                            pickSurface: true
+                        });
+                        if (pickResult && pickResult.worldPos) {
+                            if (this.pointerLens) {
+                                this.pointerLens.cursorPos = pickResult.canvasPos;
+                                this.pointerLens.snapped = false;
+                            }
+                            this._currentAngleMeasurement.corner.worldPos = pickResult.worldPos;
+                            this._currentAngleMeasurement.originVisible = true;
+                            this._currentAngleMeasurement.originWireVisible = true;
+                            this._currentAngleMeasurement.cornerVisible = true;
+                            this._currentAngleMeasurement.cornerWireVisible = false;
+                            this._currentAngleMeasurement.targetVisible = false;
+                            this._currentAngleMeasurement.targetWireVisible = false;
+                            this._currentAngleMeasurement.angleVisible = false;
+                        }
+                    }
+                    this._touchState = WAITING_FOR_CORNER_LONG_TOUCH_END;
+                    break;
+
+
+                case WAITING_FOR_TARGET_LONG_TOUCH_END$1:
+                    if (currentNumTouches !== 1 && longTouchTimeout !== null) { // Two or more fingers down
+                        clearTimeout(longTouchTimeout);
+                        longTouchTimeout = null;
+                        if (this.pointerLens) {
+                            this.pointerLens.visible = false;
+                        }
+                        this._touchState = TOUCH_CANCELING$1;
+                      //  console.log("touchmove: this._touchState= QUICK_TOUCH_FINDING_TARGET -> TOUCH_CANCELING")
+                        return;
+                    }
+                    if (this.pointerLens) {
+                        this.pointerLens.canvasPos = touchMoveCanvasPos;
+                    }
+                    snapPickResult = scene.pick({
+                        canvasPos: touchMoveCanvasPos,
+                        snapToVertex: this._snapToVertex,
+                        snapToEdge: this._snapToEdge
+                    });
+                    if (snapPickResult && snapPickResult.worldPos) {
+                        if (this.pointerLens) {
+                            this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
+                            this.pointerLens.snapped = true;
+                        }
+                        this._currentAngleMeasurement.target.worldPos = snapPickResult.worldPos;
+                        this._currentAngleMeasurement.originVisible = true;
+                        this._currentAngleMeasurement.originWireVisible = true;
+                        this._currentAngleMeasurement.cornerVisible = true;
+                        this._currentAngleMeasurement.cornerWireVisible = true;
+                        this._currentAngleMeasurement.targetVisible = true;
+                        this._currentAngleMeasurement.targetWireVisible = true;
+                        this._currentAngleMeasurement.angleVisible = true;
+                    } else {
+                        pickResult = scene.pick({
+                            canvasPos: touchMoveCanvasPos,
+                            pickSurface: true
+                        });
+                        if (pickResult && pickResult.worldPos) {
+                            if (this.pointerLens) {
+                                this.pointerLens.cursorPos = pickResult.canvasPos;
+                                this.pointerLens.snapped = false;
+                            }
+                            this._currentAngleMeasurement.target.worldPos = pickResult.worldPos;
+                            this._currentAngleMeasurement.originVisible = true;
+                            this._currentAngleMeasurement.originWireVisible = true;
+                            this._currentAngleMeasurement.cornerVisible = true;
+                            this._currentAngleMeasurement.cornerWireVisible = true;
+                            this._currentAngleMeasurement.targetVisible = true;
+                            this._currentAngleMeasurement.targetWireVisible = true;
+                            this._currentAngleMeasurement.angleVisible = true;
+                        }
+                    }
+                    this._touchState = WAITING_FOR_TARGET_LONG_TOUCH_END$1;
+                    break;
+            }
+        }, {passive: true});
+
+        canvas.addEventListener("touchend", this._onCanvasTouchEnd = (event) => {
+
+            this.pointerCircle.stop();
+
+            const numChangedTouches = event.changedTouches.length;
+
+            if (numChangedTouches !== 1) {
+                return;
+            }
+
+            const touch = event.changedTouches[0];
+            const touchX = touch.clientX;
+            const touchY = touch.clientY;
+
+            if (touch.identifier !== touchId) {
+                return;
+            }
+
+            if (longTouchTimeout) {
+                clearTimeout(longTouchTimeout);
+                longTouchTimeout = null;
+            }
+
+            touchEndCanvasPos.set([touchX, touchY]);
+
+            switch (this._touchState) {
+
+                case WAITING_FOR_ORIGIN_QUICK_TOUCH_END$1: {
+                    if (numChangedTouches !== 1 ||
+                        touchX > touchStartCanvasPos[0] + touchTolerance ||
+                        touchX < touchStartCanvasPos[0] - touchTolerance ||
+                        touchY > touchStartCanvasPos[1] + touchTolerance ||
+                        touchY < touchStartCanvasPos[1] - touchTolerance) {
+                        this._touchState = WAITING_FOR_ORIGIN_TOUCH_START$1;
+                        return;
+                    }
+                    const pickResult = scene.pick({
+                        canvasPos: touchMoveCanvasPos,
+                        pickSurface: true
+                    });
+                    if (pickResult && pickResult.worldPos) {
+                        this._currentAngleMeasurement = plugin.createMeasurement({
+                            id: math.createUUID(),
+                            origin: {
+                                worldPos: pickResult.worldPos
+                            },
+                            corner: {
+                                worldPos: pickResult.worldPos
+                            },
+                            target: {
+                                worldPos: pickResult.worldPos
+                            }
+                        });
+                        this._currentAngleMeasurement.clickable = false;
+                        this._currentAngleMeasurement.originVisible = true;
+                        this._currentAngleMeasurement.originWireVisible = false;
+                        this._currentAngleMeasurement.cornerVisible = false;
+                        this._currentAngleMeasurement.cornerWireVisible = false;
+                        this._currentAngleMeasurement.targetVisible = false;
+                        this._currentAngleMeasurement.targetWireVisible = false;
+                        this._currentAngleMeasurement.angleVisible = false;
+                        this._touchState = WAITING_FOR_CORNER_TOUCH_START;
+                      //  console.log("touchend: this._touchState= WAITING_FOR_ORIGIN_QUICK_TOUCH_END -> WAITING_FOR_CORNER_TOUCH_START")
+                    } else {
+                        if (this._currentAngleMeasurement) {
+                            this._currentAngleMeasurement.destroy();
+                            this._currentAngleMeasurement = null;
+                        }
+                        this._touchState = WAITING_FOR_ORIGIN_TOUCH_START$1;
+                      //  console.log("touchend: this._touchState= WAITING_FOR_ORIGIN_QUICK_TOUCH_END -> WAITING_FOR_ORIGIN_TOUCH_START")
+                    }
+                }
+                    enableCameraMouseControl();
+                    break;
+
+                case WAITING_FOR_ORIGIN_LONG_TOUCH_END$1:
+                    if (this.pointerLens) {
+                        this.pointerLens.visible = false;
+                    }
+                    if (!this._currentAngleMeasurement) {
+                        if (this.pointerLens) {
+                            this.pointerLens.snapped = false;
+                            this.pointerLens.visible = false;
+                        }
+                        this._touchState = WAITING_FOR_ORIGIN_TOUCH_START$1;
+                      //  console.log("touchend: this._touchState= WAITING_FOR_ORIGIN_LONG_TOUCH_END (no measurement) -> WAITING_FOR_ORIGIN_TOUCH_START")
+                    } else {
+                        this._touchState = WAITING_FOR_CORNER_TOUCH_START;
+                       // console.log("touchend: this._touchState= WAITING_FOR_ORIGIN_LONG_TOUCH_END (picked, begin measurement) -> WAITING_FOR_CORNER_TOUCH_START")
+                    }
+                    enableCameraMouseControl();
+                    break;
+
+                case WAITING_FOR_CORNER_QUICK_TOUCH_END: {
+                    if (numChangedTouches !== 1 ||
+                        touchX > touchStartCanvasPos[0] + touchTolerance ||
+                        touchX < touchStartCanvasPos[0] - touchTolerance ||
+                        touchY > touchStartCanvasPos[1] + touchTolerance ||
+                        touchY < touchStartCanvasPos[1] - touchTolerance) {
+                        this._touchState = WAITING_FOR_CORNER_TOUCH_START;
+                        return;
+                    }
+                    const pickResult = scene.pick({
+                        canvasPos: touchMoveCanvasPos,
+                        pickSurface: true
+                    });
+                    if (pickResult && pickResult.worldPos) {
+                        this._currentAngleMeasurement.corner.worldPos = pickResult.worldPos;
+                        this._currentAngleMeasurement.originVisible = true;
+                        this._currentAngleMeasurement.originWireVisible = true;
+                        this._currentAngleMeasurement.cornerVisible = true;
+                        this._currentAngleMeasurement.cornerWireVisible = false;
+                        this._currentAngleMeasurement.targetVisible = false;
+                        this._currentAngleMeasurement.targetWireVisible = false;
+                        this._currentAngleMeasurement.angleVisible = false;
+                        this._touchState = WAITING_FOR_TARGET_TOUCH_START$1;
+                       // console.log("touchend: this._touchState= WAITING_FOR_CORNER_TOUCH_START -> WAITING_FOR_ORIGIN_TOUCH_START")
+                    } else {
+                        if (this._currentAngleMeasurement) {
+                            this._currentAngleMeasurement.destroy();
+                            this._currentAngleMeasurement = null;
+                        }
+                        this._touchState = WAITING_FOR_ORIGIN_TOUCH_START$1;
+                       // console.log("touchend: this._touchState= WAITING_FOR_CORNER_TOUCH_START -> WAITING_FOR_ORIGIN_TOUCH_START")
+                    }
+
+                }
+                    enableCameraMouseControl();
+                    break;
+
+                case WAITING_FOR_CORNER_LONG_TOUCH_END:
+                    if (this.pointerLens) {
+                        this.pointerLens.visible = false;
+                    }
+                    this._touchState = WAITING_FOR_TARGET_TOUCH_START$1;
+                  //  console.log("touchend: this._touchState= WAITING_FOR_CORNER_LONG_TOUCH_END  -> WAITING_FOR_ORIGIN_TOUCH_START")
+                    enableCameraMouseControl();
+                    break;
+
+                case WAITING_FOR_TARGET_QUICK_TOUCH_END$1: {
+                    if (numChangedTouches !== 1 ||
+                        touchX > touchStartCanvasPos[0] + touchTolerance ||
+                        touchX < touchStartCanvasPos[0] - touchTolerance ||
+                        touchY > touchStartCanvasPos[1] + touchTolerance ||
+                        touchY < touchStartCanvasPos[1] - touchTolerance) {
+                        this._touchState = WAITING_FOR_TARGET_TOUCH_START$1;
+                        return;
+                    }
+                    const pickResult = scene.pick({
+                        canvasPos: touchMoveCanvasPos,
+                        pickSurface: true
+                    });
+                    if (pickResult && pickResult.worldPos) {
+                        this._currentAngleMeasurement.target.worldPos = pickResult.worldPos;
+                        this._currentAngleMeasurement.originVisible = true;
+                        this._currentAngleMeasurement.originWireVisible = true;
+                        this._currentAngleMeasurement.cornerVisible = true;
+                        this._currentAngleMeasurement.cornerWireVisible = true;
+                        this._currentAngleMeasurement.targetVisible = true;
+                        this._currentAngleMeasurement.targetWireVisible = true;
+                        this._currentAngleMeasurement.angleVisible = true;
+                        this.angleMeasurementsPlugin.fire("measurementEnd", this._currentAngleMeasurement);
+                        this._currentAngleMeasurement = null;
+                    } else {
+                        if (this._currentAngleMeasurement) {
+                            this._currentAngleMeasurement.destroy();
+                            this._currentAngleMeasurement = null;
+                        }
+                    }
+                    this._touchState = WAITING_FOR_ORIGIN_TOUCH_START$1;
+                   // console.log("touchend: this._touchState= WAITING_FOR_TARGET_TOUCH_START -> WAITING_FOR_ORIGIN_TOUCH_START")
+                }
+                    enableCameraMouseControl();
+                    break;
+
+                case WAITING_FOR_TARGET_LONG_TOUCH_END$1:
+                    if (this.pointerLens) {
+                        this.pointerLens.visible = false;
+                    }
+                    if (!this._currentAngleMeasurement || !this._currentAngleMeasurement.targetVisible) {
+                        if (this._currentAngleMeasurement) {
+                            this._currentAngleMeasurement.destroy();
+                            this._currentAngleMeasurement = null;
+                        }
+                        this._touchState = WAITING_FOR_ORIGIN_TOUCH_START$1;
+                       // console.log("touchend: this._touchState= WAITING_FOR_TARGET_LONG_TOUCH_END (no target found) -> WAITING_FOR_ORIGIN_TOUCH_START")
+                    } else {
+                        this._currentAngleMeasurement.clickable = true;
+                        this.angleMeasurementsPlugin.fire("measurementEnd", this._currentAngleMeasurement);
+                        this._currentAngleMeasurement = null;
+                        this._touchState = WAITING_FOR_ORIGIN_TOUCH_START$1;
+                       // console.log("touchend: this._touchState= WAITING_FOR_TARGET_LONG_TOUCH_END  -> WAITING_FOR_ORIGIN_TOUCH_START")
+                    }
+                    enableCameraMouseControl();
+                    break;
+            }
+
+        }, {passive: true});
+
+        this._active = true;
+    }
+
+    /**
+     * Deactivates this AngleMeasurementsTouchControl, making it unresponsive to input.
+     *
+     * Destroys any {@link AngleMeasurement} under construction.
+     */
+    deactivate() {
+        if (!this._active) {
+            return;
+        }
+        if (this.plugin.pointerLens) {
+            this.plugin.pointerLens.visible = false;
+        }
+        this.reset();
+        const canvas = this.plugin.viewer.scene.canvas.canvas;
+        canvas.removeEventListener("touchstart", this._onCanvasTouchStart);
+        canvas.removeEventListener("touchend", this._onCanvasTouchEnd);
+        if (this._currentAngleMeasurement) {
+            this.angleMeasurementsPlugin.fire("measurementCancel", this._currentAngleMeasurement);
+            this._currentAngleMeasurement.destroy();
+            this._currentAngleMeasurement = null;
+        }
+        this._active = false;
+        this.plugin.viewer.cameraControl.active = true;
+    }
+
+    /**
+     * Resets this AngleMeasurementsTouchControl.
+     *
+     * Destroys any {@link AngleMeasurement} under construction.
+     *
+     * Does nothing if the AngleMeasurementsTouchControl is not active.
+     */
+    reset() {
+        if (!this._active) {
+            return;
+        }
+        if (this._currentAngleMeasurement) {
+            this.angleMeasurementsPlugin.fire("measurementCancel", this._currentAngleMeasurement);
+            this._currentAngleMeasurement.destroy();
+            this._currentAngleMeasurement = null;
+        }
+    }
+
+    /**
+     * Destroys this AngleMeasurementsTouchControl.
+     */
+    destroy() {
+        this.deactivate();
+        super.destroy();
+    }
+}
+
 /**
  * A {@link Marker} with an HTML label attached to it, managed by an {@link AnnotationsPlugin}.
  *
@@ -15259,6 +16342,14 @@ class PickResult {
         }
     }
 
+    /**
+     * True if snapped to edge or vertex.
+     * @returns {boolean}
+     */
+    get snapped() {
+        return this.snappedToEdge || this.snappedToVertex;
+    }
+
     /**
      * @private
      */
@@ -86426,6 +87517,46 @@ class DistanceMeasurementsMouseControl extends DistanceMeasurementsControl {
  *      });
  * });
  * ````
+ *
+ * ## Example 5: Creating DistanceMeasurements with Touch Input
+ *
+ * In our fifth example, we'll show how to create distance measurements with touch input, with snapping
+ * to the nearest vertex or edge. While creating the measurements, a long-touch when setting the
+ * start or end point will cause the point to snap to the nearest vertex or edge. A quick
+ * touch-release will immediately set the point at the tapped position on the object surface.
+ *
+ * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/measurement/#distance_createWithTouch_snapping)]
+ *
+ * ````javascript
+ * import {Viewer, XKTLoaderPlugin, DistanceMeasurementsPlugin, DistanceMeasurementsTouchControl} from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas",
+ *     transparent: true
+ * });
+ *
+ * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];
+ * viewer.scene.camera.look = [10.97, 5.82, -11.22];
+ * viewer.scene.camera.up = [0.36, 0.83, 0.40];
+ *
+ * const xktLoader = new XKTLoaderPlugin(viewer);
+ *
+ * const distanceMeasurements = new DistanceMeasurementsPlugin(viewer);
+ *
+ * const model = xktLoader.load({
+ *      src: "./models/xkt/duplex/duplex.xkt"
+ * });
+ *
+ * const distanceMeasurements = new DistanceMeasurementsPlugin(viewer);
+ *
+ * const distanceMeasurementsTouchControl  = new DistanceMeasurementsTouchControl(distanceMeasurements, {
+ *     pointerLens : new PointerLens(viewer),
+ *     snapToVertex: true,
+ *     snapToEdge: true
+ * })
+ *
+ * distanceMeasurementsTouchControl.activate();
+ * ````
  */
 class DistanceMeasurementsPlugin extends Plugin {
 
@@ -86659,7 +87790,7 @@ class DistanceMeasurementsPlugin extends Plugin {
     }
 
     /**
-     * Shows all or hides the angle label of each {@link DistanceMeasurement}.
+     * Shows all or hides the distance label of each {@link DistanceMeasurement}.
      *
      * @param {Boolean} labelsShown Whether or not to show the labels.
      */
@@ -86711,6 +87842,752 @@ class DistanceMeasurementsPlugin extends Plugin {
     }
 }
 
+const WAITING_FOR_ORIGIN_TOUCH_START = 0;
+const WAITING_FOR_ORIGIN_QUICK_TOUCH_END = 1;
+const WAITING_FOR_ORIGIN_LONG_TOUCH_END = 2;
+
+const WAITING_FOR_TARGET_TOUCH_START = 3;
+const WAITING_FOR_TARGET_QUICK_TOUCH_END = 4;
+const WAITING_FOR_TARGET_LONG_TOUCH_END = 5;
+
+const TOUCH_CANCELING = 7;
+
+/**
+ * Creates {@link DistanceMeasurement}s from touch input.
+ *
+ * See {@link DistanceMeasurementsPlugin} for more info.
+ *
+ */
+class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
+
+    /**
+     * Creates a DistanceMeasurementsTouchControl bound to the given DistanceMeasurementsPlugin.
+     */
+    constructor(distanceMeasurementsPlugin, cfg = {}) {
+
+        super(distanceMeasurementsPlugin.viewer.scene);
+
+        this.pointerLens = cfg.pointerLens;
+        this.pointerCircle = new PointerCircle(distanceMeasurementsPlugin.viewer);
+
+        this._active = false;
+
+        const markerDiv = document.createElement('div');
+        const canvas = this.scene.canvas.canvas;
+        canvas.parentNode.insertBefore(markerDiv, canvas);
+
+        markerDiv.style.background = "black";
+        markerDiv.style.border = "2px solid blue";
+        markerDiv.style.borderRadius = "10px";
+        markerDiv.style.width = "5px";
+        markerDiv.style.height = "5px";
+        markerDiv.style.margin = "-200px -200px";
+        markerDiv.style.zIndex = "100";
+        markerDiv.style.position = "absolute";
+        markerDiv.style.pointerEvents = "none";
+
+        this.markerDiv = markerDiv;
+
+        this._currentDistanceMeasurement = null;
+
+        this._currentDistanceMeasurementInitState = {
+            wireVisible: null,
+            axisVisible: null,
+            xAxisVisible: null,
+            yaxisVisible: null,
+            zAxisVisible: null,
+            targetVisible: null,
+        };
+
+        this._onCanvasTouchStart = null;
+        this._onCanvasTouchEnd = null;
+        this._longTouchTimeoutMs = 300;
+        this._snapToEdge = cfg.snapToEdge !== false;
+        this._snapToVertex = cfg.snapToVertex !== false;
+        this._touchState = WAITING_FOR_ORIGIN_TOUCH_START;
+
+        this._attachPlugin(distanceMeasurementsPlugin, cfg);
+    }
+
+    _attachPlugin(distanceMeasurementsPlugin) {
+
+        /**
+         * The {@link DistanceMeasurementsPlugin} that owns this DistanceMeasurementsTouchControl.
+         * @type {DistanceMeasurementsPlugin}
+         */
+        this.distanceMeasurementsPlugin = distanceMeasurementsPlugin;
+
+        /**
+         * The {@link DistanceMeasurementsPlugin} that owns this DistanceMeasurementsTouchControl.
+         * @type {DistanceMeasurementsPlugin}
+         */
+        this.plugin = distanceMeasurementsPlugin;
+    }
+
+    /** Gets if this DistanceMeasurementsTouchControl is currently active, where it is responding to input.
+     *
+     * @returns {Boolean}
+     */
+    get active() {
+        return this._active;
+    }
+
+    /**
+     * Sets whether snap-to-vertex is enabled for this DistanceMeasurementsTouchControl.
+     * This is `true` by default.
+     * @param snapToVertex
+     */
+    set snapToVertex(snapToVertex) {
+        this._snapToVertex = snapToVertex;
+    }
+
+    /**
+     * Gets whether snap-to-vertex is enabled for this DistanceMeasurementsTouchControl.
+     * This is `true` by default.
+     * @returns {*}
+     */
+    get snapToVertex() {
+        return this._snapToVertex;
+    }
+
+    /**
+     * Sets whether snap-to-edge is enabled for this DistanceMeasurementsTouchControl.
+     * This is `true` by default.
+     * @param snapToEdge
+     */
+    set snapToEdge(snapToEdge) {
+        this._snapToEdge = snapToEdge;
+    }
+
+    /**
+     * Gets whether snap-to-edge is enabled for this DistanceMeasurementsTouchControl.
+     * This is `true` by default.
+     * @returns {*}
+     */
+    get snapToEdge() {
+        return this._snapToEdge;
+    }
+
+    /**
+     * Activates this DistanceMeasurementsTouchControl, ready to respond to input.
+     */
+    activate() {
+
+        if (this._active) {
+            return;
+        }
+
+        const plugin = this.plugin;
+        const scene = this.scene;
+        const canvas = scene.canvas.canvas;
+        plugin.pointerLens;
+        const pointerWorldPos = math.vec3();
+
+        const touchTolerance = 20;
+
+        let longTouchTimeout = null;
+
+        this._touchState = WAITING_FOR_ORIGIN_TOUCH_START;
+
+        const touchStartCanvasPos = math.vec2();
+        const touchMoveCanvasPos = math.vec2();
+        const touchEndCanvasPos = math.vec2();
+
+        let touchId = null;
+
+        const disableCameraMouseControl = () => {
+            this.plugin.viewer.cameraControl.active = false;
+        };
+
+        const enableCameraMouseControl = () => {
+            this.plugin.viewer.cameraControl.active = true;
+        };
+
+        const cancel = () => {
+            if (longTouchTimeout) {
+                clearTimeout(longTouchTimeout);
+                longTouchTimeout = null;
+            }
+            if (this._currentDistanceMeasurement) {
+                this._currentDistanceMeasurement.destroy();
+                this._currentDistanceMeasurement = null;
+            }
+            enableCameraMouseControl();
+            this._touchState = WAITING_FOR_ORIGIN_TOUCH_START;
+        };
+
+        canvas.addEventListener("touchstart", this._onCanvasTouchStart = (event) => {
+
+            const currentNumTouches = event.touches.length;
+
+            if (currentNumTouches !== 1) {
+                if (longTouchTimeout) {
+                    clearTimeout(longTouchTimeout);
+                    longTouchTimeout = null;
+                }
+                return;
+            }
+
+            const touch = event.touches[0];
+            const touchX = touch.clientX;
+            const touchY = touch.clientY;
+
+            touchStartCanvasPos.set([touchX, touchY]);
+            touchMoveCanvasPos.set([touchX, touchY]);
+
+            switch (this._touchState) {
+
+                case WAITING_FOR_ORIGIN_TOUCH_START:
+                    if (currentNumTouches !== 1 && longTouchTimeout !== null) { // Two or more fingers down
+                        cancel();
+                        return;
+                    }
+                    const snapPickResult = scene.pick({
+                        canvasPos: touchMoveCanvasPos,
+                        snapToVertex: this._snapToVertex,
+                        snapToEdge: this._snapToEdge
+                    });
+                    if (snapPickResult && snapPickResult.snapped) {
+                        pointerWorldPos.set(snapPickResult.worldPos);
+                        this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                    } else {
+                        const pickResult = scene.pick({
+                            canvasPos: touchMoveCanvasPos,
+                            pickSurface: true
+                        });
+                        if (pickResult && pickResult.worldPos) {
+                            pointerWorldPos.set(pickResult.worldPos);
+                            this.pointerCircle.start(pickResult.canvasPos);
+                        } else {
+                            return;
+                        }
+                    }
+                    longTouchTimeout = setTimeout(() => {
+                        if (currentNumTouches !== 1 ||
+                            touchMoveCanvasPos[0] > touchStartCanvasPos[0] + touchTolerance ||
+                            touchMoveCanvasPos[0] < touchStartCanvasPos[0] - touchTolerance ||
+                            touchMoveCanvasPos[1] > touchStartCanvasPos[1] + touchTolerance ||
+                            touchMoveCanvasPos[1] < touchStartCanvasPos[1] - touchTolerance) {
+                            return;   // Has moved
+                        }
+                        // Long touch
+                        if (this.pointerLens) {
+                            this.pointerLens.visible = true;
+                            this.pointerLens.canvasPos = touchStartCanvasPos;
+                            this.pointerLens.cursorPos = touchStartCanvasPos;
+                        }
+                        if (this.pointerLens) {
+                            this.pointerLens.canvasPos = touchMoveCanvasPos;
+                            this.pointerLens.snapped = false;
+                        }
+                        if (this.pointerLens) {
+                            this.pointerLens.cursorPos = snapPickResult.canvasPos;
+                            this.pointerLens.snapped = true;
+                        }
+                        // pointerWorldPos.set(snapPickResult.snappedWorldPos);
+                        if (!this._currentDistanceMeasurement) {
+                            this._currentDistanceMeasurement = plugin.createMeasurement({
+                                id: math.createUUID(),
+                                origin: {
+                                    worldPos: pointerWorldPos
+                                },
+                                target: {
+                                    worldPos: pointerWorldPos
+                                }
+                            });
+                            this._currentDistanceMeasurement.labelsVisible = false;
+                            this._currentDistanceMeasurement.xAxisVisible = false;
+                            this._currentDistanceMeasurement.yAxisVisible = false;
+                            this._currentDistanceMeasurement.zAxisVisible = false;
+                            this._currentDistanceMeasurement.wireVisible = false;
+                            this._currentDistanceMeasurement.originVisible = true;
+                            this._currentDistanceMeasurement.targetVisible = false;
+                            this._currentDistanceMeasurement.clickable = false;
+                        } else {
+                            this._currentDistanceMeasurement.origin.worldPos = pointerWorldPos;
+                        }
+                        this.distanceMeasurementsPlugin.fire("measurementStart", this._currentDistanceMeasurement);
+                        // if (this.pointerLens) {
+                        //     this.pointerLens.cursorPos = pickResult.canvasPos;
+                        //     this.pointerLens.snapped = false;
+                        // }
+                        this._touchState = WAITING_FOR_ORIGIN_LONG_TOUCH_END;
+                        // console.log("touchstart: this._touchState= WAITING_FOR_ORIGIN_TOUCH_START -> WAITING_FOR_ORIGIN_LONG_TOUCH_END")
+                        disableCameraMouseControl();
+                    }, this._longTouchTimeoutMs);
+                    this._touchState = WAITING_FOR_ORIGIN_QUICK_TOUCH_END;
+                    // console.log("touchstart: this._touchState= WAITING_FOR_ORIGIN_TOUCH_START -> WAITING_FOR_ORIGIN_QUICK_TOUCH_END")
+
+                    touchId = touch.identifier;
+
+                    break;
+
+
+                case WAITING_FOR_TARGET_TOUCH_START:
+
+                    if (currentNumTouches !== 1 && longTouchTimeout !== null) { // Two or more fingers down
+                        clearTimeout(longTouchTimeout);
+                        longTouchTimeout = null;
+                        return;
+                    }
+                    if (currentNumTouches === 1) { // One finger down
+                        longTouchTimeout = setTimeout(() => {
+                            longTouchTimeout = null;
+                            if (currentNumTouches !== 1 ||
+                                touchMoveCanvasPos[0] > touchStartCanvasPos[0] + touchTolerance ||
+                                touchMoveCanvasPos[0] < touchStartCanvasPos[0] - touchTolerance ||
+                                touchMoveCanvasPos[1] > touchStartCanvasPos[1] + touchTolerance ||
+                                touchMoveCanvasPos[1] < touchStartCanvasPos[1] - touchTolerance) {
+                                // Has moved
+                                return;
+                            }
+
+                            // Long touch
+                            if (this.pointerLens) {
+                                this.pointerLens.visible = true;
+                                this.pointerLens.canvasPos = touchStartCanvasPos;
+                                this.pointerLens.snapped = false;
+                            }
+
+                            const snapPickResult = scene.pick({
+                                canvasPos: touchMoveCanvasPos,
+                                snapToVertex: this._snapToVertex,
+                                snapToEdge: this._snapToEdge
+                            });
+                            if (snapPickResult && snapPickResult.snapped) {
+                                if (this.pointerLens) {
+                                    this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
+                                    this.pointerLens.snapped = true;
+                                }
+                                this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                                pointerWorldPos.set(snapPickResult.worldPos);
+                                this._currentDistanceMeasurement.target.worldPos = snapPickResult.worldPos;
+                                this._currentDistanceMeasurement.targetVisible = true;
+                                this._currentDistanceMeasurement.wireVisible = true;
+                                this._currentDistanceMeasurement.labelsVisible = true;
+                                this.distanceMeasurementsPlugin.fire("measurementStart", this._currentDistanceMeasurement);
+                            } else {
+                                const pickResult = scene.pick({
+                                    canvasPos: touchMoveCanvasPos,
+                                    pickSurface: true
+                                });
+                                if (pickResult && pickResult.worldPos) {
+                                    if (this.pointerLens) {
+                                        this.pointerLens.cursorPos = pickResult.canvasPos;
+                                        this.pointerLens.snapped = false;
+                                    }
+                                    this.pointerCircle.start(pickResult.canvasPos);
+                                    pointerWorldPos.set(pickResult.worldPos);
+                                    this._currentDistanceMeasurement.target.worldPos = pickResult.worldPos;
+                                    this._currentDistanceMeasurement.targetVisible = true;
+                                    this._currentDistanceMeasurement.wireVisible = true;
+                                    this._currentDistanceMeasurement.labelsVisible = true;
+                                    this.distanceMeasurementsPlugin.fire("measurementStart", this._currentDistanceMeasurement);
+                                } else {
+                                    if (this.pointerLens) {
+                                        this.pointerLens.cursorPos = null;
+                                        this.pointerLens.snapped = false;
+
+                                    }
+                                }
+                            }
+                            this._touchState = WAITING_FOR_TARGET_LONG_TOUCH_END;
+                            // console.log("touchstart: this._touchState= WAITING_FOR_TARGET_TOUCH_START -> WAITING_FOR_TARGET_LONG_TOUCH_END")
+
+                            disableCameraMouseControl();
+
+                        }, this._longTouchTimeoutMs);
+
+                        this._touchState = WAITING_FOR_TARGET_QUICK_TOUCH_END;
+                        // console.log("touchstart: this._touchState= WAITING_FOR_TARGET_TOUCH_START -> WAITING_FOR_TARGET_QUICK_TOUCH_END")
+                    }
+
+                    touchId = touch.identifier;
+
+                    break;
+
+                default:
+                    if (longTouchTimeout !== null) {
+                        clearTimeout(longTouchTimeout);
+                        longTouchTimeout = null;
+                    }
+                    this._touchState = TOUCH_CANCELING;
+                    // console.log("touchstart: this._touchState= default -> TOUCH_CANCELING")
+                    return;
+            }
+
+        }, {passive: true});
+
+
+        canvas.addEventListener("touchmove", (event) => {
+
+            this.pointerCircle.stop();
+
+            const currentNumTouches = event.touches.length;
+
+            if (currentNumTouches !== 1 || event.changedTouches.length !== 1) {
+                if (longTouchTimeout) {
+                    clearTimeout(longTouchTimeout);
+                    longTouchTimeout = null;
+                }
+                return;
+            }
+
+            const touch = event.touches[0];
+            const touchX = touch.clientX;
+            const touchY = touch.clientY;
+
+            if (touch.identifier !== touchId) {
+                return;
+            }
+
+            touchMoveCanvasPos.set([touchX, touchY]);
+
+            let snapPickResult;
+            let pickResult;
+
+            switch (this._touchState) {
+
+                case WAITING_FOR_ORIGIN_LONG_TOUCH_END:
+                    if (this.pointerLens) {
+                        this.pointerLens.canvasPos = touchMoveCanvasPos;
+                    }
+                    snapPickResult = scene.pick({
+                        canvasPos: touchMoveCanvasPos,
+
+
+                        snapToVertex: this._snapToVertex,
+                        snapToEdge: this._snapToEdge
+                    });
+                    if (snapPickResult && (snapPickResult.snapped)) {
+                        if (this.pointerLens) {
+                            this.pointerLens.snappedCanvasPos = snapPickResult.snappedCanvasPos;
+                            this.pointerLens.snapped = true;
+                        }
+                        pointerWorldPos.set(snapPickResult.worldPos);
+                        if (!this._currentDistanceMeasurement) {
+                            this._currentDistanceMeasurement = plugin.createMeasurement({
+                                id: math.createUUID(),
+                                origin: {
+                                    worldPos: snapPickResult.worldPos
+                                },
+                                target: {
+                                    worldPos: snapPickResult.worldPos
+                                }
+                            });
+                            this._currentDistanceMeasurement.labelsVisible = false;
+                            this._currentDistanceMeasurement.xAxisVisible = false;
+                            this._currentDistanceMeasurement.yAxisVisible = false;
+                            this._currentDistanceMeasurement.zAxisVisible = false;
+                            this._currentDistanceMeasurement.wireVisible = false;
+                            this._currentDistanceMeasurement.originVisible = true;
+                            this._currentDistanceMeasurement.targetVisible = false;
+                            this._currentDistanceMeasurement.clickable = false;
+                        } else {
+                            this._currentDistanceMeasurement.origin.worldPos = snapPickResult.worldPos;
+                        }
+
+                        this.distanceMeasurementsPlugin.fire("measurementStart", this._currentDistanceMeasurement);
+                    } else {
+                        pickResult = scene.pick({
+                            canvasPos: touchMoveCanvasPos,
+                            pickSurface: true
+                        });
+                        if (pickResult && pickResult.worldPos) {
+                            if (this.pointerLens) {
+                                this.pointerLens.cursorPos = pickResult.canvasPos;
+                                this.pointerLens.snapped = false;
+                            }
+                            pointerWorldPos.set(pickResult.worldPos);
+                            if (!this._currentDistanceMeasurement) {
+                                this._currentDistanceMeasurement = plugin.createMeasurement({
+                                    id: math.createUUID(),
+                                    origin: {
+                                        worldPos: pickResult.worldPos
+                                    },
+                                    target: {
+                                        worldPos: pickResult.worldPos
+                                    }
+                                });
+                                this._currentDistanceMeasurement.labelsVisible = false;
+                                this._currentDistanceMeasurement.xAxisVisible = false;
+                                this._currentDistanceMeasurement.yAxisVisible = false;
+                                this._currentDistanceMeasurement.zAxisVisible = false;
+                                this._currentDistanceMeasurement.wireVisible = false;
+                                this._currentDistanceMeasurement.originVisible = true;
+                                this._currentDistanceMeasurement.targetVisible = false;
+                                this._currentDistanceMeasurement.clickable = false;
+                            } else {
+                                this._currentDistanceMeasurement.origin.worldPos = pickResult.worldPos;
+                            }
+
+                            this.distanceMeasurementsPlugin.fire("measurementStart", this._currentDistanceMeasurement);
+                        } else {
+                            if (this.pointerLens) {
+                                this.pointerLens.cursorPos = null;
+                                this.pointerLens.snapped = false;
+                            }
+                        }
+                    }
+                    this._touchState = WAITING_FOR_ORIGIN_LONG_TOUCH_END;
+                    // console.log("touchmove: this._touchState= WAITING_FOR_ORIGIN_LONG_TOUCH_END -> WAITING_FOR_ORIGIN_LONG_TOUCH_END")
+                    break;
+
+                // case WAITING_FOR_TARGET_TOUCH_START:
+                //     this._touchState = WAITING_FOR_TARGET_TOUCH_START;
+                //     console.log("touchmove: this._touchState= WAITING_FOR_TARGET_TOUCH_START -> WAITING_FOR_TARGET_TOUCH_START")
+                //     break;
+
+                case WAITING_FOR_TARGET_LONG_TOUCH_END:
+                    if (currentNumTouches !== 1 && longTouchTimeout !== null) { // Two or more fingers down
+                        clearTimeout(longTouchTimeout);
+                        longTouchTimeout = null;
+                        if (this.pointerLens) {
+                            this.pointerLens.visible = false;
+                        }
+                        this._touchState = TOUCH_CANCELING;
+                        // console.log("touchmove: this._touchState= QUICK_TOUCH_FINDING_TARGET -> TOUCH_CANCELING")
+                        return;
+                    }
+                    if (this.pointerLens) {
+                        this.pointerLens.canvasPos = touchMoveCanvasPos;
+                    }
+                    snapPickResult = scene.pick({
+                        canvasPos: touchMoveCanvasPos,
+                        snapToVertex: this._snapToVertex,
+                        snapToEdge: this._snapToEdge
+                    });
+                    if (snapPickResult && snapPickResult.worldPos) {
+                        if (this.pointerLens) {
+                            this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
+                            this.pointerLens.snapped = true;
+                        }
+                        this._currentDistanceMeasurement.target.worldPos = snapPickResult.worldPos;
+                        this._currentDistanceMeasurement.targetVisible = true;
+                        this._currentDistanceMeasurement.wireVisible = true;
+                        this._currentDistanceMeasurement.labelsVisible = true;
+                    } else {
+                        pickResult = scene.pick({
+                            canvasPos: touchMoveCanvasPos,
+                            pickSurface: true
+                        });
+                        if (pickResult && pickResult.worldPos) {
+                            if (this.pointerLens) {
+                                this.pointerLens.cursorPos = pickResult.canvasPos;
+                                this.pointerLens.snapped = false;
+                            }
+                            this._currentDistanceMeasurement.target.worldPos = pickResult.worldPos;
+                            this._currentDistanceMeasurement.targetVisible = true;
+                            this._currentDistanceMeasurement.wireVisible = true;
+                            this._currentDistanceMeasurement.labelsVisible = true;
+
+                        }
+                    }
+                    this._touchState = WAITING_FOR_TARGET_LONG_TOUCH_END;
+                    break;
+            }
+        }, {passive: true});
+
+        canvas.addEventListener("touchend", this._onCanvasTouchEnd = (event) => {
+
+            this.pointerCircle.stop();
+
+            const numChangedTouches = event.changedTouches.length;
+
+            if (numChangedTouches !== 1) {
+                return;
+            }
+
+            const touch = event.changedTouches[0];
+            const touchX = touch.clientX;
+            const touchY = touch.clientY;
+
+            if (touch.identifier !== touchId) {
+                return;
+            }
+
+            if (longTouchTimeout) {
+                clearTimeout(longTouchTimeout);
+                longTouchTimeout = null;
+            }
+
+            touchEndCanvasPos.set([touchX, touchY]);
+
+            switch (this._touchState) {
+
+                case WAITING_FOR_ORIGIN_QUICK_TOUCH_END: {
+                    if (numChangedTouches !== 1 ||
+                        touchX > touchStartCanvasPos[0] + touchTolerance ||
+                        touchX < touchStartCanvasPos[0] - touchTolerance ||
+                        touchY > touchStartCanvasPos[1] + touchTolerance ||
+                        touchY < touchStartCanvasPos[1] - touchTolerance) {
+                        this._touchState = WAITING_FOR_ORIGIN_TOUCH_START;
+                        return;
+                    }
+                    const pickResult = scene.pick({
+                        canvasPos: touchMoveCanvasPos,
+                        pickSurface: true
+                    });
+                    if (pickResult && pickResult.worldPos) {
+                        this._currentDistanceMeasurement = plugin.createMeasurement({
+                            id: math.createUUID(),
+                            origin: {
+                                worldPos: pickResult.worldPos
+                            },
+                            target: {
+                                worldPos: pickResult.worldPos
+                            }
+                        });
+                        this._currentDistanceMeasurement.labelsVisible = false;
+                        this._currentDistanceMeasurement.xAxisVisible = false;
+                        this._currentDistanceMeasurement.yAxisVisible = false;
+                        this._currentDistanceMeasurement.zAxisVisible = false;
+                        this._currentDistanceMeasurement.wireVisible = false;
+                        this._currentDistanceMeasurement.originVisible = true;
+                        this._currentDistanceMeasurement.targetVisible = false;
+                        this._currentDistanceMeasurement.clickable = false;
+                        this._touchState = WAITING_FOR_TARGET_TOUCH_START;
+                        //  console.log("touchend: this._touchState= WAITING_FOR_ORIGIN_QUICK_TOUCH_END -> WAITING_FOR_ORIGIN_TOUCH_START")
+                    } else {
+                        if (this._currentDistanceMeasurement) {
+                            this._currentDistanceMeasurement.destroy();
+                        }
+                        this._touchState = WAITING_FOR_ORIGIN_TOUCH_START;
+                        //  console.log("touchend: this._touchState= WAITING_FOR_ORIGIN_QUICK_TOUCH_END -> WAITING_FOR_ORIGIN_TOUCH_START")
+                    }
+                }
+                    enableCameraMouseControl();
+                    break;
+
+                case WAITING_FOR_ORIGIN_LONG_TOUCH_END:
+                    if (this.pointerLens) {
+                        this.pointerLens.visible = false;
+                    }
+                    if (!this._currentDistanceMeasurement) {
+                        if (this.pointerLens) {
+                            this.pointerLens.snapped = false;
+                            this.pointerLens.visible = false;
+                        }
+                        this._touchState = WAITING_FOR_ORIGIN_TOUCH_START;
+                        //  console.log("touchend: this._touchState= WAITING_FOR_ORIGIN_LONG_TOUCH_END (no measurement) -> WAITING_FOR_ORIGIN_TOUCH_START")
+                    } else {
+                        this._touchState = WAITING_FOR_TARGET_TOUCH_START;
+                        //  console.log("touchend: this._touchState= WAITING_FOR_ORIGIN_LONG_TOUCH_END (picked, begin measurement) -> WAITING_FOR_TARGET_TOUCH_START")
+                    }
+                    enableCameraMouseControl();
+                    break;
+
+                case WAITING_FOR_TARGET_QUICK_TOUCH_END: {
+                    if (numChangedTouches !== 1 ||
+                        touchX > touchStartCanvasPos[0] + touchTolerance ||
+                        touchX < touchStartCanvasPos[0] - touchTolerance ||
+                        touchY > touchStartCanvasPos[1] + touchTolerance ||
+                        touchY < touchStartCanvasPos[1] - touchTolerance) {
+                        this._touchState = WAITING_FOR_TARGET_TOUCH_START;
+                        return;
+                    }
+                    const pickResult = scene.pick({
+                        canvasPos: touchMoveCanvasPos,
+                        pickSurface: true
+                    });
+                    if (pickResult && pickResult.worldPos) {
+                        this._currentDistanceMeasurement.target.worldPos = pickResult.worldPos;
+                        this._currentDistanceMeasurement.targetVisible = true;
+                        this._currentDistanceMeasurement.wireVisible = true;
+                        this._currentDistanceMeasurement.labelsVisible = true;
+                        this.distanceMeasurementsPlugin.fire("measurementEnd", this._currentDistanceMeasurement);
+                        this._currentDistanceMeasurement = null;
+                    } else {
+                        if (this._currentDistanceMeasurement) {
+                            this._currentDistanceMeasurement.destroy();
+                            this._currentDistanceMeasurement = null;
+                        }
+                    }
+                    this._touchState = WAITING_FOR_ORIGIN_TOUCH_START;
+                    //  console.log("touchend: this._touchState= WAITING_FOR_TARGET_TOUCH_START -> WAITING_FOR_ORIGIN_TOUCH_START")
+                }
+                    enableCameraMouseControl();
+                    break;
+
+                case WAITING_FOR_TARGET_LONG_TOUCH_END:
+                    if (this.pointerLens) {
+                        this.pointerLens.visible = false;
+                    }
+                    if (!this._currentDistanceMeasurement || !this._currentDistanceMeasurement.targetVisible) {
+                        if (this._currentDistanceMeasurement) {
+                            this._currentDistanceMeasurement.destroy();
+                            this._currentDistanceMeasurement = null;
+                        }
+                        this._touchState = WAITING_FOR_ORIGIN_TOUCH_START;
+                        //  console.log("touchend: this._touchState= WAITING_FOR_TARGET_LONG_TOUCH_END (no target found) -> WAITING_FOR_ORIGIN_TOUCH_START")
+                    } else {
+                        this._currentDistanceMeasurement.clickable = true;
+                        this.distanceMeasurementsPlugin.fire("measurementEnd", this._currentDistanceMeasurement);
+                        this._currentDistanceMeasurement = null;
+                        this._touchState = WAITING_FOR_ORIGIN_TOUCH_START;
+                        //  console.log("touchend: this._touchState= WAITING_FOR_TARGET_LONG_TOUCH_END  -> WAITING_FOR_ORIGIN_TOUCH_START")
+                    }
+                    enableCameraMouseControl();
+                    break;
+            }
+
+        }, {passive: true});
+
+        this._active = true;
+    }
+
+    /**
+     * Deactivates this DistanceMeasurementsTouchControl, making it unresponsive to input.
+     *
+     * Destroys any {@link DistanceMeasurement} under construction.
+     */
+    deactivate() {
+        if (!this._active) {
+            return;
+        }
+        if (this.plugin.pointerLens) {
+            this.plugin.pointerLens.visible = false;
+        }
+        this.reset();
+        const canvas = this.plugin.viewer.scene.canvas.canvas;
+        canvas.removeEventListener("touchstart", this._onCanvasTouchStart);
+        canvas.removeEventListener("touchend", this._onCanvasTouchEnd);
+        if (this._currentDistanceMeasurement) {
+            this.distanceMeasurementsPlugin.fire("measurementCancel", this._currentDistanceMeasurement);
+            this._currentDistanceMeasurement.destroy();
+            this._currentDistanceMeasurement = null;
+        }
+        this._active = false;
+        this.plugin.viewer.cameraControl.active = true;
+    }
+
+    /**
+     * Resets this DistanceMeasurementsTouchControl.
+     *
+     * Destroys any {@link DistanceMeasurement} under construction.
+     *
+     * Does nothing if the DistanceMeasurementsTouchControl is not active.
+     */
+    reset() {
+        if (!this._active) {
+            return;
+        }
+        if (this._currentDistanceMeasurement) {
+            this.distanceMeasurementsPlugin.fire("measurementCancel", this._currentDistanceMeasurement);
+            this._currentDistanceMeasurement.destroy();
+            this._currentDistanceMeasurement = null;
+        }
+    }
+
+    /**
+     * Destroys this DistanceMeasurementsTouchControl.
+     */
+    destroy() {
+        this.deactivate();
+        super.destroy();
+    }
+}
+
 /**
  * {@link Viewer} plugin that makes interaction smoother with large models, by temporarily switching
  * the Viewer to faster, lower-quality rendering modes whenever we interact.
@@ -116655,7 +118532,8 @@ class Control {
 
         this._rootNode = new Node$2(scene, {
             position: [0, 0, 0],
-            scale: [5, 5, 5]
+            scale: [5, 5, 5],
+            isObject: false
         });
 
         const rootNode = this._rootNode;
@@ -116846,7 +118724,8 @@ class Control {
                 collidable: true,
                 clippable: false,
                 visible: false,
-                scale: [2.4, 2.4, 1]
+                scale: [2.4, 2.4, 1],
+                isObject: false
             }), NO_STATE_INHERIT),
 
             planeFrame: rootNode.addChild(new Mesh(rootNode, { // Visible frame
@@ -116877,7 +118756,8 @@ class Control {
                 clippable: false,
                 visible: false,
                 scale: [1, 1, .1],
-                rotation: [0, 0, 45]
+                rotation: [0, 0, 45],
+                isObject: false
             }), NO_STATE_INHERIT),
 
             //----------------------------------------------------------------------------------------------------------
@@ -116896,7 +118776,8 @@ class Control {
                 collidable: true,
                 clippable: false,
                 backfaces: true,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             xCurveHandle: rootNode.addChild(new Mesh(rootNode, { // Red hoop about Y-axis
@@ -116911,7 +118792,8 @@ class Control {
                 collidable: true,
                 clippable: false,
                 backfaces: true,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             xCurveArrow1: rootNode.addChild(new Mesh(rootNode, {
@@ -116926,7 +118808,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             xCurveArrow2: rootNode.addChild(new Mesh(rootNode, {
@@ -116941,7 +118824,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             //----------------------------------------------------------------------------------------------------------
@@ -116956,7 +118840,8 @@ class Control {
                 collidable: true,
                 clippable: false,
                 backfaces: true,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             yCurveHandle: rootNode.addChild(new Mesh(rootNode, {
@@ -116967,7 +118852,8 @@ class Control {
                 collidable: true,
                 clippable: false,
                 backfaces: true,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             yCurveArrow1: rootNode.addChild(new Mesh(rootNode, {
@@ -116982,7 +118868,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             yCurveArrow2: rootNode.addChild(new Mesh(rootNode, {
@@ -116997,7 +118884,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             //----------------------------------------------------------------------------------------------------------
@@ -117011,7 +118899,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             zCurveHandle: rootNode.addChild(new Mesh(rootNode, {
@@ -117021,7 +118910,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             zCurveCurveArrow1: rootNode.addChild(new Mesh(rootNode, {
@@ -117035,7 +118925,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             zCurveArrow2: rootNode.addChild(new Mesh(rootNode, {
@@ -117050,7 +118941,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             //----------------------------------------------------------------------------------------------------------
@@ -117065,7 +118957,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             //----------------------------------------------------------------------------------------------------------
@@ -117083,7 +118976,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             xAxisArrowHandle: rootNode.addChild(new Mesh(rootNode, {
@@ -117097,7 +118991,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             xAxis: rootNode.addChild(new Mesh(rootNode, {
@@ -117111,7 +119006,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             xAxisHandle: rootNode.addChild(new Mesh(rootNode, {
@@ -117125,7 +119021,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             //----------------------------------------------------------------------------------------------------------
@@ -117143,7 +119040,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             yAxisArrowHandle: rootNode.addChild(new Mesh(rootNode, {
@@ -117158,7 +119056,8 @@ class Control {
                 collidable: true,
                 clippable: false,
                 visible: false,
-                opacity: 0.2
+                opacity: 0.2,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             yShaft: rootNode.addChild(new Mesh(rootNode, {
@@ -117168,7 +119067,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             yShaftHandle: rootNode.addChild(new Mesh(rootNode, {
@@ -117178,7 +119078,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             //----------------------------------------------------------------------------------------------------------
@@ -117196,7 +119097,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             zAxisArrowHandle: rootNode.addChild(new Mesh(rootNode, {
@@ -117210,7 +119112,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
 
@@ -117225,7 +119128,8 @@ class Control {
                 clippable: false,
                 pickable: false,
                 collidable: true,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             zAxisHandle: rootNode.addChild(new Mesh(rootNode, {
@@ -117239,7 +119143,8 @@ class Control {
                 clippable: false,
                 pickable: true,
                 collidable: true,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT)
         };
 
@@ -117271,7 +119176,8 @@ class Control {
                 clippable: false,
                 visible: false,
                 scale: [1, 1, 1],
-                rotation: [0, 0, 45]
+                rotation: [0, 0, 45],
+                isObject: false
             }), NO_STATE_INHERIT),
 
             xHoop: rootNode.addChild(new Mesh(rootNode, { // Full
@@ -117287,7 +119193,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             yHoop: rootNode.addChild(new Mesh(rootNode, {
@@ -117299,7 +119206,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             zHoop: rootNode.addChild(new Mesh(rootNode, { // Blue hoop about Z-axis
@@ -117312,7 +119220,8 @@ class Control {
                 collidable: true,
                 clippable: false,
                 backfaces: true,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             xAxisArrow: rootNode.addChild(new Mesh(rootNode, {
@@ -117326,7 +119235,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             yAxisArrow: rootNode.addChild(new Mesh(rootNode, {
@@ -117340,7 +119250,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             zAxisArrow: rootNode.addChild(new Mesh(rootNode, {
@@ -117354,7 +119265,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT)
         };
     }
@@ -134402,4 +136314,4 @@ class CityJSONLoaderPlugin extends Plugin {
     }
 }
 
-export { AlphaFormat, AmbientLight, AngleMeasurementsControl, AngleMeasurementsMouseControl, AngleMeasurementsPlugin, AnnotationsPlugin, AxisGizmoPlugin, BCFViewpointsPlugin, Bitmap, ByteType, CameraMemento, CameraPath, CameraPathAnimation, CityJSONLoaderPlugin, ClampToEdgeWrapping, Component, CompressedMediaType, Configs, ContextMenu, CubicBezierCurve, Curve, DefaultLoadingManager, DepthFormat, DepthStencilFormat, DirLight, DistanceMeasurementsControl, DistanceMeasurementsMouseControl, DistanceMeasurementsPlugin, EdgeMaterial, EmphasisMaterial, FaceAlignedSectionPlanesPlugin, FastNavPlugin, FloatType, Fresnel, Frustum$1 as Frustum, FrustumPlane, GIFMediaType, GLTFDefaultDataSource, GLTFLoaderPlugin, HalfFloatType, ImagePlane, IntType, JPEGMediaType, KTX2TextureTranscoder, LASLoaderPlugin, LambertMaterial, LightMap, LineSet, LinearEncoding, LinearFilter, LinearMipMapLinearFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, Loader, LoadingManager, LocaleService, LuminanceAlphaFormat, LuminanceFormat, Map$1 as Map, Marker, MarqueePicker, MarqueePickerMouseControl, Mesh, MetallicMaterial, MirroredRepeatWrapping, ModelMemento, NavCubePlugin, NearestFilter, NearestMipMapLinearFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, Node$2 as Node, OBJLoaderPlugin, ObjectsKdTree3, ObjectsMemento, PNGMediaType, Path, PerformanceModel, PhongMaterial, Plugin, PointLight, PointerLens, QuadraticBezierCurve, Queue, RGBAFormat, RGBAIntegerFormat, RGBA_ASTC_10x10_Format, RGBA_ASTC_10x5_Format, RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_BPTC_Format, RGBA_ETC2_EAC_Format, RGBA_PVRTC_2BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, RGBFormat, RGB_ETC1_Format, RGB_ETC2_Format, RGB_PVRTC_2BPPV1_Format, RGB_PVRTC_4BPPV1_Format, RGB_S3TC_DXT1_Format, RGFormat, RGIntegerFormat, ReadableGeometry, RedFormat, RedIntegerFormat, ReflectionMap, RepeatWrapping, STLDefaultDataSource, STLLoaderPlugin, SceneModel, SceneModelMesh, SceneModelTransform, SectionPlane, SectionPlanesPlugin, ShortType, Skybox, SkyboxesPlugin, SpecularMaterial, SplineCurve, SpriteMarker, StoreyViewsPlugin, Texture, TextureTranscoder, TreeViewPlugin, UnsignedByteType, UnsignedInt248Type, UnsignedIntType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedShortType, VBOGeometry, ViewCullPlugin, Viewer, WebIFCLoaderPlugin, WorkerPool$1 as WorkerPool, XKTDefaultDataSource, XKTLoaderPlugin, XML3DLoaderPlugin, buildBoxGeometry, buildBoxLinesGeometry, buildBoxLinesGeometryFromAABB, buildCylinderGeometry, buildGridGeometry, buildPlaneGeometry, buildPolylineGeometry, buildPolylineGeometryFromCurve, buildSphereGeometry, buildTorusGeometry, buildVectorTextGeometry, createRTCViewMat, frustumIntersectsAABB3, getKTX2TextureTranscoder, getPlaneRTCPos, load3DSGeometry, loadOBJGeometry, math, rtcToWorldPos, sRGBEncoding, setFrustum, stats, utils, worldToRTCPos, worldToRTCPositions };
+export { AlphaFormat, AmbientLight, AngleMeasurementsControl, AngleMeasurementsMouseControl, AngleMeasurementsPlugin, AngleMeasurementsTouchControl, AnnotationsPlugin, AxisGizmoPlugin, BCFViewpointsPlugin, Bitmap, ByteType, CameraMemento, CameraPath, CameraPathAnimation, CityJSONLoaderPlugin, ClampToEdgeWrapping, Component, CompressedMediaType, Configs, ContextMenu, CubicBezierCurve, Curve, DefaultLoadingManager, DepthFormat, DepthStencilFormat, DirLight, DistanceMeasurementsControl, DistanceMeasurementsMouseControl, DistanceMeasurementsPlugin, DistanceMeasurementsTouchControl, EdgeMaterial, EmphasisMaterial, FaceAlignedSectionPlanesPlugin, FastNavPlugin, FloatType, Fresnel, Frustum$1 as Frustum, FrustumPlane, GIFMediaType, GLTFDefaultDataSource, GLTFLoaderPlugin, HalfFloatType, ImagePlane, IntType, JPEGMediaType, KTX2TextureTranscoder, LASLoaderPlugin, LambertMaterial, LightMap, LineSet, LinearEncoding, LinearFilter, LinearMipMapLinearFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, Loader, LoadingManager, LocaleService, LuminanceAlphaFormat, LuminanceFormat, Map$1 as Map, Marker, MarqueePicker, MarqueePickerMouseControl, Mesh, MetallicMaterial, MirroredRepeatWrapping, ModelMemento, NavCubePlugin, NearestFilter, NearestMipMapLinearFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, Node$2 as Node, OBJLoaderPlugin, ObjectsKdTree3, ObjectsMemento, PNGMediaType, Path, PerformanceModel, PhongMaterial, Plugin, PointLight, PointerCircle, PointerLens, QuadraticBezierCurve, Queue, RGBAFormat, RGBAIntegerFormat, RGBA_ASTC_10x10_Format, RGBA_ASTC_10x5_Format, RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_BPTC_Format, RGBA_ETC2_EAC_Format, RGBA_PVRTC_2BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, RGBFormat, RGB_ETC1_Format, RGB_ETC2_Format, RGB_PVRTC_2BPPV1_Format, RGB_PVRTC_4BPPV1_Format, RGB_S3TC_DXT1_Format, RGFormat, RGIntegerFormat, ReadableGeometry, RedFormat, RedIntegerFormat, ReflectionMap, RepeatWrapping, STLDefaultDataSource, STLLoaderPlugin, SceneModel, SceneModelMesh, SceneModelTransform, SectionPlane, SectionPlanesPlugin, ShortType, Skybox, SkyboxesPlugin, SpecularMaterial, SplineCurve, SpriteMarker, StoreyViewsPlugin, Texture, TextureTranscoder, TreeViewPlugin, UnsignedByteType, UnsignedInt248Type, UnsignedIntType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedShortType, VBOGeometry, ViewCullPlugin, Viewer, WebIFCLoaderPlugin, WorkerPool$1 as WorkerPool, XKTDefaultDataSource, XKTLoaderPlugin, XML3DLoaderPlugin, buildBoxGeometry, buildBoxLinesGeometry, buildBoxLinesGeometryFromAABB, buildCylinderGeometry, buildGridGeometry, buildPlaneGeometry, buildPolylineGeometry, buildPolylineGeometryFromCurve, buildSphereGeometry, buildTorusGeometry, buildVectorTextGeometry, createRTCViewMat, frustumIntersectsAABB3, getKTX2TextureTranscoder, getPlaneRTCPos, load3DSGeometry, loadOBJGeometry, math, rtcToWorldPos, sRGBEncoding, setFrustum, stats, utils, worldToRTCPos, worldToRTCPositions };