diff --git a/docs/ast/source/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.json b/docs/ast/source/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.json index 7328ec2b1e..75d5654876 100644 --- a/docs/ast/source/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.json +++ b/docs/ast/source/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.json @@ -288,7 +288,7 @@ "trailingComments": [ { "type": "CommentBlock", - "value": "*\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n ", + "value": "*\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementsPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n ", "start": 176, "end": 5947, "loc": { @@ -11095,7 +11095,7 @@ "leadingComments": [ { "type": "CommentBlock", - "value": "*\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n ", + "value": "*\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementsPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n ", "start": 176, "end": 5947, "loc": { @@ -11123,7 +11123,7 @@ "comments": [ { "type": "CommentBlock", - "value": "*\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n ", + "value": "*\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementsPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n ", "start": 176, "end": 5947, "loc": { @@ -11818,7 +11818,7 @@ }, { "type": "CommentBlock", - "value": "*\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n ", + "value": "*\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementsPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n ", "start": 176, "end": 5947, "loc": { diff --git a/docs/ast/source/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.json b/docs/ast/source/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.json index 7328ec2b1e..75d5654876 100644 --- a/docs/ast/source/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.json +++ b/docs/ast/source/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.json @@ -288,7 +288,7 @@ "trailingComments": [ { "type": "CommentBlock", - "value": "*\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n ", + "value": "*\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementsPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n ", "start": 176, "end": 5947, "loc": { @@ -11095,7 +11095,7 @@ "leadingComments": [ { "type": "CommentBlock", - "value": "*\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n ", + "value": "*\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementsPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n ", "start": 176, "end": 5947, "loc": { @@ -11123,7 +11123,7 @@ "comments": [ { "type": "CommentBlock", - "value": "*\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n ", + "value": "*\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementsPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n ", "start": 176, "end": 5947, "loc": { @@ -11818,7 +11818,7 @@ }, { "type": "CommentBlock", - "value": "*\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n ", + "value": "*\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementsPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n ", "start": 176, "end": 5947, "loc": { diff --git a/docs/class/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js~AngleMeasurementsPlugin.html b/docs/class/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js~AngleMeasurementsPlugin.html index 6903839621..cab0fb912e 100644 --- a/docs/class/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js~AngleMeasurementsPlugin.html +++ b/docs/class/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js~AngleMeasurementsPlugin.html @@ -173,7 +173,7 @@

Example 1: Creat }); }); -

Example 2: Creating AngleMeasurements Interactively

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

+

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.

diff --git a/docs/class/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js~AngleMeasurementsPlugin.html b/docs/class/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js~AngleMeasurementsPlugin.html index 5fa48fbe9b..36003e7586 100644 --- a/docs/class/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js~AngleMeasurementsPlugin.html +++ b/docs/class/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js~AngleMeasurementsPlugin.html @@ -267,7 +267,7 @@

Example 1: Creat }); }); -

Example 2: Creating AngleMeasurements Interactively

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

+

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.

diff --git a/docs/file/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.html b/docs/file/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.html index 8d9acaff58..10644f3107 100644 --- a/docs/file/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.html +++ b/docs/file/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.html @@ -163,7 +163,7 @@ * * ## Example 2: Creating AngleMeasurements Interactively * - * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input. + * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementsPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input. * * After we've activated the AngleMeasurementsControl, the first click on any {@link 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 diff --git a/docs/file/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.html b/docs/file/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.html index 0f0874a9d8..c2e249a0c4 100644 --- a/docs/file/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.html +++ b/docs/file/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.html @@ -257,7 +257,7 @@ * * ## Example 2: Creating AngleMeasurements Interactively * - * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input. + * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementsPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input. * * After we've activated the AngleMeasurementsControl, the first click on any {@link 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 diff --git a/docs/index.json b/docs/index.json index cba8632108..ad6b0260c5 100644 --- a/docs/index.json +++ b/docs/index.json @@ -3288,7 +3288,7 @@ "__docId__": 251, "kind": "file", "name": "src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js", - "content": "import {Plugin} from \"../../viewer/Plugin.js\";\nimport {AngleMeasurement} from \"./AngleMeasurement.js\";\nimport {AngleMeasurementsControl} from \"./AngleMeasurementsControl.js\";\n\n/**\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n */\nclass AngleMeasurementsPlugin extends Plugin {\n\n /**\n * @constructor\n * @param {Viewer} viewer The Viewer.\n * @param {Object} [cfg] Plugin configuration.\n * @param {String} [cfg.id=\"AngleMeasurements\"] Optional ID for this plugin, so that we can find it within {@link Viewer#plugins}.\n * @param {HTMLElement} [cfg.container] Container DOM element for markers and labels. Defaults to ````document.body````.\n */\n constructor(viewer, cfg = {}) {\n\n super(\"AngleMeasurements\", viewer);\n\n this._container = cfg.container || document.body;\n\n this._control = new AngleMeasurementsControl(this);\n\n this._measurements = {};\n }\n\n /**\n * @private\n */\n send(name, value) {\n\n }\n\n /**\n * Gets the {@link AngleMeasurementsControl}, which creates {@link AngleMeasurement}s from user input.\n *\n * @type {AngleMeasurementsControl}\n */\n get control() {\n return this._control;\n }\n\n /**\n * Gets the existing {@link AngleMeasurement}s, each mapped to its {@link AngleMeasurement#id}.\n *\n * @type {{String:AngleMeasurement}}\n */\n get measurements() {\n return this._measurements;\n }\n\n /**\n * Creates an {@link AngleMeasurement}.\n *\n * The AngleMeasurement is then registered by {@link AngleMeasurement#id} in {@link AngleMeasurementsPlugin#measurements}.\n *\n * @param {Object} params {@link AngleMeasurement} configuration.\n * @param {String} params.id Unique ID to assign to {@link AngleMeasurement#id}. The AngleMeasurement will be registered by this in {@link AngleMeasurementsPlugin#measurements} and {@link Scene.components}. Must be unique among all components in the {@link Viewer}.\n * @param {Number[]} params.origin.worldPos Origin World-space 3D position.\n * @param {Entity} params.origin.entity Origin Entity.\n * @param {Number[]} params.corner.worldPos Corner World-space 3D position.\n * @param {Entity} params.corner.entity Corner Entity.\n * @param {Number[]} params.target.worldPos Target World-space 3D position.\n * @param {Entity} params.target.entity Target Entity.\n * @param {Boolean} [params.visible=true] Whether to initially show the {@link AngleMeasurement}.\n * @returns {AngleMeasurement} The new {@link AngleMeasurement}.\n */\n createMeasurement(params = {}) {\n if (this.viewer.scene.components[params.id]) {\n this.error(\"Viewer scene component with this ID already exists: \" + params.id);\n delete params.id;\n }\n const origin = params.origin;\n const corner = params.corner;\n const target = params.target;\n const measurement = new AngleMeasurement(this, {\n id: params.id,\n plugin: this,\n container: this._container,\n origin: {\n entity: origin.entity,\n worldPos: origin.worldPos\n },\n corner: {\n entity: corner.entity,\n worldPos: corner.worldPos\n },\n target: {\n entity: target.entity,\n worldPos: target.worldPos\n },\n\n visible: params.visible,\n originVisible: true,\n originWireVisible: true,\n cornerVisible: true,\n targetWireVisible: true,\n targetVisible: true,\n });\n this._measurements[measurement.id] = measurement;\n measurement.on(\"destroyed\", () => {\n delete this._measurements[measurement.id];\n });\n return measurement;\n }\n\n /**\n * Destroys a {@link AngleMeasurement}.\n *\n * @param {String} id ID of AngleMeasurement to destroy.\n */\n destroyMeasurement(id) {\n const measurement = this._measurements[id];\n if (!measurement) {\n this.log(\"AngleMeasurement not found: \" + id);\n return;\n }\n measurement.destroy();\n }\n\n /**\n * Destroys all {@link AngleMeasurement}s.\n */\n clear() {\n const ids = Object.keys(this._measurements);\n for (var i = 0, len = ids.length; i < len; i++) {\n this.destroyMeasurement(ids[i]);\n }\n }\n\n /**\n * Destroys this AngleMeasurementsPlugin.\n *\n * Destroys all {@link AngleMeasurement}s first.\n */\n destroy() {\n this.clear();\n super.destroy();\n }\n}\n\nexport {AngleMeasurementsPlugin}\n", + "content": "import {Plugin} from \"../../viewer/Plugin.js\";\nimport {AngleMeasurement} from \"./AngleMeasurement.js\";\nimport {AngleMeasurementsControl} from \"./AngleMeasurementsControl.js\";\n\n/**\n * {@link Viewer} plugin for measuring angles.\n *\n * [](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n *\n * * [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n * * [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ## Overview\n *\n * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\n * as three positions on the surface(s) of one or more {@link Entity}s.\n * * 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.\n * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n *\n * ## Example 1: Creating AngleMeasurements Programmatically\n *\n * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n *\n * Note how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\n * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * model.on(\"loaded\", () => {\n *\n * const myMeasurement1 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement1\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [0.044, 5.998, 17.767]\n * },\n * target: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n * worldPos: [4.738, 3.172, 17.768]\n * },\n * visible: true\n * });\n *\n * const myMeasurement2 = angleMeasurements.createMeasurement({\n * id: \"myAngleMeasurement2\",\n * origin: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * corner: {\n * entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n * worldPos: [0.457, 2.532, 17.766]\n * },\n * target: {\n * entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n * worldPos: [0.436, 0.001, 22.135]\n * },\n * visible: true\n * });\n * });\n * ````\n *\n * ## Example 2: Creating AngleMeasurements Interactively\n *\n * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementsPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n *\n * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\n * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\n * that will fix its target and complete the AngleMeasurement.\n *\n * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\n * another AngleMeasurement, and so on, until deactivated again.\n *\n * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n *\n * ````JavaScript\n * import {Viewer} from \"../src/viewer/Viewer.js\";\n * import {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\n * import {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n *\n * const viewer = new Viewer({\n * canvasId: \"myCanvas\",\n * transparent: true\n * });\n *\n * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];\n * viewer.scene.camera.look = [10.97, 5.82, -11.22];\n * viewer.scene.camera.up = [0.36, 0.83, 0.40];\n *\n * const xktLoader = new XKTLoaderPlugin(viewer);\n *\n * const angleMeasurements = new AngleMeasurementsPlugin(viewer);\n *\n * const model = xktLoader.load({\n * src: \"./models/xkt/duplex/duplex.xkt\"\n * });\n *\n * angleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n * ````\n */\nclass AngleMeasurementsPlugin extends Plugin {\n\n /**\n * @constructor\n * @param {Viewer} viewer The Viewer.\n * @param {Object} [cfg] Plugin configuration.\n * @param {String} [cfg.id=\"AngleMeasurements\"] Optional ID for this plugin, so that we can find it within {@link Viewer#plugins}.\n * @param {HTMLElement} [cfg.container] Container DOM element for markers and labels. Defaults to ````document.body````.\n */\n constructor(viewer, cfg = {}) {\n\n super(\"AngleMeasurements\", viewer);\n\n this._container = cfg.container || document.body;\n\n this._control = new AngleMeasurementsControl(this);\n\n this._measurements = {};\n }\n\n /**\n * @private\n */\n send(name, value) {\n\n }\n\n /**\n * Gets the {@link AngleMeasurementsControl}, which creates {@link AngleMeasurement}s from user input.\n *\n * @type {AngleMeasurementsControl}\n */\n get control() {\n return this._control;\n }\n\n /**\n * Gets the existing {@link AngleMeasurement}s, each mapped to its {@link AngleMeasurement#id}.\n *\n * @type {{String:AngleMeasurement}}\n */\n get measurements() {\n return this._measurements;\n }\n\n /**\n * Creates an {@link AngleMeasurement}.\n *\n * The AngleMeasurement is then registered by {@link AngleMeasurement#id} in {@link AngleMeasurementsPlugin#measurements}.\n *\n * @param {Object} params {@link AngleMeasurement} configuration.\n * @param {String} params.id Unique ID to assign to {@link AngleMeasurement#id}. The AngleMeasurement will be registered by this in {@link AngleMeasurementsPlugin#measurements} and {@link Scene.components}. Must be unique among all components in the {@link Viewer}.\n * @param {Number[]} params.origin.worldPos Origin World-space 3D position.\n * @param {Entity} params.origin.entity Origin Entity.\n * @param {Number[]} params.corner.worldPos Corner World-space 3D position.\n * @param {Entity} params.corner.entity Corner Entity.\n * @param {Number[]} params.target.worldPos Target World-space 3D position.\n * @param {Entity} params.target.entity Target Entity.\n * @param {Boolean} [params.visible=true] Whether to initially show the {@link AngleMeasurement}.\n * @returns {AngleMeasurement} The new {@link AngleMeasurement}.\n */\n createMeasurement(params = {}) {\n if (this.viewer.scene.components[params.id]) {\n this.error(\"Viewer scene component with this ID already exists: \" + params.id);\n delete params.id;\n }\n const origin = params.origin;\n const corner = params.corner;\n const target = params.target;\n const measurement = new AngleMeasurement(this, {\n id: params.id,\n plugin: this,\n container: this._container,\n origin: {\n entity: origin.entity,\n worldPos: origin.worldPos\n },\n corner: {\n entity: corner.entity,\n worldPos: corner.worldPos\n },\n target: {\n entity: target.entity,\n worldPos: target.worldPos\n },\n\n visible: params.visible,\n originVisible: true,\n originWireVisible: true,\n cornerVisible: true,\n targetWireVisible: true,\n targetVisible: true,\n });\n this._measurements[measurement.id] = measurement;\n measurement.on(\"destroyed\", () => {\n delete this._measurements[measurement.id];\n });\n return measurement;\n }\n\n /**\n * Destroys a {@link AngleMeasurement}.\n *\n * @param {String} id ID of AngleMeasurement to destroy.\n */\n destroyMeasurement(id) {\n const measurement = this._measurements[id];\n if (!measurement) {\n this.log(\"AngleMeasurement not found: \" + id);\n return;\n }\n measurement.destroy();\n }\n\n /**\n * Destroys all {@link AngleMeasurement}s.\n */\n clear() {\n const ids = Object.keys(this._measurements);\n for (var i = 0, len = ids.length; i < len; i++) {\n this.destroyMeasurement(ids[i]);\n }\n }\n\n /**\n * Destroys this AngleMeasurementsPlugin.\n *\n * Destroys all {@link AngleMeasurement}s first.\n */\n destroy() {\n this.clear();\n super.destroy();\n }\n}\n\nexport {AngleMeasurementsPlugin}\n", "static": true, "longname": "/home/lindsay/xeolabs/xeokit/xeokit-nov-18/xeokit-sdk/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js", "access": "public", @@ -3306,7 +3306,7 @@ "export": true, "importPath": "@xeokit/xeokit-sdk/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js", "importStyle": "{AngleMeasurementsPlugin}", - "description": "{@link Viewer} plugin for measuring angles.\n\n[](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n\n* [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n* [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n\n## Overview\n\n* An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\nas three positions on the surface(s) of one or more {@link Entity}s.\n* 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.\n* Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n* Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n* Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n* Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n* Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n\n## Example 1: Creating AngleMeasurements Programmatically\n\nIn our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n\nNote how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\nposition on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n\n[[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n\n````JavaScript\nimport {Viewer} from \"../src/viewer/Viewer.js\";\nimport {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\nimport {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n\nconst viewer = new Viewer({\n canvasId: \"myCanvas\",\n transparent: true\n});\n\nviewer.scene.camera.eye = [-2.37, 18.97, -26.12];\nviewer.scene.camera.look = [10.97, 5.82, -11.22];\nviewer.scene.camera.up = [0.36, 0.83, 0.40];\n\nconst xktLoader = new XKTLoaderPlugin(viewer);\n\nconst angleMeasurements = new AngleMeasurementsPlugin(viewer);\n\nconst model = xktLoader.load({\n src: \"./models/xkt/duplex/duplex.xkt\"\n});\n\nmodel.on(\"loaded\", () => {\n\n const myMeasurement1 = angleMeasurements.createMeasurement({\n id: \"myAngleMeasurement1\",\n origin: {\n entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n worldPos: [0.044, 5.998, 17.767]\n },\n corner: {\n entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n worldPos: [0.044, 5.998, 17.767]\n },\n target: {\n entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n worldPos: [4.738, 3.172, 17.768]\n },\n visible: true\n });\n\n const myMeasurement2 = angleMeasurements.createMeasurement({\n id: \"myAngleMeasurement2\",\n origin: {\n entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n worldPos: [0.457, 2.532, 17.766]\n },\n corner: {\n entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n worldPos: [0.457, 2.532, 17.766]\n },\n target: {\n entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n worldPos: [0.436, 0.001, 22.135]\n },\n visible: true\n });\n});\n````\n\n## Example 2: Creating AngleMeasurements Interactively\n\nIn our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n\nAfter we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\norigin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\nthat will fix its target and complete the AngleMeasurement.\n\nThe AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\nanother AngleMeasurement, and so on, until deactivated again.\n\n[[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n\n````JavaScript\nimport {Viewer} from \"../src/viewer/Viewer.js\";\nimport {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\nimport {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n\nconst viewer = new Viewer({\n canvasId: \"myCanvas\",\n transparent: true\n});\n\nviewer.scene.camera.eye = [-2.37, 18.97, -26.12];\nviewer.scene.camera.look = [10.97, 5.82, -11.22];\nviewer.scene.camera.up = [0.36, 0.83, 0.40];\n\nconst xktLoader = new XKTLoaderPlugin(viewer);\n\nconst angleMeasurements = new AngleMeasurementsPlugin(viewer);\n\nconst model = xktLoader.load({\n src: \"./models/xkt/duplex/duplex.xkt\"\n});\n\nangleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n````", + "description": "{@link Viewer} plugin for measuring angles.\n\n[](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)\n\n* [[Example 1: Model with angle measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n* [[Example 2: Create angle measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n\n## Overview\n\n* An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given\nas three positions on the surface(s) of one or more {@link Entity}s.\n* 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.\n* Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.\n* Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.\n* Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.\n* Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.\n* Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}\n\n## Example 1: Creating AngleMeasurements Programmatically\n\nIn our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.\n\nNote how each AngleMeasurement has ````origin````, ````corner```` and ````target````, which each indicate a 3D World-space\nposition on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.\n\n[[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]\n\n````JavaScript\nimport {Viewer} from \"../src/viewer/Viewer.js\";\nimport {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\nimport {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n\nconst viewer = new Viewer({\n canvasId: \"myCanvas\",\n transparent: true\n});\n\nviewer.scene.camera.eye = [-2.37, 18.97, -26.12];\nviewer.scene.camera.look = [10.97, 5.82, -11.22];\nviewer.scene.camera.up = [0.36, 0.83, 0.40];\n\nconst xktLoader = new XKTLoaderPlugin(viewer);\n\nconst angleMeasurements = new AngleMeasurementsPlugin(viewer);\n\nconst model = xktLoader.load({\n src: \"./models/xkt/duplex/duplex.xkt\"\n});\n\nmodel.on(\"loaded\", () => {\n\n const myMeasurement1 = angleMeasurements.createMeasurement({\n id: \"myAngleMeasurement1\",\n origin: {\n entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n worldPos: [0.044, 5.998, 17.767]\n },\n corner: {\n entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n worldPos: [0.044, 5.998, 17.767]\n },\n target: {\n entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FLOH\"],\n worldPos: [4.738, 3.172, 17.768]\n },\n visible: true\n });\n\n const myMeasurement2 = angleMeasurements.createMeasurement({\n id: \"myAngleMeasurement2\",\n origin: {\n entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n worldPos: [0.457, 2.532, 17.766]\n },\n corner: {\n entity: viewer.scene.objects[\"2O2Fr$t4X7Zf8NOew3FNr2\"],\n worldPos: [0.457, 2.532, 17.766]\n },\n target: {\n entity: viewer.scene.objects[\"1CZILmCaHETO8tf3SgGEXu\"],\n worldPos: [0.436, 0.001, 22.135]\n },\n visible: true\n });\n});\n````\n\n## Example 2: Creating AngleMeasurements Interactively\n\nIn our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementsPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.\n\nAfter we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its\norigin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after\nthat will fix its target and complete the AngleMeasurement.\n\nThe AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing\nanother AngleMeasurement, and so on, until deactivated again.\n\n[[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_createWithMouse)]\n\n````JavaScript\nimport {Viewer} from \"../src/viewer/Viewer.js\";\nimport {XKTLoaderPlugin} from \"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js\";\nimport {AngleMeasurementsPlugin} from \"../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js\";\n\nconst viewer = new Viewer({\n canvasId: \"myCanvas\",\n transparent: true\n});\n\nviewer.scene.camera.eye = [-2.37, 18.97, -26.12];\nviewer.scene.camera.look = [10.97, 5.82, -11.22];\nviewer.scene.camera.up = [0.36, 0.83, 0.40];\n\nconst xktLoader = new XKTLoaderPlugin(viewer);\n\nconst angleMeasurements = new AngleMeasurementsPlugin(viewer);\n\nconst model = xktLoader.load({\n src: \"./models/xkt/duplex/duplex.xkt\"\n});\n\nangleMeasurements.control.activate(); // <------------ Activate the AngleMeasurementsControl\n````", "lineNumber": 131, "interface": false, "extends": [ diff --git a/examples/css/pageStyle.css b/examples/css/pageStyle.css index 63f363e848..d2c566c50e 100644 --- a/examples/css/pageStyle.css +++ b/examples/css/pageStyle.css @@ -1,9 +1,10 @@ body { - font-family: 'Roboto', sans-serif; - font-size: 15px; - line-height: 1.50; - color: #444444; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #212529; background-color: white; text-decoration: none; word-spacing: normal; @@ -35,7 +36,7 @@ body { height: 100%; overflow-y: scroll; transition: all 300ms ease-in-out; - border-left: 2px solid #444444; + border-left: 2px solid #212529; margin-top: 0; padding: 0px 10px 10px 20px; } @@ -56,7 +57,6 @@ body { .info-button { position: absolute; - color: #444444; right: 15px; top: 12px; z-index: 1; @@ -82,16 +82,18 @@ body { } h1, h2, h3 { - font-weight: normal; + font-family: inherit; + line-height: 1.2; + color: inherit; -webkit-transform-origin: 0% 100%; } h1 { + font-weight:500; margin-top: 0; margin-bottom: 0; padding-top: 15px; - font-size: 22px; - font-weight: normal; + font-size: 1.4rem; } h1 a { @@ -99,24 +101,20 @@ h1 a { } h2 { - font-size: 18px; - line-height: 1.2; + font-size: 1.0rem; + font-weight: 550; padding-top: 30px; padding-left: 0px; - font-weight: bold; margin-top: 0px; padding-bottom: 10px; margin-bottom: 0; letter-spacing: 0px; /*border-bottom: 2px solid #d4d4d4;*/ - color: #4E7A4A; } h3 { - font-size: 14px; - line-height: 1.2; - font-weight: bold; - color: #8F3434; + font-size: 1.0rem; + font-weight: 550; padding: 0; margin: 0; padding-left: 0px; @@ -134,8 +132,16 @@ h3 { border: 2px solid #ebebeb; background: #4444; visibility: hidden; - box-shadow: 5px 5px 15px 1px #444444; + box-shadow: 5px 5px 15px 1px #212529; z-index: 10000; pointer-events: none; } +a { + /*text-decoration: none;*/ + /*color: #212529;*/ +} + +a:hover { + text-decoration: underline; +} diff --git a/examples/index.html b/examples/index.html index 16fad6f63a..7d50e32212 100644 --- a/examples/index.html +++ b/examples/index.html @@ -13,10 +13,10 @@