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 the AngleMeasurementsControl, located at AngleMeasurementsPlugin#control.
• 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 Interactively

In our second example, we'll use an XKTLoaderPlugin to load a model, then we'll use the AngleMeasurementsPlugin's AngleMeasurementsControl 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} 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"
});

angleMeasurements.control.activate();  // <------------ Activate the AngleMeasurementsControl