AngleMeasurementsPlugin

Viewer plugin for measuring angles.

• [Example 1: Model with angle measurements]
• [Example 2: Create angle measurements with mouse]

Overview

• An AngleMeasurement shows the angle between two connected 3D line segments, given as three positions on the surface(s) of one or more Entitys.
• As shown on the screen capture above, a AngleMeasurement has two wires that show the line segments, with a label that shows the angle between them.
• Create AngleMeasurements programmatically with AngleMeasurementsPlugin#createMeasurement.
• Create AngleMeasurements interactively using a AngleMeasurementsControl.
• Existing AngleMeasurements are registered by ID in AngleMeasurementsPlugin#measurements.
• Destroy AngleMeasurements using AngleMeasurementsPlugin#destroyMeasurement.
• Configure global measurement units and scale via Metrics, located at Scene#metrics

Example 1: Creating AngleMeasurements Programmatically

In our first example, we'll use an XKTLoaderPlugin to load a model, and then use a AngleMeasurementsPlugin to programmatically create two AngleMeasurements.

Note how each AngleMeasurement has origin, corner and target, which each indicate a 3D World-space position on the surface of an Entity. These can be aon the same Entity, or on different Entitys.

[Run example]

import {Viewer, XKTLoaderPlugin, AngleMeasurementsPlugin} 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"
});

model.on("loaded", () => {

     const myMeasurement1 = angleMeasurements.createMeasurement({
         id: "myAngleMeasurement1",
         origin: {
             entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
             worldPos: [0.044, 5.998, 17.767]
         },
         corner: {
             entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
             worldPos: [0.044, 5.998, 17.767]
         },
         target: {
             entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
             worldPos: [4.738, 3.172, 17.768]
         },
         visible: true
     });

     const myMeasurement2 = angleMeasurements.createMeasurement({
         id: "myAngleMeasurement2",
         origin: {
             entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FNr2"],
             worldPos: [0.457, 2.532, 17.766]
         },
         corner: {
             entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FNr2"],
             worldPos: [0.457, 2.532, 17.766]
         },
         target: {
             entity: viewer.scene.objects["1CZILmCaHETO8tf3SgGEXu"],
             worldPos: [0.436, 0.001, 22.135]
         },
         visible: true
     });
});

Example 2: Creating AngleMeasurements with Mouse Input

In our second example, we'll use an XKTLoaderPlugin to load a model, then we'll use the AngleMeasurementsPlugin's AngleMeasurementsTouchControl to interactively create AngleMeasurements with mouse or touch input.

After we've activated the AngleMeasurementsControl, the first click on any Entity begins constructing a AngleMeasurement, fixing its origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after that will fix its target and complete the AngleMeasurement.

The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing another AngleMeasurement, and so on, until deactivated again.

[Run example]

import {Viewer, XKTLoaderPlugin, AngleMeasurementsPlugin, AngleMeasurementsMouseControl, PointerLens} 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);

cconst angleMeasurementsMouseControl  = new AngleMeasurementsMouseControl(angleMeasurements, {
    pointerLens : new PointerLens(viewer)
})

angleMeasurementsMouseControl.snapToVertex = true;
angleMeasurementsMouseControl.snapToEdge = true;

angleMeasurementsMouseControl.activate();

Example 4: Attaching Mouse Handlers

In our fourth example, we'll attach even handlers to our plugin, to catch when the user hovers or right-clicks over our measurements.

[Run example]

import {Viewer, XKTLoaderPlugin, AngleMeasurementsPlugin} 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);

angleMeasurements.on("mouseOver", (e) => {
    e.measurement.setHighlighted(true);
});

angleMeasurements.on("mouseLeave", (e) => {
    e.measurement.setHighlighted(false);
});

angleMeasurements.on("contextMenu", (e) => {
    // Show context menu
    e.event.preventDefault();
});

const model = xktLoader.load({
     src: "./models/xkt/duplex/duplex.xkt"
});

model.on("loaded", () => {

      angleMeasurementsPlugin.createMeasurement({
            id: "angleMeasurement1",
            origin: {
                entity: viewer.scene.objects["1CZILmCaHETO8tf3SgGEXu"],
                worldPos: [0.4158603637281142, 2.5193106917110457, 17.79972838299403]
            },
            corner: {
                entity: viewer.scene.objects["1CZILmCaHETO8tf3SgGEXu"],
                worldPos: [0.41857741956197625,0.0987169929481646,17.799763071093395]
            },
            target: {
                entity: viewer.scene.objects["1CZILmCaHETO8tf3SgGEXu"],
                worldPos: [5.235526066859247, 0.11580773869801986, 17.824891550941565]
            },
            visible: true
        });

        angleMeasurementsPlugin.createMeasurement({
            id: "angleMeasurement2",
            origin: {
                entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FNr2"],
                worldPos: [-0.00003814187850181838, 5.9996748076205115,17.79996871551525]
            },
            corner: {
                entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FNqI"],
                worldPos: [-0.0005214119318139865, 3.1010044228517595, 17.787656604483363]

            },
            target: {
                entity: viewer.scene.objects["1s1jVhK8z0pgKYcr9jt7AB"],
                worldPos: [ 8.380657312957396, 3.1055697628459553, 17.799220108187185]
            },
            visible: true
        });
});

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]

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