babylonjs-gui 5.51.0 → 5.52.0

package/babylon.gui.d.ts

@@ -4728,17 +4728,37 @@ declare module BABYLON.GUI {
     }
 
 
+    /**
+     * Options used to create a button in 3D
+     */
+    export interface IButton3DCreationOptions {
+        /**
+         * Width of the button. Default: 1
+         */
+        width?: number;
+        /**
+         * Height of the button. Default: 1
+         */
+        height?: number;
+        /**
+         * Depth of the button. Default: 0.08
+         */
+        depth?: number;
+    }
     /**
      * Class used to create a button in 3D
      */
     export class Button3D extends AbstractButton3D {
         /** @internal */
         protected _currentMaterial: BABYLON.Material;
+        protected _options: IButton3DCreationOptions;
+        protected _height: number;
+        protected _depth: number;
         /**
          * Creates a new button
          * @param name defines the control name
          */
-        constructor(name?: string);
+        constructor(name?: string, options?: IButton3DCreationOptions);
         /**
          * Apply the facade texture (created from the content property).
          * @param facadeTexture defines the AdvancedDynamicTexture to use
@@ -4832,11 +4852,13 @@ declare module BABYLON.GUI {
         private _facadeTexture;
         protected _contentResolution: number;
         protected _contentScaleRatio: number;
+        protected _contentScaleRatioY?: number;
         /**
          * Gets or sets the GUI 2D content used to display the button's facade
          */
         get content(): Control;
         set content(value: Control);
+        protected _setFacadeTextureScaling(): void;
         /**
          * Gets or sets the texture resolution used to render content (512 by default)
          */

package/babylon.gui.js

@@ -5967,7 +5967,8 @@ var Control = /** @class */ (function () {
         }
         var newLeft = projectedPosition.x + this._linkOffsetX.getValue(this._host) - this._currentMeasure.width / 2;
         var newTop = projectedPosition.y + this._linkOffsetY.getValue(this._host) - this._currentMeasure.height / 2;
-        if (this._left.ignoreAdaptiveScaling && this._top.ignoreAdaptiveScaling) {
+        var leftAndTopIgnoreAdaptiveScaling = this._left.ignoreAdaptiveScaling && this._top.ignoreAdaptiveScaling;
+        if (leftAndTopIgnoreAdaptiveScaling) {
             if (Math.abs(newLeft - oldLeft) < 0.5) {
                 newLeft = oldLeft;
             }
@@ -5975,7 +5976,7 @@ var Control = /** @class */ (function () {
                 newTop = oldTop;
             }
         }
-        if (oldLeft === newLeft && oldTop === newTop) {
+        if (!leftAndTopIgnoreAdaptiveScaling && oldLeft === newLeft && oldTop === newTop) {
             return;
         }
         this.left = newLeft + "px";
@@ -20067,8 +20068,9 @@ var Button3D = /** @class */ (function (_super) {
      * Creates a new button
      * @param name defines the control name
      */
-    function Button3D(name) {
+    function Button3D(name, options) {
         var _this = _super.call(this, name) || this;
+        _this._options = (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__assign)({ width: 1, height: 1, depth: 0.08 }, options);
         // Default animations
         _this.pointerEnterAnimation = function () {
             if (!_this.mesh) {
@@ -20117,12 +20119,14 @@ var Button3D = /** @class */ (function (_super) {
             faceUV[1].copyFromFloats(0, 0, 1, 1);
         }
         var mesh = (0,core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__.CreateBox)(this.name + "_rootMesh", {
-            width: 1.0,
-            height: 1.0,
-            depth: 0.08,
+            width: this._options.width,
+            height: this._options.height,
+            depth: this._options.depth,
             faceUV: faceUV,
             wrap: true,
         }, scene);
+        this._contentScaleRatioY = (this._contentScaleRatio * this._options.width) / this._options.height;
+        this._setFacadeTextureScaling();
         return mesh;
     };
     Button3D.prototype._affectMaterial = function (mesh) {
@@ -20350,8 +20354,7 @@ var ContentDisplay3D = /** @class */ (function (_super) {
             }
             if (!this._facadeTexture) {
                 this._facadeTexture = new _2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_1__.AdvancedDynamicTexture("Facade", this._contentResolution, this._contentResolution, this._host.utilityLayer.utilityLayerScene, true, core_Materials_Textures_texture__WEBPACK_IMPORTED_MODULE_3__.Texture.TRILINEAR_SAMPLINGMODE);
-                this._facadeTexture.rootContainer.scaleX = this._contentScaleRatio;
-                this._facadeTexture.rootContainer.scaleY = this._contentScaleRatio;
+                this._setFacadeTextureScaling();
                 this._facadeTexture.premulAlpha = true;
             }
             else {
@@ -20363,6 +20366,13 @@ var ContentDisplay3D = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    ContentDisplay3D.prototype._setFacadeTextureScaling = function () {
+        var _a;
+        if (this._facadeTexture) {
+            this._facadeTexture.rootContainer.scaleX = this._contentScaleRatio;
+            this._facadeTexture.rootContainer.scaleY = (_a = this._contentScaleRatioY) !== null && _a !== void 0 ? _a : this._contentScaleRatio;
+        }
+    };
     Object.defineProperty(ContentDisplay3D.prototype, "contentResolution", {
         /**
          * Gets or sets the texture resolution used to render content (512 by default)