@onerjs/gui 8.23.1

package/3D/controls/slider3D.js

@@ -0,0 +1,256 @@
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { Control3D } from "./control3D.js";
+import { CreateBox } from "@babylonjs/core/Meshes/Builders/boxBuilder.js";
+import { PointerDragBehavior } from "@babylonjs/core/Behaviors/Meshes/pointerDragBehavior.js";
+import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader.js";
+import { MRDLSliderBarMaterial } from "../materials/mrdl/mrdlSliderBarMaterial.js";
+import { MRDLSliderThumbMaterial } from "../materials/mrdl/mrdlSliderThumbMaterial.js";
+import { MRDLBackplateMaterial } from "../materials/mrdl/mrdlBackplateMaterial.js";
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+const SLIDER_MIN = 0;
+const SLIDER_MAX = 100;
+const SLIDER_VAL = 50;
+const SLIDER_STEP = 0;
+const SLIDER_SCALING = 1.0;
+const SLIDER_MARGIN = 0.2;
+/**
+ * Class used to create a slider in 3D
+ */
+export class Slider3D extends Control3D {
+    /**
+     * Creates a new slider
+     * @param name defines the control name
+     * @param sliderBackplateVisible defines if the control has a backplate, default is false
+     */
+    constructor(name, sliderBackplateVisible) {
+        super(name);
+        /** Observable raised when the sldier value changes */
+        this.onValueChangedObservable = new Observable();
+        this._sliderBackplateVisible = sliderBackplateVisible || false;
+        this._minimum = SLIDER_MIN;
+        this._maximum = SLIDER_MAX;
+        this._step = SLIDER_STEP;
+        this._value = SLIDER_VAL;
+    }
+    /**
+     * Gets the mesh used to render this control
+     */
+    get mesh() {
+        if (this.node) {
+            return this._sliderThumb;
+        }
+        return null;
+    }
+    /** Gets or sets minimum value */
+    get minimum() {
+        return this._minimum;
+    }
+    set minimum(value) {
+        if (this._minimum === value) {
+            return;
+        }
+        this._minimum = Math.max(value, SLIDER_MIN);
+        this._value = Math.max(Math.min(this._value, this._maximum), this._minimum);
+    }
+    /** Gets or sets maximum value */
+    get maximum() {
+        return this._maximum;
+    }
+    set maximum(value) {
+        if (this._maximum === value) {
+            return;
+        }
+        this._maximum = Math.max(value, this._minimum);
+        this._value = Math.max(Math.min(this._value, this._maximum), this._minimum);
+    }
+    /** Gets or sets step value */
+    get step() {
+        return this._step;
+    }
+    set step(value) {
+        if (this._step === value) {
+            return;
+        }
+        this._step = Math.max(Math.min(value, this._maximum - this._minimum), SLIDER_STEP);
+    }
+    /** Gets or sets current value */
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        if (this._value === value) {
+            return;
+        }
+        this._value = Math.max(Math.min(value, this._maximum), this._minimum);
+        if (this._sliderThumb) {
+            this._sliderThumb.position.x = this._convertToPosition(this.value);
+        }
+        this.onValueChangedObservable.notifyObservers(this._value);
+    }
+    get start() {
+        if (!this.node) {
+            return -SLIDER_SCALING / 2;
+        }
+        return this._sliderBar.position.x - this._sliderBar.scaling.x / 2;
+    }
+    get end() {
+        if (!this.node) {
+            return SLIDER_SCALING / 2;
+        }
+        return this._sliderBar.position.x + this._sliderBar.scaling.x / 2;
+    }
+    /**
+     * Gets the slider bar material used by this control
+     */
+    get sliderBarMaterial() {
+        return this._sliderBarMaterial;
+    }
+    /**
+     * Gets the slider thumb material used by this control
+     */
+    get sliderThumbMaterial() {
+        return this._sliderThumbMaterial;
+    }
+    /**
+     * Gets the slider backplate material used by this control
+     */
+    get sliderBackplateMaterial() {
+        return this._sliderBackplateMaterial;
+    }
+    /**
+     * Gets the slider bar mesh used by this control
+     */
+    get sliderBar() {
+        return this._sliderBar;
+    }
+    /**
+     * Gets the slider thumb mesh used by this control
+     */
+    get sliderThumb() {
+        return this._sliderThumb;
+    }
+    /**
+     * Gets the slider backplate mesh used by this control
+     */
+    get sliderBackplate() {
+        return this._sliderBackplate;
+    }
+    /** Sets a boolean indicating if the control is visible */
+    set isVisible(value) {
+        if (this._isVisible === value) {
+            return;
+        }
+        this._isVisible = value;
+        this.node?.setEnabled(value);
+    }
+    // Mesh association
+    _createNode(scene) {
+        const sliderBackplate = CreateBox(`${this.name}_sliderbackplate`, {
+            width: 1.0,
+            height: 1.0,
+            depth: 1.0,
+        }, scene);
+        sliderBackplate.isPickable = false;
+        sliderBackplate.visibility = 0;
+        sliderBackplate.scaling = new Vector3(1, 0.5, 0.8);
+        const baseUrl = Tools.GetAssetUrl(Slider3D.MODEL_BASE_URL);
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises, github/no-then
+        SceneLoader.ImportMeshAsync(undefined, baseUrl, Slider3D.MODEL_FILENAME, scene).then((result) => {
+            // make all meshes not pickable. Required meshes' pickable state will be set later.
+            for (const m of result.meshes) {
+                m.isPickable = false;
+            }
+            const sliderBackplateModel = result.meshes[1];
+            const sliderBarModel = result.meshes[1].clone(`${this.name}_sliderbar`, sliderBackplate);
+            const sliderThumbModel = result.meshes[1].clone(`${this.name}_sliderthumb`, sliderBackplate);
+            sliderBackplateModel.visibility = 0;
+            if (this._sliderBackplateVisible) {
+                sliderBackplateModel.visibility = 1;
+                sliderBackplateModel.name = `${this.name}_sliderbackplate`;
+                sliderBackplateModel.scaling.x = 1;
+                sliderBackplateModel.scaling.z = 0.2;
+                sliderBackplateModel.parent = sliderBackplate;
+                if (this._sliderBackplateMaterial) {
+                    sliderBackplateModel.material = this._sliderBackplateMaterial;
+                }
+                this._sliderBackplate = sliderBackplateModel;
+            }
+            if (sliderBarModel) {
+                sliderBarModel.parent = sliderBackplate;
+                sliderBarModel.position.z = -0.1;
+                sliderBarModel.scaling = new Vector3(SLIDER_SCALING - SLIDER_MARGIN, 0.04, 0.3);
+                if (this._sliderBarMaterial) {
+                    sliderBarModel.material = this._sliderBarMaterial;
+                }
+                this._sliderBar = sliderBarModel;
+            }
+            if (sliderThumbModel) {
+                sliderThumbModel.parent = sliderBackplate;
+                sliderThumbModel.isPickable = true;
+                sliderThumbModel.position.z = -0.115;
+                sliderThumbModel.scaling = new Vector3(0.025, 0.3, 0.6);
+                sliderThumbModel.position.x = this._convertToPosition(this.value);
+                sliderThumbModel.addBehavior(this._createBehavior());
+                if (this._sliderThumbMaterial) {
+                    sliderThumbModel.material = this._sliderThumbMaterial;
+                }
+                this._sliderThumb = sliderThumbModel;
+            }
+            this._injectGUI3DReservedDataStore(sliderBackplate).control = this;
+            const meshes = sliderBackplate.getChildMeshes();
+            for (const mesh of meshes) {
+                this._injectGUI3DReservedDataStore(mesh).control = this;
+            }
+        });
+        this._affectMaterial(sliderBackplate);
+        return sliderBackplate;
+    }
+    _affectMaterial(mesh) {
+        this._sliderBackplateMaterial = this._sliderBackplateMaterial ?? new MRDLBackplateMaterial(`${this.name}_sliderbackplate_material`, mesh.getScene());
+        this._sliderBarMaterial = this._sliderBarMaterial ?? new MRDLSliderBarMaterial(`${this.name}_sliderbar_material`, mesh.getScene());
+        this._sliderThumbMaterial = this._sliderThumbMaterial ?? new MRDLSliderThumbMaterial(`${this.name}_sliderthumb_material`, mesh.getScene());
+    }
+    _createBehavior() {
+        const pointerDragBehavior = new PointerDragBehavior({ dragAxis: Vector3.Right() });
+        pointerDragBehavior.moveAttached = false;
+        pointerDragBehavior.onDragStartObservable.add(() => {
+            this._draggedPosition = this._sliderThumb.position.x;
+        });
+        pointerDragBehavior.onDragObservable.add((event) => {
+            this._draggedPosition += event.dragDistance / this.scaling.x;
+            this.value = this._convertToValue(this._draggedPosition);
+        });
+        return pointerDragBehavior;
+    }
+    _convertToPosition(value) {
+        const position = ((value - this.minimum) / (this.maximum - this.minimum)) * (this.end - this.start) + this.start;
+        return Math.min(Math.max(position, this.start), this.end);
+    }
+    _convertToValue(position) {
+        let value = ((position - this.start) / (this.end - this.start)) * (this.maximum - this.minimum);
+        value = this.step ? Math.round(value / this.step) * this.step : value;
+        return Math.max(Math.min(this.minimum + value, this._maximum), this._minimum);
+    }
+    /**
+     * Releases all associated resources
+     */
+    dispose() {
+        super.dispose();
+        this._sliderBar?.dispose();
+        this._sliderThumb?.dispose();
+        this._sliderBarMaterial?.dispose();
+        this._sliderThumbMaterial?.dispose();
+        this._sliderBackplate?.dispose();
+        this._sliderBackplateMaterial?.dispose();
+    }
+}
+/**
+ * Base Url for the models.
+ */
+Slider3D.MODEL_BASE_URL = "https://assets.babylonjs.com/core/MRTK/";
+/**
+ * File name for the 8x4 model.
+ */
+Slider3D.MODEL_FILENAME = "mrtk-fluent-backplate.glb";
+//# sourceMappingURL=slider3D.js.map

