Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE] Touch measurements #1440

Merged
merged 6 commits into from
Apr 15, 2024
Merged

[FEATURE] Touch measurements #1440

merged 6 commits into from
Apr 15, 2024

Conversation

xeolabs
Copy link
Member

@xeolabs xeolabs commented Apr 15, 2024

This PR adds touch support for creating distance and angle measurements, with optional snapping to the nearest vertex or edge.

Creating DistanceMeasurements with Touch Input

In the following example, we'll 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]

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();

Creating AngleMeasurements with Touch Input

In the following example, we'll 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]

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();

@xeolabs xeolabs added this to the 2.6.0 milestone Apr 15, 2024
@xeolabs xeolabs merged commit 9aef2c5 into master Apr 15, 2024
2 of 4 checks passed
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>xeokit Example</title>
<link href="../css/pageStyle.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

Check warning

Code scanning / CodeQL

Inclusion of functionality from an untrusted source Medium

Script loaded from content delivery network with no integrity check.
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>xeokit Example</title>
<link href="../css/pageStyle.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

Check warning

Code scanning / CodeQL

Inclusion of functionality from an untrusted source Medium

Script loaded from content delivery network with no integrity check.
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>xeokit Example</title>
<link href="../css/pageStyle.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

Check warning

Code scanning / CodeQL

Inclusion of functionality from an untrusted source Medium

Script loaded from content delivery network with no integrity check.
@xeolabs xeolabs changed the title Touch measurements [FEATURE] Touch measurements Apr 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant