Reference Source
public class | source

AngleMeasurementsPlugin

Extends:

Plugin → AngleMeasurementsPlugin

Viewer plugin for measuring angles.

Overview

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

Constructor Summary

Public Constructor
public

constructor(viewer: Viewer, cfg: Object)

Member Summary

Public Members
public get
this get was deprecated.
public
public
public get

Gets the existing AngleMeasurements, each mapped to its AngleMeasurement#id.

public

zIndex: *

Method Summary

Public Methods
public

clear()

Destroys all AngleMeasurements.

public

Creates an AngleMeasurement.

public

Destroys this AngleMeasurementsPlugin.

public

Destroys a AngleMeasurement.

public

getContainerElement(): * | HTMLElement | HTMLElement

Gets the plugin's HTML container element, if any.

public

setLabelsShown(labelsShown: Boolean)

Shows all or hides the angle label of each AngleMeasurement.

Inherited Summary

From class Plugin
public

ID for this Plugin, unique within its Viewer.

public

The Viewer that contains this Plugin.

public

Destroys this Plugin and removes it from its Viewer.

public

error(msg: String)

Logs an error message to the JavaScript developer console, prefixed with the ID of this Plugin.

public

fire(event: String, value: Object, forget: Boolean)

Fires an event on this Plugin.

public

Returns true if there are any subscribers to the given event on this Plugin.

public

log(msg: String)

Logs a message to the JavaScript developer console, prefixed with the ID of this Plugin.

public

off(subId: String)

Cancels an event subscription that was previously made with Plugin#on or Plugin#once.

public

on(event: String, callback: Function, scope: Object): String

Subscribes to an event on this Plugin.

public

once(event: String, callback: Function, scope: Object)

Subscribes to the next occurrence of the given event, then un-subscribes as soon as the event is subIdd.

public

scheduleTask(task: *)

Schedule a task to perform on the next browser interval

public

warn(msg: String)

Logs a warning message to the JavaScript developer console, prefixed with the ID of this Plugin.

Public Constructors

public constructor(viewer: Viewer, cfg: Object) source

Creates this Plugin and installs it into the given Viewer.

Override:

Plugin#constructor

Params:

NameTypeAttributeDescription
viewer Viewer

The Viewer.

cfg Object
  • optional

Plugin configuration.

cfg.id String
  • optional
  • default: "AngleMeasurements"

Optional ID for this plugin, so that we can find it within Viewer#plugins.

cfg.container HTMLElement
  • optional

Container DOM element for markers and labels. Defaults to document.body.

cfg.defaultColor string
  • optional
  • default: null

The default color of the dots, wire and label.

cfg.defaultLabelsVisible boolean
  • optional
  • default: true

The default value of AngleMeasurement.labelsVisible.

cfg.zIndex number
  • optional

If set, the wires, dots and labels will have this zIndex (+1 for dots and +2 for labels).

cfg.pointerLens PointerCircle
  • optional

A PointerLens to help the user position the pointer. This can be shared with other plugins.

Public Members

public get control: AngleMeasurementsMouseControl source

this get was deprecated.

Gets the default AngleMeasurementsMouseControl.

public defaultColor: * source

public defaultLabelsVisible: * source

public get measurements: {String: AngleMeasurement} source

Gets the existing AngleMeasurements, each mapped to its AngleMeasurement#id.

public zIndex: * source

Public Methods

public clear() source

Destroys all AngleMeasurements.

public createMeasurement(params: Object): AngleMeasurement source

Creates an AngleMeasurement.

The AngleMeasurement is then registered by AngleMeasurement#id in AngleMeasurementsPlugin#measurements.

Params:

NameTypeAttributeDescription
params Object

AngleMeasurement configuration.

params.id String

Unique ID to assign to AngleMeasurement#id. The AngleMeasurement will be registered by this in AngleMeasurementsPlugin#measurements and Scene.components. Must be unique among all components in the Viewer.

params.origin.worldPos Number[]

Origin World-space 3D position.

params.origin.entity Entity

Origin Entity.

params.corner.worldPos Number[]

Corner World-space 3D position.

params.corner.entity Entity

Corner Entity.

params.target.worldPos Number[]

Target World-space 3D position.

params.target.entity Entity

Target Entity.

params.visible Boolean
  • optional
  • default: true

Whether to initially show the AngleMeasurement.

public destroy() source

Destroys this AngleMeasurementsPlugin.

Destroys all AngleMeasurements first.

Override:

Plugin#destroy

public destroyMeasurement(id: String) source

Destroys a AngleMeasurement.

Params:

NameTypeAttributeDescription
id String

ID of AngleMeasurement to destroy.

public getContainerElement(): * | HTMLElement | HTMLElement source

Gets the plugin's HTML container element, if any.

Return:

* | HTMLElement | HTMLElement

public setLabelsShown(labelsShown: Boolean) source

Shows all or hides the angle label of each AngleMeasurement.

Params:

NameTypeAttributeDescription
labelsShown Boolean

Whether or not to show the labels.