package/3D/controls/slider3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider3D.js","sourceRoot":"","sources":["../../../../../dev/gui/src/3D/controls/slider3D.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\r\nimport type { Nullable } from \"core/types\";\r\nimport { Observable } from \"core/Misc/observable\";\r\nimport { Vector3 } from \"core/Maths/math.vector\";\r\nimport type { TransformNode } from \"core/Meshes/transformNode\";\r\nimport type { Scene } from \"core/scene\";\r\nimport { Control3D } from \"./control3D\";\r\nimport { CreateBox } from \"core/Meshes/Builders/boxBuilder\";\r\nimport { PointerDragBehavior } from \"core/Behaviors/Meshes/pointerDragBehavior\";\r\nimport type { AbstractMesh } from \"core/Meshes/abstractMesh\";\r\nimport { SceneLoader } from \"core/Loading/sceneLoader\";\r\nimport { MRDLSliderBarMaterial } from \"../materials/mrdl/mrdlSliderBarMaterial\";\r\nimport { MRDLSliderThumbMaterial } from \"../materials/mrdl/mrdlSliderThumbMaterial\";\r\nimport { MRDLBackplateMaterial } from \"../materials/mrdl/mrdlBackplateMaterial\";\r\nimport { Tools } from \"core/Misc/tools\";\r\n\r\nconst SLIDER_MIN: number = 0;\r\nconst SLIDER_MAX: number = 100;\r\nconst SLIDER_VAL: number = 50;\r\nconst SLIDER_STEP: number = 0;\r\nconst SLIDER_SCALING: number = 1.0;\r\nconst SLIDER_MARGIN: number = 0.2;\r\n\r\n/**\r\n * Class used to create a slider in 3D\r\n */\r\nexport class Slider3D extends Control3D {\r\n    /**\r\n     * Base Url for the models.\r\n     */\r\n    public static MODEL_BASE_URL: string = \"https://assets.babylonjs.com/core/MRTK/\";\r\n\r\n    /**\r\n     * File name for the 8x4 model.\r\n     */\r\n    public static MODEL_FILENAME: string = \"mrtk-fluent-backplate.glb\";\r\n\r\n    private _sliderBackplate: AbstractMesh;\r\n    private _sliderBackplateMaterial: MRDLBackplateMaterial;\r\n    private _sliderBarMaterial: MRDLSliderBarMaterial;\r\n    private _sliderThumbMaterial: MRDLSliderThumbMaterial;\r\n    private _sliderThumb: AbstractMesh;\r\n    private _sliderBar: AbstractMesh;\r\n    private _sliderBackplateVisible: boolean;\r\n\r\n    private _minimum: number;\r\n    private _maximum: number;\r\n    private _value: number;\r\n    private _step: number;\r\n\r\n    private _draggedPosition: number;\r\n\r\n    /** Observable raised when the sldier value changes */\r\n    public onValueChangedObservable = new Observable<number>();\r\n\r\n    /**\r\n     * Creates a new slider\r\n     * @param name defines the control name\r\n     * @param sliderBackplateVisible defines if the control has a backplate, default is false\r\n     */\r\n    constructor(name?: string, sliderBackplateVisible?: boolean) {\r\n        super(name);\r\n        this._sliderBackplateVisible = sliderBackplateVisible || false;\r\n\r\n        this._minimum = SLIDER_MIN;\r\n        this._maximum = SLIDER_MAX;\r\n        this._step = SLIDER_STEP;\r\n        this._value = SLIDER_VAL;\r\n    }\r\n\r\n    /**\r\n     * Gets the mesh used to render this control\r\n     */\r\n    public override get mesh(): Nullable<AbstractMesh> {\r\n        if (this.node) {\r\n            return this._sliderThumb;\r\n        }\r\n\r\n        return null;\r\n    }\r\n\r\n    /** Gets or sets minimum value */\r\n    public get minimum(): number {\r\n        return this._minimum;\r\n    }\r\n\r\n    public set minimum(value: number) {\r\n        if (this._minimum === value) {\r\n            return;\r\n        }\r\n\r\n        this._minimum = Math.max(value, SLIDER_MIN);\r\n        this._value = Math.max(Math.min(this._value, this._maximum), this._minimum);\r\n    }\r\n\r\n    /** Gets or sets maximum value */\r\n    public get maximum(): number {\r\n        return this._maximum;\r\n    }\r\n\r\n    public set maximum(value: number) {\r\n        if (this._maximum === value) {\r\n            return;\r\n        }\r\n\r\n        this._maximum = Math.max(value, this._minimum);\r\n        this._value = Math.max(Math.min(this._value, this._maximum), this._minimum);\r\n    }\r\n\r\n    /** Gets or sets step value */\r\n    public get step(): number {\r\n        return this._step;\r\n    }\r\n\r\n    public set step(value: number) {\r\n        if (this._step === value) {\r\n            return;\r\n        }\r\n\r\n        this._step = Math.max(Math.min(value, this._maximum - this._minimum), SLIDER_STEP);\r\n    }\r\n\r\n    /** Gets or sets current value */\r\n    public get value(): number {\r\n        return this._value;\r\n    }\r\n\r\n    public set value(value: number) {\r\n        if (this._value === value) {\r\n            return;\r\n        }\r\n\r\n        this._value = Math.max(Math.min(value, this._maximum), this._minimum);\r\n        if (this._sliderThumb) {\r\n            this._sliderThumb.position.x = this._convertToPosition(this.value);\r\n        }\r\n        this.onValueChangedObservable.notifyObservers(this._value);\r\n    }\r\n\r\n    protected get start(): number {\r\n        if (!this.node) {\r\n            return -SLIDER_SCALING / 2;\r\n        }\r\n\r\n        return this._sliderBar.position.x - this._sliderBar.scaling.x / 2;\r\n    }\r\n\r\n    protected get end(): number {\r\n        if (!this.node) {\r\n            return SLIDER_SCALING / 2;\r\n        }\r\n\r\n        return this._sliderBar.position.x + this._sliderBar.scaling.x / 2;\r\n    }\r\n\r\n    /**\r\n     * Gets the slider bar material used by this control\r\n     */\r\n    public get sliderBarMaterial(): MRDLSliderBarMaterial {\r\n        return this._sliderBarMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets the slider thumb material used by this control\r\n     */\r\n    public get sliderThumbMaterial(): MRDLSliderThumbMaterial {\r\n        return this._sliderThumbMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets the slider backplate material used by this control\r\n     */\r\n    public get sliderBackplateMaterial(): MRDLBackplateMaterial {\r\n        return this._sliderBackplateMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets the slider bar mesh used by this control\r\n     */\r\n    public get sliderBar(): AbstractMesh {\r\n        return this._sliderBar;\r\n    }\r\n\r\n    /**\r\n     * Gets the slider thumb mesh used by this control\r\n     */\r\n    public get sliderThumb(): AbstractMesh {\r\n        return this._sliderThumb;\r\n    }\r\n\r\n    /**\r\n     * Gets the slider backplate mesh used by this control\r\n     */\r\n    public get sliderBackplate(): AbstractMesh {\r\n        return this._sliderBackplate;\r\n    }\r\n\r\n    /** Sets a boolean indicating if the control is visible */\r\n    public override set isVisible(value: boolean) {\r\n        if (this._isVisible === value) {\r\n            return;\r\n        }\r\n\r\n        this._isVisible = value;\r\n\r\n        this.node?.setEnabled(value);\r\n    }\r\n\r\n    // Mesh association\r\n    protected override _createNode(scene: Scene): TransformNode {\r\n        const sliderBackplate = CreateBox(\r\n            `${this.name}_sliderbackplate`,\r\n            {\r\n                width: 1.0,\r\n                height: 1.0,\r\n                depth: 1.0,\r\n            },\r\n            scene\r\n        );\r\n        sliderBackplate.isPickable = false;\r\n        sliderBackplate.visibility = 0;\r\n        sliderBackplate.scaling = new Vector3(1, 0.5, 0.8);\r\n        const baseUrl = Tools.GetAssetUrl(Slider3D.MODEL_BASE_URL);\r\n        // eslint-disable-next-line @typescript-eslint/no-floating-promises, github/no-then\r\n        SceneLoader.ImportMeshAsync(undefined, baseUrl, Slider3D.MODEL_FILENAME, scene).then((result) => {\r\n            // make all meshes not pickable. Required meshes' pickable state will be set later.\r\n            for (const m of result.meshes) {\r\n                m.isPickable = false;\r\n            }\r\n            const sliderBackplateModel = result.meshes[1];\r\n            const sliderBarModel = result.meshes[1].clone(`${this.name}_sliderbar`, sliderBackplate);\r\n            const sliderThumbModel = result.meshes[1].clone(`${this.name}_sliderthumb`, sliderBackplate);\r\n            sliderBackplateModel.visibility = 0;\r\n\r\n            if (this._sliderBackplateVisible) {\r\n                sliderBackplateModel.visibility = 1;\r\n                sliderBackplateModel.name = `${this.name}_sliderbackplate`;\r\n                sliderBackplateModel.scaling.x = 1;\r\n                sliderBackplateModel.scaling.z = 0.2;\r\n                sliderBackplateModel.parent = sliderBackplate;\r\n                if (this._sliderBackplateMaterial) {\r\n                    sliderBackplateModel.material = this._sliderBackplateMaterial;\r\n                }\r\n                this._sliderBackplate = sliderBackplateModel;\r\n            }\r\n\r\n            if (sliderBarModel) {\r\n                sliderBarModel.parent = sliderBackplate;\r\n                sliderBarModel.position.z = -0.1;\r\n                sliderBarModel.scaling = new Vector3(SLIDER_SCALING - SLIDER_MARGIN, 0.04, 0.3);\r\n                if (this._sliderBarMaterial) {\r\n                    sliderBarModel.material = this._sliderBarMaterial;\r\n                }\r\n                this._sliderBar = sliderBarModel;\r\n            }\r\n\r\n            if (sliderThumbModel) {\r\n                sliderThumbModel.parent = sliderBackplate;\r\n                sliderThumbModel.isPickable = true;\r\n                sliderThumbModel.position.z = -0.115;\r\n                sliderThumbModel.scaling = new Vector3(0.025, 0.3, 0.6);\r\n                sliderThumbModel.position.x = this._convertToPosition(this.value);\r\n                sliderThumbModel.addBehavior(this._createBehavior());\r\n                if (this._sliderThumbMaterial) {\r\n                    sliderThumbModel.material = this._sliderThumbMaterial;\r\n                }\r\n                this._sliderThumb = sliderThumbModel;\r\n            }\r\n\r\n            this._injectGUI3DReservedDataStore(sliderBackplate).control = this;\r\n            const meshes = sliderBackplate.getChildMeshes();\r\n            for (const mesh of meshes) {\r\n                this._injectGUI3DReservedDataStore(mesh).control = this;\r\n            }\r\n        });\r\n\r\n        this._affectMaterial(sliderBackplate);\r\n        return sliderBackplate;\r\n    }\r\n\r\n    protected override _affectMaterial(mesh: AbstractMesh) {\r\n        this._sliderBackplateMaterial = this._sliderBackplateMaterial ?? new MRDLBackplateMaterial(`${this.name}_sliderbackplate_material`, mesh.getScene());\r\n        this._sliderBarMaterial = this._sliderBarMaterial ?? new MRDLSliderBarMaterial(`${this.name}_sliderbar_material`, mesh.getScene());\r\n        this._sliderThumbMaterial = this._sliderThumbMaterial ?? new MRDLSliderThumbMaterial(`${this.name}_sliderthumb_material`, mesh.getScene());\r\n    }\r\n\r\n    private _createBehavior(): PointerDragBehavior {\r\n        const pointerDragBehavior = new PointerDragBehavior({ dragAxis: Vector3.Right() });\r\n        pointerDragBehavior.moveAttached = false;\r\n\r\n        pointerDragBehavior.onDragStartObservable.add(() => {\r\n            this._draggedPosition = this._sliderThumb.position.x;\r\n        });\r\n\r\n        pointerDragBehavior.onDragObservable.add((event) => {\r\n            this._draggedPosition += event.dragDistance / this.scaling.x;\r\n            this.value = this._convertToValue(this._draggedPosition);\r\n        });\r\n\r\n        return pointerDragBehavior;\r\n    }\r\n\r\n    private _convertToPosition(value: number): number {\r\n        const position = ((value - this.minimum) / (this.maximum - this.minimum)) * (this.end - this.start) + this.start;\r\n        return Math.min(Math.max(position, this.start), this.end);\r\n    }\r\n\r\n    private _convertToValue(position: number): number {\r\n        let value = ((position - this.start) / (this.end - this.start)) * (this.maximum - this.minimum);\r\n        value = this.step ? Math.round(value / this.step) * this.step : value;\r\n\r\n        return Math.max(Math.min(this.minimum + value, this._maximum), this._minimum);\r\n    }\r\n\r\n    /**\r\n     * Releases all associated resources\r\n     */\r\n    public override dispose() {\r\n        super.dispose();\r\n        this._sliderBar?.dispose();\r\n        this._sliderThumb?.dispose();\r\n        this._sliderBarMaterial?.dispose();\r\n        this._sliderThumbMaterial?.dispose();\r\n        this._sliderBackplate?.dispose();\r\n        this._sliderBackplateMaterial?.dispose();\r\n    }\r\n}\r\n"]}

