Moved Domes to TransformNode

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

@@ -2374,7 +2374,10 @@ declare module BABYLON.GUI {
     }
 }
 declare module BABYLON.GUI {
-    /** Class used to store data to display */
+    /**
+        * Class used to store data to display
+        * @see http://doc.babylonjs.com/how_to/chart3d
+        */
     export class DataSeries {
             /** Gets or sets the label of the series */
             label: string;
@@ -2403,10 +2406,18 @@ declare module BABYLON.GUI {
                 * @returns the new DataSeries
                 */
             static CreateFakeData(): DataSeries;
+            /**
+                * Create a new DataSeries containing testing spatial values
+                * @returns the new DataSeries
+                */
+            static CreateFakeSpatialData(): DataSeries;
     }
 }
 declare module BABYLON.GUI {
-    /** base class for all chart controls*/
+    /**
+        * Base class for all chart controls
+        * @see http://doc.babylonjs.com/how_to/chart3d#charts
+        */
     export abstract class Chart {
             protected _dataSource: BABYLON.Nullable<DataSeries>;
             protected _rootNode: BABYLON.TransformNode;
@@ -2416,9 +2427,7 @@ declare module BABYLON.GUI {
             protected _scene: BABYLON.Scene;
             protected _blockRefresh: boolean;
             /** BABYLON.Observable raised when a new element is created */
-            onElementCreated: BABYLON.Observable<BABYLON.Mesh>;
-            /** User defined callback used to create labels */
-            labelCreationFunction: (label: string, width: number, includeBackground: boolean) => BABYLON.Mesh;
+            onElementCreatedObservable: BABYLON.Observable<BABYLON.Mesh>;
             /**
                 * BABYLON.Observable raised when the point picked by the pointer events changed
                 */
@@ -2431,6 +2440,8 @@ declare module BABYLON.GUI {
                 * BABYLON.Observable raised when the pointer leaves an element of the chart
                 */
             onElementOutObservable: BABYLON.Observable<BABYLON.AbstractMesh>;
+            /** User defined callback used to create labels */
+            labelCreationFunction: BABYLON.Nullable<(label: string, width: number, includeBackground: boolean) => BABYLON.Mesh>;
             /** Gets or sets the rotation of the entire chart */
             rotation: BABYLON.Vector3;
             /** Gets or sets the position of the entire chart */
@@ -2439,7 +2450,7 @@ declare module BABYLON.GUI {
             scaling: BABYLON.Vector3;
             /** Gets or sets the data source used by the graph */
             dataSource: BABYLON.Nullable<DataSeries>;
-            /** Gets the filters applied to data source */
+            /** Gets or sets the filters applied to data source */
             dataFilters: {
                     [key: string]: string;
             };
@@ -2462,14 +2473,14 @@ declare module BABYLON.GUI {
                 * @param includeBackground defines if a background rectangle must be added (default is true)
                 * @returns a mesh used to host the label
                 */
-            addLabel(label: string, width: number, includeBackground?: boolean): BABYLON.Mesh;
+            protected _addLabel(label: string, width: number, includeBackground?: boolean): BABYLON.Mesh;
             /**
                 * Remove specific label mesh
                 * @param label defines the label mesh to remove
                 */
-            removeLabel(label: BABYLON.Mesh): void;
+            protected _removeLabel(label: BABYLON.Mesh): void;
             /** Remove all created labels */
-            removeLabels(): void;
+            protected _removeLabels(): void;
             /**
                 * Force the chart to redraw itself
                 * @returns the current chart
@@ -2481,7 +2492,10 @@ declare module BABYLON.GUI {
     }
 }
 declare module BABYLON.GUI {
-    /** Class used to render bar graphs */
+    /**
+        * Class used to render bar graphs
+        * @see http://doc.babylonjs.com/how_to/chart3d#bargraph
+        */
     export class BarGraph extends Chart {
             protected _ownDefaultMaterial: boolean;
             /** Gets or sets a boolean indicating if the background must be displayed */
@@ -2490,7 +2504,7 @@ declare module BABYLON.GUI {
             displayLabels: boolean;
             /** Gets or sets the margin between bars */
             margin: number;
-            /** Gets or sets the with of each bar */
+            /** Gets or sets the width of each bar */
             barWidth: number;
             /** Gets or sets the maximum height of a bar */
             maxBarHeight: number;
@@ -2521,4 +2535,21 @@ declare module BABYLON.GUI {
             dispose(): void;
             protected _clean(): void;
     }
+}
+declare module BABYLON.GUI {
+    /**
+        * Class used to render bar graphs
+        * @see http://doc.babylonjs.com/how_to/chart3d#mapgraph
+        */
+    export class MapGraph extends Chart {
+            /**
+                * Creates a new MapGraph
+                * @param name defines the name of the graph
+                * @param scene defines the hosting scene
+                */
+            constructor(name: string, mapUrl: string, scene?: BABYLON.Nullable<BABYLON.Scene>);
+            protected _createBarMesh(name: string, scene: BABYLON.Scene): BABYLON.Mesh;
+            refresh(): MapGraph;
+            protected _clean(): void;
+    }
 }

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

@@ -560,6 +560,7 @@ declare module 'babylonjs-gui/3D/charting' {
     export * from "babylonjs-gui/3D/charting/dataSeries";
     export * from "babylonjs-gui/3D/charting/chart";
     export * from "babylonjs-gui/3D/charting/barGraph";
+    export * from "babylonjs-gui/3D/charting/mapGraph";
 }
 
 declare module 'babylonjs-gui/3D/gui3DManager' {
@@ -2586,7 +2587,10 @@ declare module 'babylonjs-gui/3D/materials/fluentMaterial' {
 
 declare module 'babylonjs-gui/3D/charting/dataSeries' {
     import { Color3 } from "babylonjs";
-    /** Class used to store data to display */
+    /**
+        * Class used to store data to display
+        * @see http://doc.babylonjs.com/how_to/chart3d
+        */
     export class DataSeries {
             /** Gets or sets the label of the series */
             label: string;
@@ -2615,13 +2619,21 @@ declare module 'babylonjs-gui/3D/charting/dataSeries' {
                 * @returns the new DataSeries
                 */
             static CreateFakeData(): DataSeries;
+            /**
+                * Create a new DataSeries containing testing spatial values
+                * @returns the new DataSeries
+                */
+            static CreateFakeSpatialData(): DataSeries;
     }
 }
 
 declare module 'babylonjs-gui/3D/charting/chart' {
     import { Nullable, TransformNode, Scene, Vector3, Observable, Mesh, AbstractMesh } from "babylonjs";
     import { DataSeries } from "babylonjs-gui/3D/charting";
-    /** base class for all chart controls*/
+    /**
+        * Base class for all chart controls
+        * @see http://doc.babylonjs.com/how_to/chart3d#charts
+        */
     export abstract class Chart {
             protected _dataSource: Nullable<DataSeries>;
             protected _rootNode: TransformNode;
@@ -2631,9 +2643,7 @@ declare module 'babylonjs-gui/3D/charting/chart' {
             protected _scene: Scene;
             protected _blockRefresh: boolean;
             /** Observable raised when a new element is created */
-            onElementCreated: Observable<Mesh>;
-            /** User defined callback used to create labels */
-            labelCreationFunction: (label: string, width: number, includeBackground: boolean) => Mesh;
+            onElementCreatedObservable: Observable<Mesh>;
             /**
                 * Observable raised when the point picked by the pointer events changed
                 */
@@ -2646,6 +2656,8 @@ declare module 'babylonjs-gui/3D/charting/chart' {
                 * Observable raised when the pointer leaves an element of the chart
                 */
             onElementOutObservable: Observable<AbstractMesh>;
+            /** User defined callback used to create labels */
+            labelCreationFunction: Nullable<(label: string, width: number, includeBackground: boolean) => Mesh>;
             /** Gets or sets the rotation of the entire chart */
             rotation: Vector3;
             /** Gets or sets the position of the entire chart */
@@ -2654,7 +2666,7 @@ declare module 'babylonjs-gui/3D/charting/chart' {
             scaling: Vector3;
             /** Gets or sets the data source used by the graph */
             dataSource: Nullable<DataSeries>;
-            /** Gets the filters applied to data source */
+            /** Gets or sets the filters applied to data source */
             dataFilters: {
                     [key: string]: string;
             };
@@ -2677,14 +2689,14 @@ declare module 'babylonjs-gui/3D/charting/chart' {
                 * @param includeBackground defines if a background rectangle must be added (default is true)
                 * @returns a mesh used to host the label
                 */
-            addLabel(label: string, width: number, includeBackground?: boolean): Mesh;
+            protected _addLabel(label: string, width: number, includeBackground?: boolean): Mesh;
             /**
                 * Remove specific label mesh
                 * @param label defines the label mesh to remove
                 */
-            removeLabel(label: Mesh): void;
+            protected _removeLabel(label: Mesh): void;
             /** Remove all created labels */
-            removeLabels(): void;
+            protected _removeLabels(): void;
             /**
                 * Force the chart to redraw itself
                 * @returns the current chart
@@ -2699,7 +2711,10 @@ declare module 'babylonjs-gui/3D/charting/chart' {
 declare module 'babylonjs-gui/3D/charting/barGraph' {
     import { Nullable, Scene, Mesh, Material } from "babylonjs";
     import { Chart } from "babylonjs-gui/3D/charting";
-    /** Class used to render bar graphs */
+    /**
+        * Class used to render bar graphs
+        * @see http://doc.babylonjs.com/how_to/chart3d#bargraph
+        */
     export class BarGraph extends Chart {
             protected _ownDefaultMaterial: boolean;
             /** Gets or sets a boolean indicating if the background must be displayed */
@@ -2708,7 +2723,7 @@ declare module 'babylonjs-gui/3D/charting/barGraph' {
             displayLabels: boolean;
             /** Gets or sets the margin between bars */
             margin: number;
-            /** Gets or sets the with of each bar */
+            /** Gets or sets the width of each bar */
             barWidth: number;
             /** Gets or sets the maximum height of a bar */
             maxBarHeight: number;
@@ -2741,6 +2756,26 @@ declare module 'babylonjs-gui/3D/charting/barGraph' {
     }
 }
 
+declare module 'babylonjs-gui/3D/charting/mapGraph' {
+    import { Chart } from "babylonjs-gui/3D/charting";
+    import { Scene, Nullable, Mesh } from "babylonjs";
+    /**
+        * Class used to render bar graphs
+        * @see http://doc.babylonjs.com/how_to/chart3d#mapgraph
+        */
+    export class MapGraph extends Chart {
+            /**
+                * Creates a new MapGraph
+                * @param name defines the name of the graph
+                * @param scene defines the hosting scene
+                */
+            constructor(name: string, mapUrl: string, scene?: Nullable<Scene>);
+            protected _createBarMesh(name: string, scene: Scene): Mesh;
+            refresh(): MapGraph;
+            protected _clean(): void;
+    }
+}
+
 
 /*BabylonJS GUI*/
 // Dependencies for this module:
@@ -5118,7 +5153,10 @@ declare module BABYLON.GUI {
     }
 }
 declare module BABYLON.GUI {
-    /** Class used to store data to display */
+    /**
+        * Class used to store data to display
+        * @see http://doc.babylonjs.com/how_to/chart3d
+        */
     export class DataSeries {
             /** Gets or sets the label of the series */
             label: string;
@@ -5147,10 +5185,18 @@ declare module BABYLON.GUI {
                 * @returns the new DataSeries
                 */
             static CreateFakeData(): DataSeries;
+            /**
+                * Create a new DataSeries containing testing spatial values
+                * @returns the new DataSeries
+                */
+            static CreateFakeSpatialData(): DataSeries;
     }
 }
 declare module BABYLON.GUI {
-    /** base class for all chart controls*/
+    /**
+        * Base class for all chart controls
+        * @see http://doc.babylonjs.com/how_to/chart3d#charts
+        */
     export abstract class Chart {
             protected _dataSource: BABYLON.Nullable<DataSeries>;
             protected _rootNode: BABYLON.TransformNode;
@@ -5160,9 +5206,7 @@ declare module BABYLON.GUI {
             protected _scene: BABYLON.Scene;
             protected _blockRefresh: boolean;
             /** BABYLON.Observable raised when a new element is created */
-            onElementCreated: BABYLON.Observable<BABYLON.Mesh>;
-            /** User defined callback used to create labels */
-            labelCreationFunction: (label: string, width: number, includeBackground: boolean) => BABYLON.Mesh;
+            onElementCreatedObservable: BABYLON.Observable<BABYLON.Mesh>;
             /**
                 * BABYLON.Observable raised when the point picked by the pointer events changed
                 */
@@ -5175,6 +5219,8 @@ declare module BABYLON.GUI {
                 * BABYLON.Observable raised when the pointer leaves an element of the chart
                 */
             onElementOutObservable: BABYLON.Observable<BABYLON.AbstractMesh>;
+            /** User defined callback used to create labels */
+            labelCreationFunction: BABYLON.Nullable<(label: string, width: number, includeBackground: boolean) => BABYLON.Mesh>;
             /** Gets or sets the rotation of the entire chart */
             rotation: BABYLON.Vector3;
             /** Gets or sets the position of the entire chart */
@@ -5183,7 +5229,7 @@ declare module BABYLON.GUI {
             scaling: BABYLON.Vector3;
             /** Gets or sets the data source used by the graph */
             dataSource: BABYLON.Nullable<DataSeries>;
-            /** Gets the filters applied to data source */
+            /** Gets or sets the filters applied to data source */
             dataFilters: {
                     [key: string]: string;
             };
@@ -5206,14 +5252,14 @@ declare module BABYLON.GUI {
                 * @param includeBackground defines if a background rectangle must be added (default is true)
                 * @returns a mesh used to host the label
                 */
-            addLabel(label: string, width: number, includeBackground?: boolean): BABYLON.Mesh;
+            protected _addLabel(label: string, width: number, includeBackground?: boolean): BABYLON.Mesh;
             /**
                 * Remove specific label mesh
                 * @param label defines the label mesh to remove
                 */
-            removeLabel(label: BABYLON.Mesh): void;
+            protected _removeLabel(label: BABYLON.Mesh): void;
             /** Remove all created labels */
-            removeLabels(): void;
+            protected _removeLabels(): void;
             /**
                 * Force the chart to redraw itself
                 * @returns the current chart
@@ -5225,7 +5271,10 @@ declare module BABYLON.GUI {
     }
 }
 declare module BABYLON.GUI {
-    /** Class used to render bar graphs */
+    /**
+        * Class used to render bar graphs
+        * @see http://doc.babylonjs.com/how_to/chart3d#bargraph
+        */
     export class BarGraph extends Chart {
             protected _ownDefaultMaterial: boolean;
             /** Gets or sets a boolean indicating if the background must be displayed */
@@ -5234,7 +5283,7 @@ declare module BABYLON.GUI {
             displayLabels: boolean;
             /** Gets or sets the margin between bars */
             margin: number;
-            /** Gets or sets the with of each bar */
+            /** Gets or sets the width of each bar */
             barWidth: number;
             /** Gets or sets the maximum height of a bar */
             maxBarHeight: number;
@@ -5265,4 +5314,21 @@ declare module BABYLON.GUI {
             dispose(): void;
             protected _clean(): void;
     }
+}
+declare module BABYLON.GUI {
+    /**
+        * Class used to render bar graphs
+        * @see http://doc.babylonjs.com/how_to/chart3d#mapgraph
+        */
+    export class MapGraph extends Chart {
+            /**
+                * Creates a new MapGraph
+                * @param name defines the name of the graph
+                * @param scene defines the hosting scene
+                */
+            constructor(name: string, mapUrl: string, scene?: BABYLON.Nullable<BABYLON.Scene>);
+            protected _createBarMesh(name: string, scene: BABYLON.Scene): BABYLON.Mesh;
+            refresh(): MapGraph;
+            protected _clean(): void;
+    }
 }

gui/src/3D/charting/barGraph.ts

@@ -223,7 +223,7 @@ export class BarGraph extends Chart {
             return this;
         }
 
-        let scene = this._rootNode.getScene();
+        const scene = this._rootNode.getScene();
 
         // Default material
         if (!this._defaultMaterial) {
@@ -247,7 +247,7 @@ export class BarGraph extends Chart {
             }
         });
 
-        let ratio = this.maxBarHeight / (max - min);
+        let ratio = this._maxBarHeight / (max - min);
 
         let createMesh = false;
         let left = -(data.length / 2) * (this.barWidth + this.margin) + 1.5 * this._margin;
@@ -324,7 +324,7 @@ export class BarGraph extends Chart {
 
             this.onElementCreatedObservable.notifyObservers(barMesh);
 
-            left += this.barWidth + this.margin;
+            left += this._barWidth + this.margin;
 
             // Label
             if (!this._labelDimension || !this._displayLabels) {

gui/src/3D/charting/dataSeries.ts

@@ -162,4 +162,133 @@ export class DataSeries {
         
         return series;
     }
+
+    /**
+     * Create a new DataSeries containing testing spatial values
+     * @returns the new DataSeries
+     */
+    public static CreateFakeSpatialData(): DataSeries {
+        var series = new DataSeries();
+        series.label = "Spatial Data";
+        series.color = new Color3(0, 1.0, 0);
+
+        series.dimensions = ["Year", "Country"];
+
+        series.data = [
+            {
+                "Year": 2014,
+                "Country": "France",
+                "value": 10,
+                "latitude": 46.63728,
+                "longitude": 2.338262
+            }, 
+            {
+                "Year": 2014,
+                "Country": "USA",
+                "value": 200,
+                "latitude": 39.83333,
+                "longitude": -98.58334
+            }, 
+            {
+                "Year": 2014,
+                "Country": "India",
+                "value": 400,
+                "latitude": 23.40601,
+                "longitude": 79.45809
+            },
+            {
+                "Year": 2014,
+                "Country": "UK",
+                "value": 180,
+                "latitude": 54.56089,
+                "longitude": -2.212512
+            },
+            {
+                "Year": 2014,
+                "Country": "Germany",
+                "value": 400,
+                "latitude": 51.20247,
+                "longitude": 10.3822
+            }, 
+            {
+                "Year": 2014,
+                "Country": "Australia",
+                "value": 24,
+                "latitude": -25.58524,
+                "longitude": 134.5041
+            }, 
+            {
+                "Year": 2014,
+                "Country": "China",
+                "value": 540,
+                "latitude": 36.55309,
+                "longitude": 103.9754
+            }, 
+            {
+                "Year": 2014,
+                "Country": "Japan",
+                "value": 150,
+                "latitude": 36.28165,
+                "longitude": 139.0773
+            },
+            {
+                "Year": 2015,
+                "Country": "France",
+                "value": 12,
+                "latitude": 46.63728,
+                "longitude": 2.338262
+            }, 
+            {
+                "Year": 2015,
+                "Country": "USA",
+                "value": 120,
+                "latitude": 39.83333,
+                "longitude": -98.58334
+            }, 
+            {
+                "Year": 2015,
+                "Country": "India",
+                "value": 480,
+                "latitude": 23.40601,
+                "longitude": 79.45809
+            }, 
+            {
+                "Year": 2015,
+                "Country": "UK",
+                "value": 10,
+                "latitude": 54.56089,
+                "longitude": -2.212512
+            },
+            {
+                "Year": 2015,
+                "Country": "Germany",
+                "value": 80,
+                "latitude": 51.20247,
+                "longitude": 10.3822
+            }, 
+            {
+                "Year": 2015,
+                "Country": "Australia",
+                "value": 230,
+                "latitude": -25.58524,
+                "longitude": 134.5041
+            }, 
+            {
+                "Year": 2015,
+                "Country": "China",
+                "value": 490,
+                "latitude": 36.55309,
+                "longitude": 103.9754
+            }, 
+            {
+                "Year": 2015,
+                "Country": "Japan",
+                "value": 120,
+                "latitude": 36.28165,
+                "longitude": 139.0773
+            }
+        ];
+        
+        return series;
+    }
 }

gui/src/3D/charting/index.ts

@@ -1,3 +1,4 @@
 export * from "./dataSeries";
 export * from "./chart";
-export * from "./barGraph";
+export * from "./barGraph";
+export * from "./mapGraph";

gui/src/3D/charting/mapGraph.ts

@@ -0,0 +1,126 @@
+import { Chart } from ".";
+import { Engine, Scene, Nullable, Mesh, Animation, StandardMaterial, Texture } from "babylonjs";
+
+/** 
+ * Class used to render bar graphs 
+ * @see http://doc.babylonjs.com/how_to/chart3d#mapgraph
+ */
+export class MapGraph extends Chart {
+
+    private _barMeshes: Nullable<Array<Mesh>>;
+    private _barWidth = 0.5;    
+    private _maxBarHeight = 10;
+    private _worldMap: Nullable<Mesh>;
+    private _mercatorMaterial: Nullable<StandardMaterial>;
+    
+    /**
+     * Creates a new MapGraph
+     * @param name defines the name of the graph
+     * @param scene defines the hosting scene
+     */
+    constructor(name: string, mapUrl: string, scene: Nullable<Scene> = Engine.LastCreatedScene) {
+        super(name, scene);
+
+        this._mercatorMaterial = new StandardMaterial("WorldMap", scene!);
+        this._mercatorMaterial.emissiveTexture = new Texture(mapUrl, scene);
+        this._mercatorMaterial.disableLighting = true;
+    }
+
+    protected _createBarMesh(name: string, scene: Scene): Mesh {
+        var box = Mesh.CreateBox(name, 1, scene);
+        box.setPivotPoint(new BABYLON.Vector3(0, -0.5, 0));
+
+        return box;
+    }
+
+    public refresh(): MapGraph {
+        if (this._blockRefresh) {
+            return this;
+        }
+
+        if (!this._dataSource) {
+            this._clean();
+            return this;
+        }
+
+        const scene = this._rootNode.getScene();
+        const data = this._dataFilters ? this._dataSource.getFilteredData(this._dataFilters) : this._dataSource.data;
+        let createMesh = false;
+
+        // Do we need to create new graph or animate the current one
+        if (!this._barMeshes || this._barMeshes.length !== data.length) {
+            this._clean();
+            createMesh = true;
+            this._barMeshes = [];
+        }      
+
+        // Scan data
+        let min = 0;
+        let max = Number.MIN_VALUE;
+
+        // Check the limit of the entire series
+        this._dataSource.data.forEach(entry => {
+            if (min > entry.value) {
+                min = entry.value;
+            }
+
+            if (max < entry.value) {
+                max = entry.value;
+            }
+        });
+
+        let ratio = this._maxBarHeight / (max - min);     
+        
+        const worldMapWidth = 40;
+        const worldMapHeight = 20;
+
+        if (this._worldMap) {
+            this._worldMap.dispose();
+        }
+
+        this._worldMap = Mesh.CreateGround("WorldMap", worldMapWidth, worldMapHeight, 1, scene);
+        this._worldMap.parent = this._rootNode;
+        this._worldMap.material = this._mercatorMaterial;
+        
+        // We will generate one bar per entry
+        let index = 0;
+        data.forEach(entry => {
+
+            var barMesh: Mesh;
+            if (createMesh) {
+                barMesh = this._createBarMesh(this.name + "_box_" + index++, scene);
+                barMesh.enablePointerMoveEvents = true;
+                this._barMeshes!.push(barMesh);
+            } else {
+                barMesh = this._barMeshes![index++];
+            }
+
+            barMesh.metadata = entry;
+            barMesh.parent = this._worldMap;
+            let currentScalingYState = barMesh.scaling.y;
+            barMesh.scaling.set(this._barWidth, 0, this._barWidth);
+
+            // Lat/long convertion
+            const latitude: number = entry.latitude;
+            const longitude: number = entry.longitude;
+            const x = (longitude + 180) * (worldMapWidth / 360) - worldMapWidth / 2;
+            const latRad = latitude * Math.PI / 180;
+            const mercN = Math.log(Math.tan(Math.PI / 4 + latRad / 2));
+            const z = worldMapWidth * mercN / (2 * Math.PI);
+            barMesh.position.set(x, 0, z);
+
+            var easing = new BABYLON.CircleEase();
+            Animation.CreateAndStartAnimation("entryScale", barMesh, "scaling.y", 30, 30, currentScalingYState, entry.value * ratio, 0, easing);
+
+            this.onElementCreatedObservable.notifyObservers(barMesh);
+        });
+    
+        return this;
+    }
+
+
+    protected _clean(): void {
+        super._clean();
+        this._barMeshes = null;
+    }    
+}

src/Helpers/babylon.photoDome.ts

@@ -1,11 +1,11 @@
 module BABYLON {
     /**
      * Display a 360 degree photo on an approximately spherical surface, useful for VR applications or skyboxes.
-     * As a subclass of Node, this allow parenting to the camera with different locations in the scene.
+     * As a subclass of TransformNode, this allow parenting to the camera with different locations in the scene.
      * This class achieves its effect with a Texture and a correctly configured BackgroundMaterial on an inverted sphere.
      * Potential additions to this helper include zoom and and non-infinite distance rendering effects.
      */
-    export class PhotoDome extends Node {
+    export class PhotoDome extends TransformNode {
         private _useDirectMapping = false;
 
         /**

src/Helpers/babylon.videoDome.ts

@@ -1,11 +1,11 @@
 module BABYLON {
     /**
      * Display a 360 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
-     * As a subclass of Node, this allow parenting to the camera or multiple videos with different locations in the scene.
+     * As a subclass of TransformNode, this allow parenting to the camera or multiple videos with different locations in the scene.
      * This class achieves its effect with a VideoTexture and a correctly configured BackgroundMaterial on an inverted sphere.
      * Potential additions to this helper include zoom and and non-infinite distance rendering effects.
      */
-    export class VideoDome extends Node {
+    export class VideoDome extends TransformNode {
         private _useDirectMapping = false;
 
         /**