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

package/dist/xeokit-sdk.cjs.js

@@ -9145,6 +9145,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.
  */
@@ -12628,6 +12762,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 {
 
@@ -12829,6 +13003,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}.
  *
@@ -15263,6 +16346,14 @@ class PickResult {
         }
     }
 
+    /**
+     * True if snapped to edge or vertex.
+     * @returns {boolean}
+     */
+    get snapped() {
+        return this.snappedToEdge || this.snappedToVertex;
+    }
+
     /**
      * @private
      */
@@ -86430,6 +87521,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 {
 
@@ -86663,7 +87794,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.
      */
@@ -86715,6 +87846,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.
@@ -116659,7 +118536,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;
@@ -116850,7 +118728,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
@@ -116881,7 +118760,8 @@ class Control {
                 clippable: false,
                 visible: false,
                 scale: [1, 1, .1],
-                rotation: [0, 0, 45]
+                rotation: [0, 0, 45],
+                isObject: false
             }), NO_STATE_INHERIT),
 
             //----------------------------------------------------------------------------------------------------------
@@ -116900,7 +118780,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
@@ -116915,7 +118796,8 @@ class Control {
                 collidable: true,
                 clippable: false,
                 backfaces: true,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             xCurveArrow1: rootNode.addChild(new Mesh(rootNode, {
@@ -116930,7 +118812,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             xCurveArrow2: rootNode.addChild(new Mesh(rootNode, {
@@ -116945,7 +118828,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             //----------------------------------------------------------------------------------------------------------
@@ -116960,7 +118844,8 @@ class Control {
                 collidable: true,
                 clippable: false,
                 backfaces: true,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             yCurveHandle: rootNode.addChild(new Mesh(rootNode, {
@@ -116971,7 +118856,8 @@ class Control {
                 collidable: true,
                 clippable: false,
                 backfaces: true,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             yCurveArrow1: rootNode.addChild(new Mesh(rootNode, {
@@ -116986,7 +118872,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             yCurveArrow2: rootNode.addChild(new Mesh(rootNode, {
@@ -117001,7 +118888,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             //----------------------------------------------------------------------------------------------------------
@@ -117015,7 +118903,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             zCurveHandle: rootNode.addChild(new Mesh(rootNode, {
@@ -117025,7 +118914,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             zCurveCurveArrow1: rootNode.addChild(new Mesh(rootNode, {
@@ -117039,7 +118929,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             zCurveArrow2: rootNode.addChild(new Mesh(rootNode, {
@@ -117054,7 +118945,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             //----------------------------------------------------------------------------------------------------------
@@ -117069,7 +118961,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             //----------------------------------------------------------------------------------------------------------
@@ -117087,7 +118980,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             xAxisArrowHandle: rootNode.addChild(new Mesh(rootNode, {
@@ -117101,7 +118995,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             xAxis: rootNode.addChild(new Mesh(rootNode, {
@@ -117115,7 +119010,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             xAxisHandle: rootNode.addChild(new Mesh(rootNode, {
@@ -117129,7 +119025,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             //----------------------------------------------------------------------------------------------------------
@@ -117147,7 +119044,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             yAxisArrowHandle: rootNode.addChild(new Mesh(rootNode, {
@@ -117162,7 +119060,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, {
@@ -117172,7 +119071,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             yShaftHandle: rootNode.addChild(new Mesh(rootNode, {
@@ -117182,7 +119082,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             //----------------------------------------------------------------------------------------------------------
@@ -117200,7 +119101,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             zAxisArrowHandle: rootNode.addChild(new Mesh(rootNode, {
@@ -117214,7 +119116,8 @@ class Control {
                 pickable: true,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
 
@@ -117229,7 +119132,8 @@ class Control {
                 clippable: false,
                 pickable: false,
                 collidable: true,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             zAxisHandle: rootNode.addChild(new Mesh(rootNode, {
@@ -117243,7 +119147,8 @@ class Control {
                 clippable: false,
                 pickable: true,
                 collidable: true,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT)
         };
 
@@ -117275,7 +119180,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
@@ -117291,7 +119197,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             yHoop: rootNode.addChild(new Mesh(rootNode, {
@@ -117303,7 +119210,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
@@ -117316,7 +119224,8 @@ class Control {
                 collidable: true,
                 clippable: false,
                 backfaces: true,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             xAxisArrow: rootNode.addChild(new Mesh(rootNode, {
@@ -117330,7 +119239,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             yAxisArrow: rootNode.addChild(new Mesh(rootNode, {
@@ -117344,7 +119254,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT),
 
             zAxisArrow: rootNode.addChild(new Mesh(rootNode, {
@@ -117358,7 +119269,8 @@ class Control {
                 pickable: false,
                 collidable: true,
                 clippable: false,
-                visible: false
+                visible: false,
+                isObject: false
             }), NO_STATE_INHERIT)
         };
     }
@@ -134411,6 +136323,7 @@ exports.AmbientLight = AmbientLight;
 exports.AngleMeasurementsControl = AngleMeasurementsControl;
 exports.AngleMeasurementsMouseControl = AngleMeasurementsMouseControl;
 exports.AngleMeasurementsPlugin = AngleMeasurementsPlugin;
+exports.AngleMeasurementsTouchControl = AngleMeasurementsTouchControl;
 exports.AnnotationsPlugin = AnnotationsPlugin;
 exports.AxisGizmoPlugin = AxisGizmoPlugin;
 exports.BCFViewpointsPlugin = BCFViewpointsPlugin;
@@ -134434,6 +136347,7 @@ exports.DirLight = DirLight;
 exports.DistanceMeasurementsControl = DistanceMeasurementsControl;
 exports.DistanceMeasurementsMouseControl = DistanceMeasurementsMouseControl;
 exports.DistanceMeasurementsPlugin = DistanceMeasurementsPlugin;
+exports.DistanceMeasurementsTouchControl = DistanceMeasurementsTouchControl;
 exports.EdgeMaterial = EdgeMaterial;
 exports.EmphasisMaterial = EmphasisMaterial;
 exports.FaceAlignedSectionPlanesPlugin = FaceAlignedSectionPlanesPlugin;
@@ -134489,6 +136403,7 @@ exports.PerformanceModel = PerformanceModel;
 exports.PhongMaterial = PhongMaterial;
 exports.Plugin = Plugin;
 exports.PointLight = PointLight;
+exports.PointerCircle = PointerCircle;
 exports.PointerLens = PointerLens;
 exports.QuadraticBezierCurve = QuadraticBezierCurve;
 exports.Queue = Queue;