package/3D/controls/spherePanel.d.ts

@@ -0,0 +1,17 @@
+import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import type { float } from "@babylonjs/core/types.js";
+import { VolumeBasedPanel } from "./volumeBasedPanel.js";
+import type { Control3D } from "./control3D.js";
+/**
+ * Class used to create a container panel deployed on the surface of a sphere
+ */
+export declare class SpherePanel extends VolumeBasedPanel {
+    private _radius;
+    /**
+     * Gets or sets the radius of the sphere where to project controls (5 by default)
+     */
+    get radius(): float;
+    set radius(value: float);
+    protected _mapGridNode(control: Control3D, nodePosition: Vector3): void;
+    private _sphericalMapping;
+}

package/3D/controls/spherePanel.js

@@ -0,0 +1,58 @@
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+import { Matrix, TmpVectors, Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { VolumeBasedPanel } from "./volumeBasedPanel.js";
+import { Container3D } from "./container3D.js";
+import { Axis } from "@babylonjs/core/Maths/math.axis.js";
+/**
+ * Class used to create a container panel deployed on the surface of a sphere
+ */
+export class SpherePanel extends VolumeBasedPanel {
+    constructor() {
+        super(...arguments);
+        this._radius = 5.0;
+    }
+    /**
+     * Gets or sets the radius of the sphere where to project controls (5 by default)
+     */
+    get radius() {
+        return this._radius;
+    }
+    set radius(value) {
+        if (this._radius === value) {
+            return;
+        }
+        this._radius = value;
+        Tools.SetImmediate(() => {
+            this._arrangeChildren();
+        });
+    }
+    _mapGridNode(control, nodePosition) {
+        const mesh = control.mesh;
+        if (!mesh) {
+            return;
+        }
+        const newPos = this._sphericalMapping(nodePosition);
+        control.position = newPos;
+        switch (this.orientation) {
+            case Container3D.FACEORIGIN_ORIENTATION:
+                mesh.lookAt(new Vector3(2 * newPos.x, 2 * newPos.y, 2 * newPos.z));
+                break;
+            case Container3D.FACEORIGINREVERSED_ORIENTATION:
+                mesh.lookAt(new Vector3(-newPos.x, -newPos.y, -newPos.z));
+                break;
+            case Container3D.FACEFORWARD_ORIENTATION:
+                break;
+            case Container3D.FACEFORWARDREVERSED_ORIENTATION:
+                mesh.rotate(Axis.Y, Math.PI, 0 /* Space.LOCAL */);
+                break;
+        }
+    }
+    _sphericalMapping(source) {
+        const newPos = new Vector3(0, 0, this._radius);
+        const xAngle = source.y / this._radius;
+        const yAngle = -(source.x / this._radius);
+        Matrix.RotationYawPitchRollToRef(yAngle, xAngle, 0, TmpVectors.Matrix[0]);
+        return Vector3.TransformNormal(newPos, TmpVectors.Matrix[0]);
+    }
+}
+//# sourceMappingURL=spherePanel.js.map

package/3D/controls/spherePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spherePanel.js","sourceRoot":"","sources":["../../../../../dev/gui/src/3D/controls/spherePanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,sCAAwB;AACxC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,6CAA+B;AAGrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAS,2CAA6B;AAEnD;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,gBAAgB;IAAjD;;QACY,YAAO,GAAG,GAAG,CAAC;IAwD1B,CAAC;IAtDG;;OAEG;IACH,IAAW,MAAM;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IAED,IAAW,MAAM,CAAC,KAAY;QAC1B,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;YACzB,OAAO;QACX,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QAErB,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE;YACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC5B,CAAC,CAAC,CAAC;IACP,CAAC;IAES,YAAY,CAAC,OAAkB,EAAE,YAAqB;QAC5D,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QAE1B,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,OAAO;QACX,CAAC;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC;QACpD,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC;QAE1B,QAAQ,IAAI,CAAC,WAAW,EAAE,CAAC;YACvB,KAAK,WAAW,CAAC,sBAAsB;gBACnC,IAAI,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;gBACnE,MAAM;YACV,KAAK,WAAW,CAAC,8BAA8B;gBAC3C,IAAI,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC1D,MAAM;YACV,KAAK,WAAW,CAAC,uBAAuB;gBACpC,MAAM;YACV,KAAK,WAAW,CAAC,+BAA+B;gBAC5C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,sBAAc,CAAC;gBAC1C,MAAM;QACd,CAAC;IACL,CAAC;IAEO,iBAAiB,CAAC,MAAe;QACrC,MAAM,MAAM,GAAG,IAAI,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAE/C,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;QACvC,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAE1C,MAAM,CAAC,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAE1E,OAAO,OAAO,CAAC,eAAe,CAAC,MAAM,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACjE,CAAC;CACJ","sourcesContent":["import { Tools } from \"core/Misc/tools\";\r\nimport { Matrix, TmpVectors, Vector3 } from \"core/Maths/math.vector\";\r\nimport type { float } from \"core/types\";\r\n\r\nimport { VolumeBasedPanel } from \"./volumeBasedPanel\";\r\nimport type { Control3D } from \"./control3D\";\r\nimport { Container3D } from \"./container3D\";\r\nimport { Axis, Space } from \"core/Maths/math.axis\";\r\n\r\n/**\r\n * Class used to create a container panel deployed on the surface of a sphere\r\n */\r\nexport class SpherePanel extends VolumeBasedPanel {\r\n    private _radius = 5.0;\r\n\r\n    /**\r\n     * Gets or sets the radius of the sphere where to project controls (5 by default)\r\n     */\r\n    public get radius(): float {\r\n        return this._radius;\r\n    }\r\n\r\n    public set radius(value: float) {\r\n        if (this._radius === value) {\r\n            return;\r\n        }\r\n\r\n        this._radius = value;\r\n\r\n        Tools.SetImmediate(() => {\r\n            this._arrangeChildren();\r\n        });\r\n    }\r\n\r\n    protected _mapGridNode(control: Control3D, nodePosition: Vector3) {\r\n        const mesh = control.mesh;\r\n\r\n        if (!mesh) {\r\n            return;\r\n        }\r\n\r\n        const newPos = this._sphericalMapping(nodePosition);\r\n        control.position = newPos;\r\n\r\n        switch (this.orientation) {\r\n            case Container3D.FACEORIGIN_ORIENTATION:\r\n                mesh.lookAt(new Vector3(2 * newPos.x, 2 * newPos.y, 2 * newPos.z));\r\n                break;\r\n            case Container3D.FACEORIGINREVERSED_ORIENTATION:\r\n                mesh.lookAt(new Vector3(-newPos.x, -newPos.y, -newPos.z));\r\n                break;\r\n            case Container3D.FACEFORWARD_ORIENTATION:\r\n                break;\r\n            case Container3D.FACEFORWARDREVERSED_ORIENTATION:\r\n                mesh.rotate(Axis.Y, Math.PI, Space.LOCAL);\r\n                break;\r\n        }\r\n    }\r\n\r\n    private _sphericalMapping(source: Vector3) {\r\n        const newPos = new Vector3(0, 0, this._radius);\r\n\r\n        const xAngle = source.y / this._radius;\r\n        const yAngle = -(source.x / this._radius);\r\n\r\n        Matrix.RotationYawPitchRollToRef(yAngle, xAngle, 0, TmpVectors.Matrix[0]);\r\n\r\n        return Vector3.TransformNormal(newPos, TmpVectors.Matrix[0]);\r\n    }\r\n}\r\n"]}

