updated what's new + fix spherePanel orientation

dist/preview release/gui/babylon.gui.d.ts

@@ -2236,10 +2236,15 @@ declare module BABYLON.GUI {
          * Releases all associated resources
          */
         dispose(): void;
+        /** Control rotation will remain unchanged  */
         static readonly UNSET_ORIENTATION: number;
+        /** Control will rotate to make it look at sphere central axis */
         static readonly FACEORIGIN_ORIENTATION: number;
+        /** Control will rotate to make it look back at sphere central axis */
         static readonly FACEORIGINREVERSED_ORIENTATION: number;
+        /** Control will rotate to look at z axis (0, 0, 1) */
         static readonly FACEFORWARD_ORIENTATION: number;
+        /** Control will rotate to look at negative z axis (0, 0, -1) */
         static readonly FACEFORWARDREVERSED_ORIENTATION: number;
     }
 }

dist/preview release/gui/babylon.gui.js

@@ -7455,10 +7455,15 @@ var BABYLON;
                 this._children = [];
                 _super.prototype.dispose.call(this);
             };
+            /** Control rotation will remain unchanged  */
             Container3D.UNSET_ORIENTATION = 0;
+            /** Control will rotate to make it look at sphere central axis */
             Container3D.FACEORIGIN_ORIENTATION = 1;
+            /** Control will rotate to make it look back at sphere central axis */
             Container3D.FACEORIGINREVERSED_ORIENTATION = 2;
+            /** Control will rotate to look at z axis (0, 0, 1) */
             Container3D.FACEFORWARD_ORIENTATION = 3;
+            /** Control will rotate to look at negative z axis (0, 0, -1) */
             Container3D.FACEFORWARDREVERSED_ORIENTATION = 4;
             return Container3D;
         }(GUI.Control3D));
@@ -7999,7 +8004,7 @@ var BABYLON;
                 /**
                  * Gets or sets the distance between elements
                  */
-                _this.margin = 0.1;
+                _this.margin = 0;
                 return _this;
             }
             Object.defineProperty(SpherePanel.prototype, "orientation", {
@@ -8114,8 +8119,8 @@ var BABYLON;
                     cellWidth = Math.max(cellWidth, extendSize.x * 2);
                     cellHeight = Math.max(cellHeight, extendSize.y * 2);
                 }
-                //     cellWidth += this.margin * 2;
-                //   cellHeight += this.margin * 2;
+                cellWidth += this.margin * 2;
+                cellHeight += this.margin * 2;
                 // Arrange
                 if (this._rowThenColum) {
                     columns = this._columns;
@@ -8160,10 +8165,10 @@ var BABYLON;
                     var newPos = this._sphericalMapping(nodeGrid[cellCounter]);
                     switch (this._orientation) {
                         case GUI.Container3D.FACEORIGIN_ORIENTATION:
-                            child.mesh.lookAt(new BABYLON.Vector3(-newPos.x, 0, -newPos.z));
+                            child.mesh.lookAt(new BABYLON.Vector3(-newPos.x, -newPos.y, -newPos.z));
                             break;
                         case GUI.Container3D.FACEORIGINREVERSED_ORIENTATION:
-                            child.mesh.lookAt(new BABYLON.Vector3(newPos.x, 0, newPos.z));
+                            child.mesh.lookAt(new BABYLON.Vector3(newPos.x, newPos.y, newPos.z));
                             break;
                         case GUI.Container3D.FACEFORWARD_ORIENTATION:
                             child.mesh.lookAt(new BABYLON.Vector3(0, 0, 1));

dist/preview release/gui/babylon.gui.module.d.ts

@@ -2241,10 +2241,15 @@ declare module BABYLON.GUI {
          * Releases all associated resources
          */
         dispose(): void;
+        /** Control rotation will remain unchanged  */
         static readonly UNSET_ORIENTATION: number;
+        /** Control will rotate to make it look at sphere central axis */
         static readonly FACEORIGIN_ORIENTATION: number;
+        /** Control will rotate to make it look back at sphere central axis */
         static readonly FACEORIGINREVERSED_ORIENTATION: number;
+        /** Control will rotate to look at z axis (0, 0, 1) */
         static readonly FACEFORWARD_ORIENTATION: number;
+        /** Control will rotate to look at negative z axis (0, 0, -1) */
         static readonly FACEFORWARDREVERSED_ORIENTATION: number;
     }
 }

dist/preview release/what's new.md

@@ -5,6 +5,7 @@
 - Added a ParticleHelper class to create some pre-configured particle systems in a one-liner method style ([DevChris](https://github.com/yovanoc))
 - Added new `MixMaterial` to the Materials Library allowing to mix up to 8 textures ([julien-moreau](https://github.com/julien-moreau))
 - Added new `PhotoDome` object to display 360 photos. [Demo](https://www.babylonjs-playground.com/#14KRGG#0) ([SzeyinLee](https://github.com/SzeyinLee))
+- New GUI 3D controls toolset. [Complete doc + demos](http://doc.babylonjs.com/how_to/gui3d) ([Deltakosh](https://github.com/deltakosh))
 
 ## Updates
 

gui/src/3D/controls/spherePanel.ts

@@ -15,7 +15,7 @@ module BABYLON.GUI {
         /**
          * Gets or sets the distance between elements
          */
-        public margin = 0.1;        
+        public margin = 0;        
 
         /**
          * Gets or sets the orientation to apply to all controls (BABYLON.Container3D.FaceOriginReversedOrientation by default)
@@ -137,8 +137,8 @@ module BABYLON.GUI {
                 cellHeight = Math.max(cellHeight, extendSize.y * 2);
             }
 
-       //     cellWidth += this.margin * 2;
-         //   cellHeight += this.margin * 2;
+            cellWidth += this.margin * 2;
+            cellHeight += this.margin * 2;
 
             // Arrange
             if (this._rowThenColum) {
@@ -191,10 +191,10 @@ module BABYLON.GUI {
 
                 switch (this._orientation) {
                     case Container3D.FACEORIGIN_ORIENTATION:
-                        child.mesh.lookAt(new BABYLON.Vector3(-newPos.x, 0, -newPos.z));
+                        child.mesh.lookAt(new BABYLON.Vector3(-newPos.x, -newPos.y, -newPos.z));
                         break;
                     case Container3D.FACEORIGINREVERSED_ORIENTATION:
-                        child.mesh.lookAt(new BABYLON.Vector3(newPos.x, 0, newPos.z));
+                        child.mesh.lookAt(new BABYLON.Vector3(newPos.x, newPos.y, newPos.z));
                         break;
                     case Container3D.FACEFORWARD_ORIENTATION:
                         child.mesh.lookAt(new BABYLON.Vector3(0, 0, 1));