Better handling of CubeTexture in inspector

inspector/src/properties.ts

@@ -71,6 +71,12 @@ module INSPECTOR {
         'BaseTexture': {
             type: BABYLON.BaseTexture
         },
+        'CubeTexture': {
+            type: BABYLON.CubeTexture
+        },
+        'HDRCubeTexture': {
+            type: BABYLON.HDRCubeTexture
+        },
         'FontTexture': {
             type: BABYLON.FontTexture
         },

inspector/src/tabs/TextureTab.ts

@@ -79,12 +79,14 @@ module INSPECTOR {
             // Get the texture object
             let texture = item.adapter.object;
 
+            let imgs: HTMLImageElement[] = [];
             let img = Helpers.CreateElement('img', 'texture-image', this._imagePanel) as HTMLImageElement;
-            let img1 = Helpers.CreateElement('img', 'texture-image', this._imagePanel) as HTMLImageElement;
-            let img2 = Helpers.CreateElement('img', 'texture-image', this._imagePanel) as HTMLImageElement;
-            let img3 = Helpers.CreateElement('img', 'texture-image', this._imagePanel) as HTMLImageElement;
-            let img4 = Helpers.CreateElement('img', 'texture-image', this._imagePanel) as HTMLImageElement;
-            let img5 = Helpers.CreateElement('img', 'texture-image', this._imagePanel) as HTMLImageElement;
+            imgs.push(img);
+            
+            //Create five other images elements
+            for(let i = 0; i<5; i++){
+                imgs.push(Helpers.CreateElement('img', 'texture-image', this._imagePanel) as HTMLImageElement);
+            }
 
             if (texture instanceof BABYLON.MapTexture) {
                 // instance of Map texture
@@ -108,31 +110,8 @@ module INSPECTOR {
                 
                 // To display the texture after rendering
                 screenShotTexture.onAfterRenderObservable.add((faceIndex: number) => {
-                    let targetImg: HTMLImageElement;
-                    switch(faceIndex){
-                        case 0:
-                            targetImg = img;
-                            break;
-                        case 1:
-                            targetImg = img1;
-                            break;
-                        case 2:
-                            targetImg = img2;
-                            break;
-                        case 3:
-                            targetImg = img3;
-                            break;
-                        case 4:
-                            targetImg = img4;
-                            break;
-                        case 5:
-                            targetImg = img5;
-                            break;
-                        default:
-                            targetImg = img;
-                            break;
-                    }
-                    BABYLON.Tools.DumpFramebuffer(size.width, size.height, engine,  (data) => targetImg.src = data, "image/png");
+                    BABYLON.Tools.DumpFramebuffer(size.width, size.height, engine,  
+                        (data) => imgs[faceIndex].src = data, "image/png");
                 });
 
                 // Render the texture
@@ -140,7 +119,14 @@ module INSPECTOR {
                 scene.resetCachedMaterial();
                 screenShotTexture.render();
                 screenShotTexture.dispose();
-            } else if (texture.url) {
+            }else if(texture instanceof BABYLON.CubeTexture){
+                let i: number = 0;
+                for(let filename of (texture as BABYLON.CubeTexture)['_files']){
+                    imgs[i].src = filename;
+                    i++;
+                }
+            }
+             else if (texture.url) {
                 // If an url is present, the texture is an image
                 img.src = texture.url;
 
@@ -148,9 +134,7 @@ module INSPECTOR {
                 // Dynamic texture
                 let base64Image = texture['_canvas'].toDataURL("image/png");
                 img.src = base64Image;
-
-            }
-
+            } 
 
         }
 

inspector/test/index.js

@@ -66,6 +66,17 @@ var Test = (function () {
             }
         });
 
+        // Skybox
+        var skybox = BABYLON.Mesh.CreateBox("skyBox", 500.0, scene);
+        var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
+        skyboxMaterial.backFaceCulling = false;
+        skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("/assets/textures/skybox/TropicalSunnyDay", scene);
+        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
+        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
+        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
+        skyboxMaterial.disableLighting = true;
+        skybox.material = skyboxMaterial;
+
         var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 10.0, 9.0, scene);
         var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 2.0, 9.0, scene);//Only two segments
         var sphere3 = BABYLON.Mesh.CreateSphere("Sphere3", 10.0, 9.0, scene);
@@ -319,9 +330,6 @@ var Test = (function () {
         advancedTexture.addControl(line);    
         advancedTexture.addControl(checkbox);  
         
-        window.addEventListener('click', function() {console.log('coucou');});
-
-
         this.scene = scene;
     };
     return Test;