package/3D/controls/stackPanel3D.d.ts

@@ -0,0 +1,22 @@
+import { Container3D } from "./container3D.js";
+/**
+ * Class used to create a stack panel in 3D on XY plane
+ */
+export declare class StackPanel3D extends Container3D {
+    private _isVertical;
+    /**
+     * Gets or sets a boolean indicating if the stack panel is vertical or horizontal (horizontal by default)
+     */
+    get isVertical(): boolean;
+    set isVertical(value: boolean);
+    /**
+     * Gets or sets the distance between elements
+     */
+    margin: number;
+    /**
+     * Creates new StackPanel
+     * @param isVertical
+     */
+    constructor(isVertical?: boolean);
+    protected _arrangeChildren(): void;
+}

package/3D/controls/stackPanel3D.js

@@ -0,0 +1,95 @@
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+import { Matrix, TmpVectors, Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { Container3D } from "./container3D.js";
+/**
+ * Class used to create a stack panel in 3D on XY plane
+ */
+export class StackPanel3D extends Container3D {
+    /**
+     * Gets or sets a boolean indicating if the stack panel is vertical or horizontal (horizontal by default)
+     */
+    get isVertical() {
+        return this._isVertical;
+    }
+    set isVertical(value) {
+        if (this._isVertical === value) {
+            return;
+        }
+        this._isVertical = value;
+        Tools.SetImmediate(() => {
+            this._arrangeChildren();
+        });
+    }
+    /**
+     * Creates new StackPanel
+     * @param isVertical
+     */
+    constructor(isVertical = false) {
+        super();
+        this._isVertical = false;
+        /**
+         * Gets or sets the distance between elements
+         */
+        this.margin = 0.1;
+        this._isVertical = isVertical;
+    }
+    _arrangeChildren() {
+        let width = 0;
+        let height = 0;
+        let controlCount = 0;
+        const extendSizes = [];
+        const currentInverseWorld = Matrix.Invert(this.node.computeWorldMatrix(true));
+        // Measure
+        for (const child of this._children) {
+            if (!child.mesh) {
+                continue;
+            }
+            controlCount++;
+            child.mesh.computeWorldMatrix(true);
+            child.mesh.getWorldMatrix().multiplyToRef(currentInverseWorld, TmpVectors.Matrix[0]);
+            const boundingBox = child.mesh.getBoundingInfo().boundingBox;
+            const extendSize = Vector3.TransformNormal(boundingBox.extendSize, TmpVectors.Matrix[0]);
+            extendSizes.push(extendSize);
+            if (this._isVertical) {
+                height += extendSize.y;
+            }
+            else {
+                width += extendSize.x;
+            }
+        }
+        if (this._isVertical) {
+            height += ((controlCount - 1) * this.margin) / 2;
+        }
+        else {
+            width += ((controlCount - 1) * this.margin) / 2;
+        }
+        // Arrange
+        let offset;
+        if (this._isVertical) {
+            offset = -height;
+        }
+        else {
+            offset = -width;
+        }
+        let index = 0;
+        for (const child of this._children) {
+            if (!child.mesh) {
+                continue;
+            }
+            controlCount--;
+            const extendSize = extendSizes[index++];
+            if (this._isVertical) {
+                child.position.y = offset + extendSize.y;
+                child.position.x = 0;
+                offset += extendSize.y * 2;
+            }
+            else {
+                child.position.x = offset + extendSize.x;
+                child.position.y = 0;
+                offset += extendSize.x * 2;
+            }
+            offset += controlCount > 0 ? this.margin : 0;
+        }
+    }
+}
+//# sourceMappingURL=stackPanel3D.js.map

package/3D/controls/stackPanel3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stackPanel3D.js","sourceRoot":"","sources":["../../../../../dev/gui/src/3D/controls/stackPanel3D.ts"],"names":[],"mappings":"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","sourcesContent":["import { Tools } from \"core/Misc/tools\";\r\nimport { Matrix, TmpVectors, Vector3 } from \"core/Maths/math.vector\";\r\n\r\nimport { Container3D } from \"./container3D\";\r\n\r\n/**\r\n * Class used to create a stack panel in 3D on XY plane\r\n */\r\nexport class StackPanel3D extends Container3D {\r\n    private _isVertical = false;\r\n\r\n    /**\r\n     * Gets or sets a boolean indicating if the stack panel is vertical or horizontal (horizontal by default)\r\n     */\r\n    public get isVertical(): boolean {\r\n        return this._isVertical;\r\n    }\r\n\r\n    public set isVertical(value: boolean) {\r\n        if (this._isVertical === value) {\r\n            return;\r\n        }\r\n\r\n        this._isVertical = value;\r\n\r\n        Tools.SetImmediate(() => {\r\n            this._arrangeChildren();\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Gets or sets the distance between elements\r\n     */\r\n    public margin = 0.1;\r\n\r\n    /**\r\n     * Creates new StackPanel\r\n     * @param isVertical\r\n     */\r\n    public constructor(isVertical = false) {\r\n        super();\r\n\r\n        this._isVertical = isVertical;\r\n    }\r\n\r\n    protected override _arrangeChildren() {\r\n        let width = 0;\r\n        let height = 0;\r\n        let controlCount = 0;\r\n        const extendSizes = [];\r\n\r\n        const currentInverseWorld = Matrix.Invert(this.node!.computeWorldMatrix(true));\r\n\r\n        // Measure\r\n        for (const child of this._children) {\r\n            if (!child.mesh) {\r\n                continue;\r\n            }\r\n\r\n            controlCount++;\r\n            child.mesh.computeWorldMatrix(true);\r\n            child.mesh.getWorldMatrix().multiplyToRef(currentInverseWorld, TmpVectors.Matrix[0]);\r\n\r\n            const boundingBox = child.mesh.getBoundingInfo().boundingBox;\r\n            const extendSize = Vector3.TransformNormal(boundingBox.extendSize, TmpVectors.Matrix[0]);\r\n            extendSizes.push(extendSize);\r\n\r\n            if (this._isVertical) {\r\n                height += extendSize.y;\r\n            } else {\r\n                width += extendSize.x;\r\n            }\r\n        }\r\n\r\n        if (this._isVertical) {\r\n            height += ((controlCount - 1) * this.margin) / 2;\r\n        } else {\r\n            width += ((controlCount - 1) * this.margin) / 2;\r\n        }\r\n\r\n        // Arrange\r\n        let offset: number;\r\n        if (this._isVertical) {\r\n            offset = -height;\r\n        } else {\r\n            offset = -width;\r\n        }\r\n\r\n        let index = 0;\r\n        for (const child of this._children) {\r\n            if (!child.mesh) {\r\n                continue;\r\n            }\r\n            controlCount--;\r\n            const extendSize = extendSizes[index++];\r\n\r\n            if (this._isVertical) {\r\n                child.position.y = offset + extendSize.y;\r\n                child.position.x = 0;\r\n                offset += extendSize.y * 2;\r\n            } else {\r\n                child.position.x = offset + extendSize.x;\r\n                child.position.y = 0;\r\n                offset += extendSize.x * 2;\r\n            }\r\n\r\n            offset += controlCount > 0 ? this.margin : 0;\r\n        }\r\n    }\r\n}\r\n"]}

