@xeokit/xeokit-sdk 2.5.2-beta-10 → 2.5.2-beta-13

package/src/src/plugins/SectionPlanesPlugin/Control.js

@@ -0,0 +1,1328 @@
+import {math} from "../../viewer/scene/math/math.js";
+
+import {buildCylinderGeometry} from "../../viewer/scene/geometry/builders/buildCylinderGeometry.js";
+import {buildTorusGeometry} from "../../viewer/scene/geometry/builders/buildTorusGeometry.js";
+
+import {ReadableGeometry} from "../../viewer/scene/geometry/ReadableGeometry.js";
+import {PhongMaterial} from "../../viewer/scene/materials/PhongMaterial.js";
+import {EmphasisMaterial} from "../../viewer/scene/materials/EmphasisMaterial.js";
+import {Node} from "../../viewer/scene/nodes/Node.js";
+import {Mesh} from "../../viewer/scene/mesh/Mesh.js";
+import {buildSphereGeometry} from "../../viewer/scene/geometry/builders/buildSphereGeometry.js";
+import {worldToRTCPos} from "../../viewer/scene/math/rtcCoords.js";
+
+const zeroVec = new Float64Array([0, 0, 1]);
+const quat = new Float64Array(4);
+
+/**
+ * Controls a {@link SectionPlane} with mouse and touch input.
+ *
+ * @private
+ */
+class Control {
+
+    /** @private */
+    constructor(plugin) {
+
+        /**
+         * ID of this Control.
+         *
+         * SectionPlaneControls are mapped by this ID in {@link SectionPlanesPlugin#sectionPlaneControls}.
+         *
+         * @property id
+         * @type {String|Number}
+         */
+        this.id = null;
+
+        this._viewer = plugin.viewer;
+
+        this._visible = false;
+        this._pos = math.vec3(); // Full-precision position of the center of the Control
+        this._origin = math.vec3();
+        this._rtcPos = math.vec3();
+
+        this._baseDir = math.vec3(); // Saves direction of clip plane when we start dragging an arrow or ring.
+        this._rootNode = null; // Root of Node graph that represents this control in the 3D scene
+        this._displayMeshes = null; // Meshes that are always visible
+        this._affordanceMeshes = null; // Meshes displayed momentarily for affordance
+
+        this._ignoreNextSectionPlaneDirUpdate = false;
+
+        this._createNodes();
+        this._bindEvents();
+    }
+
+    /**
+     * Called by SectionPlanesPlugin to assign this Control to a SectionPlane.
+     * SectionPlanesPlugin keeps SectionPlaneControls in a reuse pool.
+     * Call with a null or undefined value to disconnect the Control ffrom whatever SectionPlane it was assigned to.
+     * @private
+     */
+    _setSectionPlane(sectionPlane) {
+        if (this._sectionPlane) {
+            this._sectionPlane.off(this._onSectionPlanePos);
+            this._sectionPlane.off(this._onSectionPlaneDir);
+            this._onSectionPlanePos = null;
+            this._onSectionPlaneDir = null;
+            this._sectionPlane = null;
+        }
+        if (sectionPlane) {
+            this.id = sectionPlane.id;
+            this._setPos(sectionPlane.pos);
+            this._setDir(sectionPlane.dir);
+            this._sectionPlane = sectionPlane;
+            this._onSectionPlanePos = sectionPlane.on("pos", () => {
+                this._setPos(this._sectionPlane.pos);
+            });
+            this._onSectionPlaneDir = sectionPlane.on("dir", () => {
+                if (!this._ignoreNextSectionPlaneDirUpdate) {
+                    this._setDir(this._sectionPlane.dir);
+                } else {
+                    this._ignoreNextSectionPlaneDirUpdate = false;
+                }
+            });
+        }
+    }
+
+    /**
+     * Gets the {@link SectionPlane} controlled by this Control.
+     * @returns {SectionPlane} The SectionPlane.
+     */
+    get sectionPlane() {
+        return this._sectionPlane;
+    }
+
+    /** @private */
+    _setPos(xyz) {
+
+        this._pos.set(xyz);
+
+        worldToRTCPos(this._pos, this._origin, this._rtcPos);
+
+        this._rootNode.origin = this._origin;
+        this._rootNode.position = this._rtcPos;
+    }
+
+    /** @private */
+    _setDir(xyz) {
+        this._baseDir.set(xyz);
+        this._rootNode.quaternion = math.vec3PairToQuaternion(zeroVec, xyz, quat);
+    }
+
+    _setSectionPlaneDir(dir) {
+        if (this._sectionPlane) {
+            this._ignoreNextSectionPlaneDirUpdate = true;
+            this._sectionPlane.dir = dir;
+        }
+    }
+
+    /**
+     * Sets if this Control is visible.
+     *
+     * @type {Boolean}
+     */
+    setVisible(visible = true) {
+        if (this._visible === visible) {
+            return;
+        }
+        this._visible = visible;
+        var id;
+        for (id in this._displayMeshes) {
+            if (this._displayMeshes.hasOwnProperty(id)) {
+                this._displayMeshes[id].visible = visible;
+            }
+        }
+        if (!visible) {
+            for (id in this._affordanceMeshes) {
+                if (this._affordanceMeshes.hasOwnProperty(id)) {
+                    this._affordanceMeshes[id].visible = visible;
+                }
+            }
+        }
+    }
+
+    /**
+     * Gets if this Control is visible.
+     *
+     * @type {Boolean}
+     */
+    getVisible() {
+        return this._visible;
+    }
+
+    /**
+     * Sets if this Control is culled. This is called by SectionPlanesPlugin to
+     * temporarily hide the Control while a snapshot is being taken by Viewer#getSnapshot().
+     * @param culled
+     */
+    setCulled(culled) {
+        var id;
+        for (id in this._displayMeshes) {
+            if (this._displayMeshes.hasOwnProperty(id)) {
+                this._displayMeshes[id].culled = culled;
+            }
+        }
+        if (!culled) {
+            for (id in this._affordanceMeshes) {
+                if (this._affordanceMeshes.hasOwnProperty(id)) {
+                    this._affordanceMeshes[id].culled = culled;
+                }
+            }
+        }
+    }
+
+    /**
+     * Builds the Entities that represent this Control.
+     * @private
+     */
+    _createNodes() {
+
+        const NO_STATE_INHERIT = false;
+        const scene = this._viewer.scene;
+        const radius = 1.0;
+        const handleTubeRadius = 0.06;
+        const hoopRadius = radius - 0.2;
+        const tubeRadius = 0.01;
+        const arrowRadius = 0.07;
+
+        this._rootNode = new Node(scene, {
+            position: [0, 0, 0],
+            scale: [5, 5, 5]
+        });
+
+        const rootNode = this._rootNode;
+
+        const shapes = {// Reusable geometries
+
+            arrowHead: new ReadableGeometry(rootNode, buildCylinderGeometry({
+                radiusTop: 0.001,
+                radiusBottom: arrowRadius,
+                radialSegments: 32,
+                heightSegments: 1,
+                height: 0.2,
+                openEnded: false
+            })),
+
+            arrowHeadBig: new ReadableGeometry(rootNode, buildCylinderGeometry({
+                radiusTop: 0.001,
+                radiusBottom: 0.09,
+                radialSegments: 32,
+                heightSegments: 1,
+                height: 0.25,
+                openEnded: false
+            })),
+
+            arrowHeadHandle: new ReadableGeometry(rootNode, buildCylinderGeometry({
+                radiusTop: 0.09,
+                radiusBottom: 0.09,
+                radialSegments: 8,
+                heightSegments: 1,
+                height: 0.37,
+                openEnded: false
+            })),
+
+            curve: new ReadableGeometry(rootNode, buildTorusGeometry({
+                radius: hoopRadius,
+                tube: tubeRadius,
+                radialSegments: 64,
+                tubeSegments: 14,
+                arc: (Math.PI * 2.0) / 4.0
+            })),
+
+            curveHandle: new ReadableGeometry(rootNode, buildTorusGeometry({
+                radius: hoopRadius,
+                tube: handleTubeRadius,
+                radialSegments: 64,
+                tubeSegments: 14,
+                arc: (Math.PI * 2.0) / 4.0
+            })),
+
+            hoop: new ReadableGeometry(rootNode, buildTorusGeometry({
+                radius: hoopRadius,
+                tube: tubeRadius,
+                radialSegments: 64,
+                tubeSegments: 8,
+                arc: (Math.PI * 2.0)
+            })),
+
+            axis: new ReadableGeometry(rootNode, buildCylinderGeometry({
+                radiusTop: tubeRadius,
+                radiusBottom: tubeRadius,
+                radialSegments: 20,
+                heightSegments: 1,
+                height: radius,
+                openEnded: false
+            })),
+
+            axisHandle: new ReadableGeometry(rootNode, buildCylinderGeometry({
+                radiusTop: 0.08,
+                radiusBottom: 0.08,
+                radialSegments: 20,
+                heightSegments: 1,
+                height: radius,
+                openEnded: false
+            }))
+        };
+
+        const materials = { // Reusable materials
+
+            pickable: new PhongMaterial(rootNode, { // Invisible material for pickable handles, which define a pickable 3D area
+                diffuse: [1, 1, 0],
+                alpha: 0, // Invisible
+                alphaMode: "blend"
+            }),
+
+            red: new PhongMaterial(rootNode, {
+                diffuse: [1, 0.0, 0.0],
+                emissive: [1, 0.0, 0.0],
+                ambient: [0.0, 0.0, 0.0],
+                specular: [.6, .6, .3],
+                shininess: 80,
+                lineWidth: 2
+            }),
+
+            highlightRed: new EmphasisMaterial(rootNode, { // Emphasis for red rotation affordance hoop
+                edges: false,
+                fill: true,
+                fillColor: [1, 0, 0],
+                fillAlpha: 0.6
+            }),
+
+            green: new PhongMaterial(rootNode, {
+                diffuse: [0.0, 1, 0.0],
+                emissive: [0.0, 1, 0.0],
+                ambient: [0.0, 0.0, 0.0],
+                specular: [.6, .6, .3],
+                shininess: 80,
+                lineWidth: 2
+            }),
+
+            highlightGreen: new EmphasisMaterial(rootNode, { // Emphasis for green rotation affordance hoop
+                edges: false,
+                fill: true,
+                fillColor: [0, 1, 0],
+                fillAlpha: 0.6
+            }),
+
+            blue: new PhongMaterial(rootNode, {
+                diffuse: [0.0, 0.0, 1],
+                emissive: [0.0, 0.0, 1],
+                ambient: [0.0, 0.0, 0.0],
+                specular: [.6, .6, .3],
+                shininess: 80,
+                lineWidth: 2
+            }),
+
+            highlightBlue: new EmphasisMaterial(rootNode, { // Emphasis for blue rotation affordance hoop
+                edges: false,
+                fill: true,
+                fillColor: [0, 0, 1],
+                fillAlpha: 0.2
+            }),
+
+            center: new PhongMaterial(rootNode, {
+                diffuse: [0.0, 0.0, 0.0],
+                emissive: [0, 0, 0],
+                ambient: [0.0, 0.0, 0.0],
+                specular: [.6, .6, .3],
+                shininess: 80
+            }),
+
+            highlightBall: new EmphasisMaterial(rootNode, {
+                edges: false,
+                fill: true,
+                fillColor: [0.5, 0.5, 0.5],
+                fillAlpha: 0.5,
+                vertices: false
+            }),
+
+            highlightPlane: new EmphasisMaterial(rootNode, {
+                edges: true,
+                edgeWidth: 3,
+                fill: false,
+                fillColor: [0.5, 0.5, .5],
+                fillAlpha: 0.5,
+                vertices: false
+            })
+        };
+
+        this._displayMeshes = {
+
+            plane: rootNode.addChild(new Mesh(rootNode, {
+                geometry: new ReadableGeometry(rootNode, {
+                    primitive: "triangles",
+                    positions: [
+                        0.5, 0.5, 0.0, 0.5, -0.5, 0.0, // 0
+                        -0.5, -0.5, 0.0, -0.5, 0.5, 0.0, // 1
+                        0.5, 0.5, -0.0, 0.5, -0.5, -0.0, // 2
+                        -0.5, -0.5, -0.0, -0.5, 0.5, -0.0 // 3
+                    ],
+                    indices: [0, 1, 2, 2, 3, 0]
+                }),
+                material: new PhongMaterial(rootNode, {
+                    emissive: [0, 0.0, 0],
+                    diffuse: [0, 0, 0],
+                    backfaces: true
+                }),
+                opacity: 0.6,
+                ghosted: true,
+                ghostMaterial: new EmphasisMaterial(rootNode, {
+                    edges: false,
+                    filled: true,
+                    fillColor: [1, 1, 0],
+                    edgeColor: [0, 0, 0],
+                    fillAlpha: 0.1,
+                    backfaces: true
+                }),
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false,
+                scale: [2.4, 2.4, 1]
+            }), NO_STATE_INHERIT),
+
+            planeFrame: rootNode.addChild(new Mesh(rootNode, { // Visible frame
+                geometry: new ReadableGeometry(rootNode, buildTorusGeometry({
+                    center: [0, 0, 0],
+                    radius: 1.7,
+                    tube: tubeRadius * 2,
+                    radialSegments: 4,
+                    tubeSegments: 4,
+                    arc: Math.PI * 2.0
+                })),
+                material: new PhongMaterial(rootNode, {
+                    emissive: [0, 0, 0],
+                    diffuse: [0, 0, 0],
+                    specular: [0, 0, 0],
+                    shininess: 0
+                }),
+                //highlighted: true,
+                highlightMaterial: new EmphasisMaterial(rootNode, {
+                    edges: false,
+                    edgeColor: [0.0, 0.0, 0.0],
+                    filled: true,
+                    fillColor: [0.8, 0.8, 0.8],
+                    fillAlpha: 1.0
+                }),
+                pickable: false,
+                collidable: false,
+                clippable: false,
+                visible: false,
+                scale: [1, 1, .1],
+                rotation: [0, 0, 45]
+            }), NO_STATE_INHERIT),
+
+            //----------------------------------------------------------------------------------------------------------
+            //
+            //----------------------------------------------------------------------------------------------------------
+
+            xCurve: rootNode.addChild(new Mesh(rootNode, { // Red hoop about Y-axis
+                geometry: shapes.curve,
+                material: materials.red,
+                matrix: (function () {
+                    const rotate2 = math.rotationMat4v(90 * math.DEGTORAD, [0, 1, 0], math.identityMat4());
+                    const rotate1 = math.rotationMat4v(270 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
+                    return math.mulMat4(rotate1, rotate2, math.identityMat4());
+                })(),
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                backfaces: true,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            xCurveHandle: rootNode.addChild(new Mesh(rootNode, { // Red hoop about Y-axis
+                geometry: shapes.curveHandle,
+                material: materials.pickable,
+                matrix: (function () {
+                    const rotate2 = math.rotationMat4v(90 * math.DEGTORAD, [0, 1, 0], math.identityMat4());
+                    const rotate1 = math.rotationMat4v(270 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
+                    return math.mulMat4(rotate1, rotate2, math.identityMat4());
+                })(),
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                backfaces: true,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            xCurveArrow1: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHead,
+                material: materials.red,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0., -0.07, -0.8, math.identityMat4());
+                    const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
+                    const rotate = math.rotationMat4v(0 * math.DEGTORAD, [0, 0, 1], math.identityMat4());
+                    return math.mulMat4(math.mulMat4(translate, scale, math.identityMat4()), rotate, math.identityMat4());
+                })(),
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            xCurveArrow2: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHead,
+                material: materials.red,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0.0, -0.8, -0.07, math.identityMat4());
+                    const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
+                    const rotate = math.rotationMat4v(90 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
+                    return math.mulMat4(math.mulMat4(translate, scale, math.identityMat4()), rotate, math.identityMat4());
+                })(),
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            //----------------------------------------------------------------------------------------------------------
+            //
+            //----------------------------------------------------------------------------------------------------------
+
+            yCurve: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.curve,
+                material: materials.green,
+                rotation: [-90, 0, 0],
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                backfaces: true,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            yCurveHandle: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.curveHandle,
+                material: materials.pickable,
+                rotation: [-90, 0, 0],
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                backfaces: true,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            yCurveArrow1: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHead,
+                material: materials.green,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0.07, 0, -0.8, math.identityMat4());
+                    const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
+                    const rotate = math.rotationMat4v(90 * math.DEGTORAD, [0, 0, 1], math.identityMat4());
+                    return math.mulMat4(math.mulMat4(translate, scale, math.identityMat4()), rotate, math.identityMat4());
+                })(),
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            yCurveArrow2: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHead,
+                material: materials.green,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0.8, 0.0, -0.07, math.identityMat4());
+                    const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
+                    const rotate = math.rotationMat4v(90 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
+                    return math.mulMat4(math.mulMat4(translate, scale, math.identityMat4()), rotate, math.identityMat4());
+                })(),
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            //----------------------------------------------------------------------------------------------------------
+            //
+            //----------------------------------------------------------------------------------------------------------
+
+            zCurve: rootNode.addChild(new Mesh(rootNode, { // Blue hoop about Z-axis
+                geometry: shapes.curve,
+                material: materials.blue,
+                matrix: math.rotationMat4v(180 * math.DEGTORAD, [1, 0, 0], math.identityMat4()),
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            zCurveHandle: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.curveHandle,
+                material: materials.pickable,
+                matrix: math.rotationMat4v(180 * math.DEGTORAD, [1, 0, 0], math.identityMat4()),
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            zCurveCurveArrow1: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHead,
+                material: materials.blue,
+                matrix: (function () {
+                    const translate = math.translateMat4c(.8, -0.07, 0, math.identityMat4());
+                    const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
+                    return math.mulMat4(translate, scale, math.identityMat4());
+                })(),
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            zCurveArrow2: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHead,
+                material: materials.blue,
+                matrix: (function () {
+                    const translate = math.translateMat4c(.05, -0.8, 0, math.identityMat4());
+                    const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
+                    const rotate = math.rotationMat4v(90 * math.DEGTORAD, [0, 0, 1], math.identityMat4());
+                    return math.mulMat4(math.mulMat4(translate, scale, math.identityMat4()), rotate, math.identityMat4());
+                })(),
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            //----------------------------------------------------------------------------------------------------------
+            //
+            //----------------------------------------------------------------------------------------------------------
+
+            center: rootNode.addChild(new Mesh(rootNode, {
+                geometry: new ReadableGeometry(rootNode, buildSphereGeometry({
+                    radius: 0.05
+                })),
+                material: materials.center,
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            //----------------------------------------------------------------------------------------------------------
+            //
+            //----------------------------------------------------------------------------------------------------------
+
+            xAxisArrow: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHead,
+                material: materials.red,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
+                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0, 0, 1], math.identityMat4());
+                    return math.mulMat4(rotate, translate, math.identityMat4());
+                })(),
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            xAxisArrowHandle: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHeadHandle,
+                material: materials.pickable,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
+                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0, 0, 1], math.identityMat4());
+                    return math.mulMat4(rotate, translate, math.identityMat4());
+                })(),
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            xAxis: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.axis,
+                material: materials.red,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0, radius / 2, 0, math.identityMat4());
+                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0, 0, 1], math.identityMat4());
+                    return math.mulMat4(rotate, translate, math.identityMat4());
+                })(),
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            xAxisHandle: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.axisHandle,
+                material: materials.pickable,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0, radius / 2, 0, math.identityMat4());
+                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0, 0, 1], math.identityMat4());
+                    return math.mulMat4(rotate, translate, math.identityMat4());
+                })(),
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            //----------------------------------------------------------------------------------------------------------
+            //
+            //----------------------------------------------------------------------------------------------------------
+
+            yAxisArrow: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHead,
+                material: materials.green,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
+                    const rotate = math.rotationMat4v(180 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
+                    return math.mulMat4(rotate, translate, math.identityMat4());
+                })(),
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            yAxisArrowHandle: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHeadHandle,
+                material: materials.pickable,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
+                    const rotate = math.rotationMat4v(180 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
+                    return math.mulMat4(rotate, translate, math.identityMat4());
+                })(),
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                visible: false,
+                opacity: 0.2
+            }), NO_STATE_INHERIT),
+
+            yShaft: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.axis,
+                material: materials.green,
+                position: [0, -radius / 2, 0],
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            yShaftHandle: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.axisHandle,
+                material: materials.pickable,
+                position: [0, -radius / 2, 0],
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            //----------------------------------------------------------------------------------------------------------
+            //
+            //----------------------------------------------------------------------------------------------------------
+
+            zAxisArrow: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHead,
+                material: materials.blue,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
+                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0.8, 0, 0], math.identityMat4());
+                    return math.mulMat4(rotate, translate, math.identityMat4());
+                })(),
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            zAxisArrowHandle: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHeadHandle,
+                material: materials.pickable,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
+                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0.8, 0, 0], math.identityMat4());
+                    return math.mulMat4(rotate, translate, math.identityMat4());
+                })(),
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+
+            zShaft: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.axis,
+                material: materials.blue,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0, radius / 2, 0, math.identityMat4());
+                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
+                    return math.mulMat4(rotate, translate, math.identityMat4());
+                })(),
+                clippable: false,
+                pickable: false,
+                collidable: true,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            zAxisHandle: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.axisHandle,
+                material: materials.pickable,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0, radius / 2, 0, math.identityMat4());
+                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
+                    return math.mulMat4(rotate, translate, math.identityMat4());
+                })(),
+                clippable: false,
+                pickable: true,
+                collidable: true,
+                visible: false
+            }), NO_STATE_INHERIT)
+        };
+
+        this._affordanceMeshes = {
+
+            planeFrame: rootNode.addChild(new Mesh(rootNode, {
+                geometry: new ReadableGeometry(rootNode, buildTorusGeometry({
+                    center: [0, 0, 0],
+                    radius: 2,
+                    tube: tubeRadius,
+                    radialSegments: 4,
+                    tubeSegments: 4,
+                    arc: Math.PI * 2.0
+                })),
+                material: new PhongMaterial(rootNode, {
+                    ambient: [1, 1, 1],
+                    diffuse: [0, 0, 0],
+                    emissive: [1, 1, 0]
+                }),
+                highlighted: true,
+                highlightMaterial: new EmphasisMaterial(rootNode, {
+                    edges: false,
+                    filled: true,
+                    fillColor: [1, 1, 0],
+                    fillAlpha: 1.0
+                }),
+                pickable: false,
+                collidable: false,
+                clippable: false,
+                visible: false,
+                scale: [1, 1, 1],
+                rotation: [0, 0, 45]
+            }), NO_STATE_INHERIT),
+
+            xHoop: rootNode.addChild(new Mesh(rootNode, { // Full
+                geometry: shapes.hoop,
+                material: materials.red,
+                highlighted: true,
+                highlightMaterial: materials.highlightRed,
+                matrix: (function () {
+                    const rotate2 = math.rotationMat4v(90 * math.DEGTORAD, [0, 1, 0], math.identityMat4());
+                    const rotate1 = math.rotationMat4v(270 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
+                    return math.mulMat4(rotate1, rotate2, math.identityMat4());
+                })(),
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            yHoop: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.hoop,
+                material: materials.green,
+                highlighted: true,
+                highlightMaterial: materials.highlightGreen,
+                rotation: [-90, 0, 0],
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            zHoop: rootNode.addChild(new Mesh(rootNode, { // Blue hoop about Z-axis
+                geometry: shapes.hoop,
+                material: materials.blue,
+                highlighted: true,
+                highlightMaterial: materials.highlightBlue,
+                matrix: math.rotationMat4v(180 * math.DEGTORAD, [1, 0, 0], math.identityMat4()),
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                backfaces: true,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            xAxisArrow: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHeadBig,
+                material: materials.red,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
+                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0, 0, 1], math.identityMat4());
+                    return math.mulMat4(rotate, translate, math.identityMat4());
+                })(),
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            yAxisArrow: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHeadBig,
+                material: materials.green,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
+                    const rotate = math.rotationMat4v(180 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
+                    return math.mulMat4(rotate, translate, math.identityMat4());
+                })(),
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT),
+
+            zAxisArrow: rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHeadBig,
+                material: materials.blue,
+                matrix: (function () {
+                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
+                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0.8, 0, 0], math.identityMat4());
+                    return math.mulMat4(rotate, translate, math.identityMat4());
+                })(),
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false
+            }), NO_STATE_INHERIT)
+        };
+    }
+
+    _bindEvents() {
+
+        const self = this;
+
+        var grabbed = false;
+
+        const DRAG_ACTIONS = {
+            none: -1,
+            xTranslate: 0,
+            yTranslate: 1,
+            zTranslate: 2,
+            xRotate: 3,
+            yRotate: 4,
+            zRotate: 5
+        };
+
+        const rootNode = this._rootNode;
+
+        var nextDragAction = null; // As we hover grabbed an arrow or hoop, self is the action we would do if we then dragged it.
+        var dragAction = null; // Action we're doing while we drag an arrow or hoop.
+        const lastCanvasPos = math.vec2();
+
+        const xBaseAxis = math.vec3([1, 0, 0]);
+        const yBaseAxis = math.vec3([0, 1, 0]);
+        const zBaseAxis = math.vec3([0, 0, 1]);
+
+        const canvas = this._viewer.scene.canvas.canvas;
+        const camera = this._viewer.camera;
+        const scene = this._viewer.scene;
+
+        { // Keep gizmo screen size constant
+
+            const tempVec3a = math.vec3([0, 0, 0]);
+
+            let distDirty = true;
+            let lastDist = -1;
+
+            this._onCameraViewMatrix = scene.camera.on("viewMatrix", () => {
+                distDirty = true;
+            });
+
+            this._onCameraProjMatrix = scene.camera.on("projMatrix", () => {
+                distDirty = true;
+            });
+
+            this._onSceneTick = scene.on("tick", () => {
+
+                const dist = Math.abs(math.lenVec3(math.subVec3(scene.camera.eye, this._pos, tempVec3a)));
+
+                if (dist !== lastDist) {
+                    if (camera.projection === "perspective") {
+                        const worldSize = (Math.tan(camera.perspective.fov * math.DEGTORAD)) * dist;
+                        const size = 0.07 * worldSize;
+                        rootNode.scale = [size, size, size];
+                        lastDist = dist;
+                    }
+                }
+
+                if (camera.projection === "ortho") {
+                    const worldSize = camera.ortho.scale / 10;
+                    const size = worldSize;
+                    rootNode.scale = [size, size, size];
+                    lastDist = dist;
+                }
+            });
+        }
+
+        const getClickCoordsWithinElement = (function () {
+            const canvasPos = new Float64Array(2);
+            return function (event) {
+                if (!event) {
+                    event = window.event;
+                    canvasPos[0] = event.x;
+                    canvasPos[1] = event.y;
+                } else {
+                    var element = event.target;
+                    var totalOffsetLeft = 0;
+                    var totalOffsetTop = 0;
+
+                    while (element.offsetParent) {
+                        totalOffsetLeft += element.offsetLeft;
+                        totalOffsetTop += element.offsetTop;
+                        element = element.offsetParent;
+                    }
+                    canvasPos[0] = event.pageX - totalOffsetLeft;
+                    canvasPos[1] = event.pageY - totalOffsetTop;
+                }
+                return canvasPos;
+            };
+        })();
+
+        const localToWorldVec = (function () {
+            const mat = math.mat4();
+            return function (localVec, worldVec) {
+                math.quaternionToMat4(self._rootNode.quaternion, mat);
+                math.transformVec3(mat, localVec, worldVec);
+                math.normalizeVec3(worldVec);
+                return worldVec;
+            };
+        })();
+
+        var getTranslationPlane = (function () {
+            const planeNormal = math.vec3();
+            return function (worldAxis) {
+                const absX = Math.abs(worldAxis[0]);
+                if (absX > Math.abs(worldAxis[1]) && absX > Math.abs(worldAxis[2])) {
+                    math.cross3Vec3(worldAxis, [0, 1, 0], planeNormal);
+                } else {
+                    math.cross3Vec3(worldAxis, [1, 0, 0], planeNormal);
+                }
+                math.cross3Vec3(planeNormal, worldAxis, planeNormal);
+                math.normalizeVec3(planeNormal);
+                return planeNormal;
+            }
+        })();
+
+        const dragTranslateSectionPlane = (function () {
+            const p1 = math.vec3();
+            const p2 = math.vec3();
+            const worldAxis = math.vec4();
+            return function (baseAxis, fromMouse, toMouse) {
+                localToWorldVec(baseAxis, worldAxis);
+                const planeNormal = getTranslationPlane(worldAxis, fromMouse, toMouse);
+                getPointerPlaneIntersect(fromMouse, planeNormal, p1);
+                getPointerPlaneIntersect(toMouse, planeNormal, p2);
+                math.subVec3(p2, p1);
+                const dot = math.dotVec3(p2, worldAxis);
+                self._pos[0] += worldAxis[0] * dot;
+                self._pos[1] += worldAxis[1] * dot;
+                self._pos[2] += worldAxis[2] * dot;
+                self._rootNode.position = self._pos;
+                if (self._sectionPlane) {
+                    self._sectionPlane.pos = self._pos;
+                }
+            }
+        })();
+
+        var dragRotateSectionPlane = (function () {
+            const p1 = math.vec4();
+            const p2 = math.vec4();
+            const c = math.vec4();
+            const worldAxis = math.vec4();
+            return function (baseAxis, fromMouse, toMouse) {
+                localToWorldVec(baseAxis, worldAxis);
+                const hasData = getPointerPlaneIntersect(fromMouse, worldAxis, p1) && getPointerPlaneIntersect(toMouse, worldAxis, p2);
+                if (!hasData) { // Find intersections with view plane and project down to origin
+                    const planeNormal = getTranslationPlane(worldAxis, fromMouse, toMouse);
+                    getPointerPlaneIntersect(fromMouse, planeNormal, p1, 1); // Ensure plane moves closer to camera so angles become workable
+                    getPointerPlaneIntersect(toMouse, planeNormal, p2, 1);
+                    var dot = math.dotVec3(p1, worldAxis);
+                    p1[0] -= dot * worldAxis[0];
+                    p1[1] -= dot * worldAxis[1];
+                    p1[2] -= dot * worldAxis[2];
+                    dot = math.dotVec3(p2, worldAxis);
+                    p2[0] -= dot * worldAxis[0];
+                    p2[1] -= dot * worldAxis[1];
+                    p2[2] -= dot * worldAxis[2];
+                }
+                math.normalizeVec3(p1);
+                math.normalizeVec3(p2);
+                dot = math.dotVec3(p1, p2);
+                dot = math.clamp(dot, -1.0, 1.0); // Rounding errors cause dot to exceed allowed range
+                var incDegrees = Math.acos(dot) * math.RADTODEG;
+                math.cross3Vec3(p1, p2, c);
+                if (math.dotVec3(c, worldAxis) < 0.0) {
+                    incDegrees = -incDegrees;
+                }
+                self._rootNode.rotate(baseAxis, incDegrees);
+                rotateSectionPlane();
+            }
+        })();
+
+        var getPointerPlaneIntersect = (function () {
+            const dir = math.vec4([0, 0, 0, 1]);
+            const matrix = math.mat4();
+            return function (mouse, axis, dest, offset) {
+                offset = offset || 0;
+                dir[0] = mouse[0] / canvas.width * 2.0 - 1.0;
+                dir[1] = -(mouse[1] / canvas.height * 2.0 - 1.0);
+                dir[2] = 0.0;
+                dir[3] = 1.0;
+                math.mulMat4(camera.projMatrix, camera.viewMatrix, matrix); // Unproject norm device coords to view coords
+                math.inverseMat4(matrix);
+                math.transformVec4(matrix, dir, dir);
+                math.mulVec4Scalar(dir, 1.0 / dir[3]); // This is now point A on the ray in world space
+                var rayO = camera.eye; // The direction
+                math.subVec4(dir, rayO, dir);
+                const origin = self._sectionPlane.pos; // Plane origin:
+                var d = -math.dotVec3(origin, axis) - offset;
+                var dot = math.dotVec3(axis, dir);
+                if (Math.abs(dot) > 0.005) {
+                    var t = -(math.dotVec3(axis, rayO) + d) / dot;
+                    math.mulVec3Scalar(dir, t, dest);
+                    math.addVec3(dest, rayO);
+                    math.subVec3(dest, origin, dest);
+                    return true;
+                }
+                return false;
+            }
+        })();
+
+        const rotateSectionPlane = (function () {
+            const dir = math.vec3();
+            const mat = math.mat4();
+            return function () {
+                if (self.sectionPlane) {
+                    math.quaternionToMat4(rootNode.quaternion, mat);  // << ---
+                    math.transformVec3(mat, [0, 0, 1], dir);
+                    self._setSectionPlaneDir(dir);
+                }
+            };
+        })();
+
+        {
+            var mouseDownLeft;
+            var mouseDownMiddle;
+            var mouseDownRight;
+            var down = false;
+            var lastAffordanceMesh;
+
+            this._onCameraControlHover = this._viewer.cameraControl.on("hoverEnter", (hit) => {
+                if (!this._visible) {
+                    return;
+                }
+                if (down) {
+                    return;
+                }
+                grabbed = false;
+                if (lastAffordanceMesh) {
+                    lastAffordanceMesh.visible = false;
+                }
+                var affordanceMesh;
+                const meshId = hit.entity.id;
+                switch (meshId) {
+
+                    case this._displayMeshes.xAxisArrowHandle.id:
+                        affordanceMesh = this._affordanceMeshes.xAxisArrow;
+                        nextDragAction = DRAG_ACTIONS.xTranslate;
+                        break;
+
+                    case this._displayMeshes.xAxisHandle.id:
+                        affordanceMesh = this._affordanceMeshes.xAxisArrow;
+                        nextDragAction = DRAG_ACTIONS.xTranslate;
+                        break;
+
+                    case this._displayMeshes.yAxisArrowHandle.id:
+                        affordanceMesh = this._affordanceMeshes.yAxisArrow;
+                        nextDragAction = DRAG_ACTIONS.yTranslate;
+                        break;
+
+                    case this._displayMeshes.yShaftHandle.id:
+                        affordanceMesh = this._affordanceMeshes.yAxisArrow;
+                        nextDragAction = DRAG_ACTIONS.yTranslate;
+                        break;
+
+                    case this._displayMeshes.zAxisArrowHandle.id:
+                        affordanceMesh = this._affordanceMeshes.zAxisArrow;
+                        nextDragAction = DRAG_ACTIONS.zTranslate;
+                        break;
+
+                    case this._displayMeshes.zAxisHandle.id:
+                        affordanceMesh = this._affordanceMeshes.zAxisArrow;
+                        nextDragAction = DRAG_ACTIONS.zTranslate;
+                        break;
+
+                    case this._displayMeshes.xCurveHandle.id:
+                        affordanceMesh = this._affordanceMeshes.xHoop;
+                        nextDragAction = DRAG_ACTIONS.xRotate;
+                        break;
+
+                    case this._displayMeshes.yCurveHandle.id:
+                        affordanceMesh = this._affordanceMeshes.yHoop;
+                        nextDragAction = DRAG_ACTIONS.yRotate;
+                        break;
+
+                    case this._displayMeshes.zCurveHandle.id:
+                        affordanceMesh = this._affordanceMeshes.zHoop;
+                        nextDragAction = DRAG_ACTIONS.zRotate;
+                        break;
+
+                    default:
+                        nextDragAction = DRAG_ACTIONS.none;
+                        return; // Not clicked an arrow or hoop
+                }
+                if (affordanceMesh) {
+                    affordanceMesh.visible = true;
+                }
+                lastAffordanceMesh = affordanceMesh;
+                grabbed = true;
+            });
+
+            this._onCameraControlHoverLeave = this._viewer.cameraControl.on("hoverOutEntity", (hit) => {
+                if (!this._visible) {
+                    return;
+                }
+                if (lastAffordanceMesh) {
+                    lastAffordanceMesh.visible = false;
+                }
+                lastAffordanceMesh = null;
+                nextDragAction = DRAG_ACTIONS.none;
+            });
+
+            canvas.addEventListener("mousedown", this._canvasMouseDownListener = (e) => {
+                e.preventDefault();
+                if (!this._visible) {
+                    return;
+                }
+                if (!grabbed) {
+                    return;
+                }
+                this._viewer.cameraControl.pointerEnabled = false;
+                switch (e.which) {
+                    case 1: // Left button
+                        mouseDownLeft = true;
+                        down = true;
+                        var canvasPos = getClickCoordsWithinElement(e);
+                        dragAction = nextDragAction;
+                        lastCanvasPos[0] = canvasPos[0];
+                        lastCanvasPos[1] = canvasPos[1];
+                        break;
+
+                    default:
+                        break;
+                }
+            });
+
+            canvas.addEventListener("mousemove", this._canvasMouseMoveListener = (e) => {
+                if (!this._visible) {
+                    return;
+                }
+                if (!down) {
+                    return;
+                }
+                var canvasPos = getClickCoordsWithinElement(e);
+                const x = canvasPos[0];
+                const y = canvasPos[1];
+
+                switch (dragAction) {
+                    case DRAG_ACTIONS.xTranslate:
+                        dragTranslateSectionPlane(xBaseAxis, lastCanvasPos, canvasPos);
+                        break;
+                    case DRAG_ACTIONS.yTranslate:
+                        dragTranslateSectionPlane(yBaseAxis, lastCanvasPos, canvasPos);
+                        break;
+                    case DRAG_ACTIONS.zTranslate:
+                        dragTranslateSectionPlane(zBaseAxis, lastCanvasPos, canvasPos);
+                        break;
+                    case DRAG_ACTIONS.xRotate:
+                        dragRotateSectionPlane(xBaseAxis, lastCanvasPos, canvasPos);
+                        break;
+                    case DRAG_ACTIONS.yRotate:
+                        dragRotateSectionPlane(yBaseAxis, lastCanvasPos, canvasPos);
+                        break;
+                    case DRAG_ACTIONS.zRotate:
+                        dragRotateSectionPlane(zBaseAxis, lastCanvasPos, canvasPos);
+                        break;
+                }
+
+                lastCanvasPos[0] = x;
+                lastCanvasPos[1] = y;
+            });
+
+            canvas.addEventListener("mouseup", this._canvasMouseUpListener = (e) => {
+                if (!this._visible) {
+                    return;
+                }
+                this._viewer.cameraControl.pointerEnabled = true;
+                if (!down) {
+                    return;
+                }
+                switch (e.which) {
+                    case 1: // Left button
+                        mouseDownLeft = false;
+                        break;
+                    case 2: // Middle/both buttons
+                        mouseDownMiddle = false;
+                        break;
+                    case 3: // Right button
+                        mouseDownRight = false;
+                        break;
+                    default:
+                        break;
+                }
+                down = false;
+                grabbed = false;
+            });
+
+            canvas.addEventListener("wheel", this._canvasWheelListener = (e) => {
+                if (!this._visible) {
+                    return;
+                }
+                var delta = Math.max(-1, Math.min(1, -e.deltaY * 40));
+                if (delta === 0) {
+                    return;
+                }
+            });
+        }
+    }
+
+    _destroy() {
+        this._unbindEvents();
+        this._destroyNodes();
+    }
+
+    _unbindEvents() {
+
+        const viewer = this._viewer;
+        const scene = viewer.scene;
+        const canvas = scene.canvas.canvas;
+        const camera = viewer.camera;
+        const cameraControl = viewer.cameraControl;
+
+        scene.off(this._onSceneTick);
+
+        canvas.removeEventListener("mousedown", this._canvasMouseDownListener);
+        canvas.removeEventListener("mousemove", this._canvasMouseMoveListener);
+        canvas.removeEventListener("mouseup", this._canvasMouseUpListener);
+        canvas.removeEventListener("wheel", this._canvasWheelListener);
+
+        camera.off(this._onCameraViewMatrix);
+        camera.off(this._onCameraProjMatrix);
+
+        cameraControl.off(this._onCameraControlHover);
+        cameraControl.off(this._onCameraControlHoverLeave);
+    }
+
+    _destroyNodes() {
+        this._setSectionPlane(null);
+        this._rootNode.destroy();
+        this._displayMeshes = {};
+        this._affordanceMeshes = {};
+    }
+}
+
+export {Control};