package/3D/controls/touchButton3D.d.ts

@@ -0,0 +1,77 @@
+import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import type { Mesh } from "@babylonjs/core/Meshes/mesh.js";
+import type { TransformNode } from "@babylonjs/core/Meshes/transformNode.js";
+import type { Scene } from "@babylonjs/core/scene.js";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Button3D } from "./button3D.js";
+/**
+ * Class used to create a touchable button in 3D
+ */
+export declare class TouchButton3D extends Button3D {
+    private _collisionMesh;
+    private _collidableFrontDirection;
+    private _isNearPressed;
+    private _interactionSurfaceHeight;
+    private _isToggleButton;
+    private _toggleState;
+    private _toggleButtonCallback;
+    /**
+     * An event triggered when the button is toggled. Only fired if 'isToggleButton' is true
+     */
+    onToggleObservable: Observable<boolean>;
+    /**
+     * Creates a new touchable button
+     * @param name defines the control name
+     * @param collisionMesh mesh to track collisions with
+     */
+    constructor(name?: string, collisionMesh?: Mesh);
+    /**
+     * Whether the current interaction is caused by near interaction or not
+     */
+    get isActiveNearInteraction(): boolean;
+    /**
+     * Sets the front-facing direction of the button. Pass in Vector3.Zero to allow interactions from any direction
+     * @param frontWorldDir the forward direction of the button
+     */
+    set collidableFrontDirection(frontWorldDir: Vector3);
+    /**
+     * Returns the front-facing direction of the button, or Vector3.Zero if there is no 'front'
+     */
+    get collidableFrontDirection(): Vector3;
+    /**
+     * Sets the mesh used for testing input collision
+     * @param collisionMesh the new collision mesh for the button
+     */
+    set collisionMesh(collisionMesh: Mesh);
+    /**
+     * Setter for if this TouchButton3D should be treated as a toggle button
+     * @param value If this TouchHolographicButton should act like a toggle button
+     */
+    set isToggleButton(value: boolean);
+    get isToggleButton(): boolean;
+    /**
+     * A public entrypoint to set the toggle state of the TouchHolographicButton. Only works if 'isToggleButton' is true
+     * @param newState The new state to set the TouchHolographicButton's toggle state to
+     */
+    set isToggled(newState: boolean);
+    get isToggled(): boolean;
+    protected _onToggle(newState: boolean): void;
+    private _isInteractionInFrontOfButton;
+    /**
+     * Get the height of the touchPoint from the collidable part of the button
+     * @param touchPoint the point to compare to the button, in absolute position
+     * @returns the depth of the touch point into the front of the button
+     */
+    getPressDepth(touchPoint: Vector3): number;
+    protected _getInteractionHeight(interactionPos: Vector3, basePos: Vector3): number;
+    /**
+     * @internal
+     */
+    _generatePointerEventType(providedType: number, nearMeshPosition: Vector3, activeInteractionCount: number): number;
+    protected _getTypeName(): string;
+    protected _createNode(scene: Scene): TransformNode;
+    /**
+     * Releases all associated resources
+     */
+    dispose(): void;
+}