update all references to attachControl

Playground/src/tools/monacoManager.ts

@@ -136,7 +136,7 @@ var createScene = function() {
     camera.setTarget(BABYLON.Vector3.Zero());
 
     // This attaches the camera to the canvas
-    camera.attachControl(canvas, true);
+    camera.attachControl(true);
 
     return scene;
 };`);
@@ -155,7 +155,7 @@ class Playground {
         camera.setTarget(BABYLON.Vector3.Zero());
 
         // This attaches the camera to the canvas
-        camera.attachControl(canvas, true);
+        camera.attachControl(true);
 
         return scene;
     }
@@ -287,7 +287,7 @@ class Playground {
     camera.setTarget(BABYLON.Vector3.Zero());
 
     // This attaches the camera to the canvas
-    camera.attachControl(canvas, true);
+    camera.attachControl(true);
 
     // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
     var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
@@ -320,7 +320,7 @@ class Playground {
         camera.setTarget(BABYLON.Vector3.Zero());
 
         // This attaches the camera to the canvas
-        camera.attachControl(canvas, true);
+        camera.attachControl(true);
 
         // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
         var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

Viewer/src/managers/sceneManager.ts

@@ -672,7 +672,7 @@ export class SceneManager {
             if (this.camera && sceneConfig.disableCameraControl) {
                 this.camera.detachControl(canvas);
             } else if (this.camera && sceneConfig.disableCameraControl === false) {
-                this.camera.attachControl(canvas);
+                this.camera.attachControl();
             }
         }
 
@@ -925,7 +925,7 @@ export class SceneManager {
             }
             let canvas = this.scene.getEngine().getInputElement();
             if (canvas) {
-                this.scene.activeCamera.attachControl(canvas);
+                this.scene.activeCamera.attachControl();
             }
 
             this.camera = <ArcRotateCamera>this.scene.activeCamera!;

materialsLibrary/index.html

@@ -68,7 +68,7 @@
 			scene = new BABYLON.Scene(engine);
 
 			var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 6, 50, BABYLON.Vector3.Zero(), scene);
-			camera.attachControl(canvas, true);
+			camera.attachControl(true);
 			camera.minZ = 0.1;
 
 			// Lights

nodeEditor/src/components/preview/previewManager.ts

@@ -1,36 +1,36 @@
-import { GlobalState } from '../../globalState';
-import { NodeMaterial } from 'babylonjs/Materials/Node/nodeMaterial';
-import { Nullable } from 'babylonjs/types';
-import { Observer } from 'babylonjs/Misc/observable';
-import { Engine } from 'babylonjs/Engines/engine';
-import { Scene } from 'babylonjs/scene';
-import { Mesh } from 'babylonjs/Meshes/mesh';
-import { Vector3 } from 'babylonjs/Maths/math.vector';
-import { HemisphericLight } from 'babylonjs/Lights/hemisphericLight';
-import { ArcRotateCamera } from 'babylonjs/Cameras/arcRotateCamera';
-import { PreviewType } from './previewType';
-import { Animation } from 'babylonjs/Animations/animation';
-import { SceneLoader } from 'babylonjs/Loading/sceneLoader';
-import { TransformNode } from 'babylonjs/Meshes/transformNode';
-import { AbstractMesh } from 'babylonjs/Meshes/abstractMesh';
-import { FramingBehavior } from 'babylonjs/Behaviors/Cameras/framingBehavior';
-import { DirectionalLight } from 'babylonjs/Lights/directionalLight';
-import { LogEntry } from '../log/logComponent';
-import { PointerEventTypes } from 'babylonjs/Events/pointerEvents';
-import { Color3, Color4 } from 'babylonjs/Maths/math.color';
-import { PostProcess } from 'babylonjs/PostProcesses/postProcess';
-import { Constants } from 'babylonjs/Engines/constants';
-import { CurrentScreenBlock } from 'babylonjs/Materials/Node/Blocks/Dual/currentScreenBlock';
-import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialModes';
-import { ParticleSystem } from 'babylonjs/Particles/particleSystem';
-import { IParticleSystem } from 'babylonjs/Particles/IParticleSystem';
-import { ParticleHelper } from 'babylonjs/Particles/particleHelper';
-import { Texture } from 'babylonjs/Materials/Textures/texture';
-import { ParticleTextureBlock } from 'babylonjs/Materials/Node/Blocks/Particle/particleTextureBlock';
-import { FileTools } from 'babylonjs/Misc/fileTools';
-import { ProceduralTexture } from 'babylonjs/Materials/Textures/Procedurals/proceduralTexture';
-import { StandardMaterial } from 'babylonjs/Materials/standardMaterial';
-import { Layer } from 'babylonjs/Layers/layer';
+import { GlobalState } from "../../globalState";
+import { NodeMaterial } from "babylonjs/Materials/Node/nodeMaterial";
+import { Nullable } from "babylonjs/types";
+import { Observer } from "babylonjs/Misc/observable";
+import { Engine } from "babylonjs/Engines/engine";
+import { Scene } from "babylonjs/scene";
+import { Mesh } from "babylonjs/Meshes/mesh";
+import { Vector3 } from "babylonjs/Maths/math.vector";
+import { HemisphericLight } from "babylonjs/Lights/hemisphericLight";
+import { ArcRotateCamera } from "babylonjs/Cameras/arcRotateCamera";
+import { PreviewType } from "./previewType";
+import { Animation } from "babylonjs/Animations/animation";
+import { SceneLoader } from "babylonjs/Loading/sceneLoader";
+import { TransformNode } from "babylonjs/Meshes/transformNode";
+import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
+import { FramingBehavior } from "babylonjs/Behaviors/Cameras/framingBehavior";
+import { DirectionalLight } from "babylonjs/Lights/directionalLight";
+import { LogEntry } from "../log/logComponent";
+import { PointerEventTypes } from "babylonjs/Events/pointerEvents";
+import { Color3, Color4 } from "babylonjs/Maths/math.color";
+import { PostProcess } from "babylonjs/PostProcesses/postProcess";
+import { Constants } from "babylonjs/Engines/constants";
+import { CurrentScreenBlock } from "babylonjs/Materials/Node/Blocks/Dual/currentScreenBlock";
+import { NodeMaterialModes } from "babylonjs/Materials/Node/Enums/nodeMaterialModes";
+import { ParticleSystem } from "babylonjs/Particles/particleSystem";
+import { IParticleSystem } from "babylonjs/Particles/IParticleSystem";
+import { ParticleHelper } from "babylonjs/Particles/particleHelper";
+import { Texture } from "babylonjs/Materials/Textures/texture";
+import { ParticleTextureBlock } from "babylonjs/Materials/Node/Blocks/Particle/particleTextureBlock";
+import { FileTools } from "babylonjs/Misc/fileTools";
+import { ProceduralTexture } from "babylonjs/Materials/Textures/Procedurals/proceduralTexture";
+import { StandardMaterial } from "babylonjs/Materials/standardMaterial";
+import { Layer } from "babylonjs/Layers/layer";
 
 export class PreviewManager {
     private _nodeMaterial: NodeMaterial;
@@ -105,7 +105,7 @@ export class PreviewManager {
         this._camera.upperRadiusLimit = 10;
         this._camera.wheelPrecision = 20;
         this._camera.minZ = 0.1;
-        this._camera.attachControl(targetCanvas, false);
+        this._camera.attachControl(false);
 
         this._lightParent = new TransformNode("LightParent", this._scene);
 
@@ -212,7 +212,8 @@ export class PreviewManager {
 
                 var framingBehavior = this._camera.getBehaviorByName("Framing") as FramingBehavior;
 
-                setTimeout(() => { // Let the behavior activate first
+                setTimeout(() => {
+                    // Let the behavior activate first
                     framingBehavior.framingTime = 0;
                     framingBehavior.elevationReturnTime = -1;
 
@@ -234,7 +235,7 @@ export class PreviewManager {
                 this._handleAnimations();
                 break;
             }
-            case NodeMaterialModes.PostProcess: 
+            case NodeMaterialModes.PostProcess:
             case NodeMaterialModes.ProceduralTexture: {
                 this._camera.radius = 4;
                 this._camera.upperRadiusLimit = 10;
@@ -359,13 +360,19 @@ export class PreviewManager {
                         this._loadParticleSystem(this._globalState.previewType);
                         return;
                     case PreviewType.Custom:
-                        FileTools.ReadFile(this._globalState.previewFile, (json) =>  {
-                            this._particleSystem = ParticleSystem.Parse(JSON.parse(json), this._scene, "");
-                            this._particleSystem.start();
-                            this._prepareScene();
-                        }, undefined, false, (error) => {
-                            console.log(error);
-                        });
+                        FileTools.ReadFile(
+                            this._globalState.previewFile,
+                            (json) => {
+                                this._particleSystem = ParticleSystem.Parse(JSON.parse(json), this._scene, "");
+                                this._particleSystem.start();
+                                this._prepareScene();
+                            },
+                            undefined,
+                            false,
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
                         return;
                 }
             }
@@ -461,7 +468,7 @@ export class PreviewManager {
                     this._globalState.onIsLoadingChanged.notifyObservers(false);
 
                     this._proceduralTexture = tempMaterial.createProceduralTexture(512, this._scene);
-                   
+
                     if (this._material) {
                         this._material.dispose();
                     }
@@ -497,21 +504,23 @@ export class PreviewManager {
                     if (this._meshes.length) {
                         let tasks = this._meshes.map((m) => this._forceCompilationAsync(tempMaterial, m));
 
-                        Promise.all(tasks).then(() => {
-                            for (var mesh of this._meshes) {
-                                mesh.material = tempMaterial;
-                            }
-
-                            if (this._material) {
-                                this._material.dispose();
-                            }
-
-                            this._material = tempMaterial;
-                            this._globalState.onIsLoadingChanged.notifyObservers(false);
-                        }).catch((reason) => {
-                            this._globalState.onLogRequiredObservable.notifyObservers(new LogEntry("Shader compilation error:\r\n" + reason, true));
-                            this._globalState.onIsLoadingChanged.notifyObservers(false);
-                        });
+                        Promise.all(tasks)
+                            .then(() => {
+                                for (var mesh of this._meshes) {
+                                    mesh.material = tempMaterial;
+                                }
+
+                                if (this._material) {
+                                    this._material.dispose();
+                                }
+
+                                this._material = tempMaterial;
+                                this._globalState.onIsLoadingChanged.notifyObservers(false);
+                            })
+                            .catch((reason) => {
+                                this._globalState.onLogRequiredObservable.notifyObservers(new LogEntry("Shader compilation error:\r\n" + reason, true));
+                                this._globalState.onIsLoadingChanged.notifyObservers(false);
+                            });
                     } else {
                         this._material = tempMaterial;
                     }
@@ -546,4 +555,4 @@ export class PreviewManager {
         this._scene.dispose();
         this._engine.dispose();
     }
-}
+}

postProcessLibrary/index.html

@@ -1,124 +1,121 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
-
-<head>
-	<title>Shaders Library</title>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
-	<script src="../Tools/DevLoader/BabylonLoader.js"></script>
-
-	<style>
-		html,
-		body {
-			width: 100%;
-			height: 100%;
-			padding: 0;
-			margin: 0;
-			overflow: hidden;
-		}
-		
-		#renderCanvas {
-			width: 100%;
-			height: 100%;
-		}
-		
-		#fps {
-			position: absolute;
-			background-color: black;
-			border: 2px solid red;
-			text-align: center;
-			font-size: 16px;
-			color: white;
-			top: 15px;
-			left: 10px;
-			width: 60px;
-			height: 20px;
-		}
-	</style>
-</head>
-
-<body>
-	<div id="fps">0</div>
-	<canvas id="renderCanvas"></canvas>
-
-	<script>
-	BABYLONDEVTOOLS.Loader.load(function() {
-		if (BABYLON.Engine.isSupported()) {
-			var canvas = document.getElementById("renderCanvas");
-			var engine = new BABYLON.Engine(canvas, true);					
-			BABYLONDEVTOOLS.Loader.debugShortcut(engine);	
-			var divFps = document.getElementById("fps");
-
-			var scene = new BABYLON.Scene(engine);
-
-			var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 6, 50, BABYLON.Vector3.Zero(), scene);
-			camera.attachControl(canvas, true);
-			camera.minZ = 0.1;
-
-			// Lights
-			var hemisphericLight = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
-			
-			// Create meshes
-			var sphere = BABYLON.Mesh.CreateSphere("sphere", 48, 30.0, scene);
-
-			var skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene);
-			var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
-			skyboxMaterial.backFaceCulling = false;
-			skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("/Playground/textures/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;
-			skybox.setEnabled(false);
-			
-			// Materials
-			sphere.material = new BABYLON.StandardMaterial("std", scene);
-			sphere.material.diffuseTexture = new BABYLON.Texture("/Playground/textures/amiga.jpg", scene);
-			sphere.material.diffuseTexture.uScale = 5;
-			sphere.material.diffuseTexture.vScale = 5;
-
-			// Register a render loop to repeatedly render the scene
-			engine.runRenderLoop(function () {
-				scene.render();
-				divFps.innerHTML = engine.getFps().toFixed() + " fps";
-			});
-
-			// Resize
-			window.addEventListener("resize", function () {
-				engine.resize();
-			});
-
-			// Post-processes
-			var aaPostProcess = new BABYLON.AsciiArtPostProcess("AsciiArt", camera);
-			var drPostProcess = new BABYLON.DigitalRainPostProcess("AsciiArt", camera);
-			
-			//camera.detachPostProcess(aaPostProcess);
-			camera.detachPostProcess(drPostProcess);
-
-			var gui = new dat.GUI();
-			var options = {
-				postProcess: "asciiArt"
-			}
-
-			gui.add(options, 'postProcess', ['asciiArt', 'digitalRain']).onFinishChange(function () {
-				camera.detachPostProcess(aaPostProcess);
-				camera.detachPostProcess(drPostProcess);
-
-				skybox.setEnabled(false);
-
-				switch (options.postProcess) {
-					case "asciiArt":
-						camera.attachPostProcess(aaPostProcess);
-						break;
-					case "digitalRain":
-						camera.attachPostProcess(drPostProcess);
-						break;
-				}
-			});
-		}
-	});
-
-	</script>
-</body>
-
-</html>
+    <head>
+        <title>Shaders Library</title>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+        <script src="../Tools/DevLoader/BabylonLoader.js"></script>
+
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                margin: 0;
+                overflow: hidden;
+            }
+
+            #renderCanvas {
+                width: 100%;
+                height: 100%;
+            }
+
+            #fps {
+                position: absolute;
+                background-color: black;
+                border: 2px solid red;
+                text-align: center;
+                font-size: 16px;
+                color: white;
+                top: 15px;
+                left: 10px;
+                width: 60px;
+                height: 20px;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="fps">0</div>
+        <canvas id="renderCanvas"></canvas>
+
+        <script>
+            BABYLONDEVTOOLS.Loader.load(function () {
+                if (BABYLON.Engine.isSupported()) {
+                    var canvas = document.getElementById("renderCanvas");
+                    var engine = new BABYLON.Engine(canvas, true);
+                    BABYLONDEVTOOLS.Loader.debugShortcut(engine);
+                    var divFps = document.getElementById("fps");
+
+                    var scene = new BABYLON.Scene(engine);
+
+                    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 6, 50, BABYLON.Vector3.Zero(), scene);
+                    camera.attachControl(true);
+                    camera.minZ = 0.1;
+
+                    // Lights
+                    var hemisphericLight = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
+
+                    // Create meshes
+                    var sphere = BABYLON.Mesh.CreateSphere("sphere", 48, 30.0, scene);
+
+                    var skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene);
+                    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
+                    skyboxMaterial.backFaceCulling = false;
+                    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("/Playground/textures/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;
+                    skybox.setEnabled(false);
+
+                    // Materials
+                    sphere.material = new BABYLON.StandardMaterial("std", scene);
+                    sphere.material.diffuseTexture = new BABYLON.Texture("/Playground/textures/amiga.jpg", scene);
+                    sphere.material.diffuseTexture.uScale = 5;
+                    sphere.material.diffuseTexture.vScale = 5;
+
+                    // Register a render loop to repeatedly render the scene
+                    engine.runRenderLoop(function () {
+                        scene.render();
+                        divFps.innerHTML = engine.getFps().toFixed() + " fps";
+                    });
+
+                    // Resize
+                    window.addEventListener("resize", function () {
+                        engine.resize();
+                    });
+
+                    // Post-processes
+                    var aaPostProcess = new BABYLON.AsciiArtPostProcess("AsciiArt", camera);
+                    var drPostProcess = new BABYLON.DigitalRainPostProcess("AsciiArt", camera);
+
+                    //camera.detachPostProcess(aaPostProcess);
+                    camera.detachPostProcess(drPostProcess);
+
+                    var gui = new dat.GUI();
+                    var options = {
+                        postProcess: "asciiArt",
+                    };
+
+                    gui.add(options, "postProcess", ["asciiArt", "digitalRain"]).onFinishChange(function () {
+                        camera.detachPostProcess(aaPostProcess);
+                        camera.detachPostProcess(drPostProcess);
+
+                        skybox.setEnabled(false);
+
+                        switch (options.postProcess) {
+                            case "asciiArt":
+                                camera.attachPostProcess(aaPostProcess);
+                                break;
+                            case "digitalRain":
+                                camera.attachPostProcess(drPostProcess);
+                                break;
+                        }
+                    });
+                }
+            });
+        </script>
+    </body>
+</html>

proceduralTexturesLibrary/index.html

@@ -62,7 +62,7 @@
 			scene = new BABYLON.Scene(engine);
 
 			var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 6, 50, BABYLON.Vector3.Zero(), scene);
-			camera.attachControl(canvas, true);
+			camera.attachControl(true);
 
 			// Lights
 			var hemisphericLight = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);

sandbox/src/components/renderingZone.tsx

@@ -1,17 +1,17 @@
 import * as React from "react";
-import { GlobalState } from '../globalState';
+import { GlobalState } from "../globalState";
 
-import { Engine } from 'babylonjs/Engines/engine';
-import { SceneLoader } from 'babylonjs/Loading/sceneLoader';
+import { Engine } from "babylonjs/Engines/engine";
+import { SceneLoader } from "babylonjs/Loading/sceneLoader";
 import { GLTFFileLoader } from "babylonjs-loaders/glTF/glTFFileLoader";
-import { Scene } from 'babylonjs/scene';
-import { Vector3 } from 'babylonjs/Maths/math.vector';
-import { ArcRotateCamera } from 'babylonjs/Cameras/arcRotateCamera';
-import { FramingBehavior } from 'babylonjs/Behaviors/Cameras/framingBehavior';
-import { EnvironmentTools } from '../tools/environmentTools';
-import { Tools } from 'babylonjs/Misc/tools';
-import { FilesInput } from 'babylonjs/Misc/filesInput';
-import {Animation} from 'babylonjs/Animations/animation';
+import { Scene } from "babylonjs/scene";
+import { Vector3 } from "babylonjs/Maths/math.vector";
+import { ArcRotateCamera } from "babylonjs/Cameras/arcRotateCamera";
+import { FramingBehavior } from "babylonjs/Behaviors/Cameras/framingBehavior";
+import { EnvironmentTools } from "../tools/environmentTools";
+import { Tools } from "babylonjs/Misc/tools";
+import { FilesInput } from "babylonjs/Misc/filesInput";
+import { Animation } from "babylonjs/Animations/animation";
 
 require("../scss/renderingZone.scss");
 
@@ -35,7 +35,7 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
     initEngine() {
         this._canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
         this._engine = new Engine(this._canvas, true, { premultipliedAlpha: false, preserveDrawingBuffer: true });
-   
+
         this._engine.loadingUIBackgroundColor = "#2A2342";
 
         // Resize
@@ -46,12 +46,16 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
         this.loadAsset();
 
         // File inputs
-        let filesInput = new FilesInput(this._engine, null, 
+        let filesInput = new FilesInput(
+            this._engine,
+            null,
             (sceneFile: File, scene: Scene) => {
                 this._scene = scene;
                 this.onSceneLoaded(sceneFile.name);
             },
-            null, null, null, 
+            null,
+            null,
+            null,
             () => {
                 Tools.ClearLogCache();
                 if (this._scene) {
@@ -61,15 +65,16 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
                         this._scene.debugLayer.hide();
                     }
                 }
-            }, null, (file, scene, message) => {
-                this.props.globalState.onError.notifyObservers({ message : message});
-            });
+            },
+            null,
+            (file, scene, message) => {
+                this.props.globalState.onError.notifyObservers({ message: message });
+            }
+        );
 
         filesInput.onProcessFileCallback = (file, name, extension) => {
             if (filesInput.filesToLoad && filesInput.filesToLoad.length === 1 && extension) {
-                if (extension.toLowerCase() === "dds" ||
-                    extension.toLowerCase() === "env" ||
-                    extension.toLowerCase() === "hdr") {
+                if (extension.toLowerCase() === "dds" || extension.toLowerCase() === "env" || extension.toLowerCase() === "hdr") {
                     FilesInput.FilesToLoad[name] = file;
                     EnvironmentTools.SkyboxPath = "file:" + (file as any).correctName;
                     return false;
@@ -86,8 +91,7 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
             if (event.keyCode === 82 && event.target && (event.target as HTMLElement).nodeName !== "INPUT" && this._scene) {
                 if (this.props.assetUrl) {
                     this.loadAssetFromUrl();
-                }
-                else {
+                } else {
                     filesInput.reload();
                 }
             }
@@ -105,8 +109,7 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
 
             if (this.props.cameraPosition) {
                 camera.setPosition(this.props.cameraPosition);
-            }
-            else {
+            } else {
                 if (this._currentPluginName === "gltf") {
                     // glTF assets use a +Z forward convention while the default camera faces +Z. Rotate the camera to look at the front of the asset.
                     camera.alpha += Math.PI;
@@ -120,7 +123,7 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
                 framingBehavior.elevationReturnTime = -1;
 
                 if (this._scene.meshes.length) {
-                   camera.lowerRadiusLimit = null;
+                    camera.lowerRadiusLimit = null;
 
                     var worldExtends = this._scene.getWorldExtends(function (mesh) {
                         return mesh.isVisible && mesh.isEnabled();
@@ -136,20 +139,19 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
             camera.pinchDeltaPercentage = 0.01;
         }
 
-        this._scene.activeCamera!.attachControl(this._canvas);     
+        this._scene.activeCamera!.attachControl();
     }
 
     handleErrors() {
         // In case of error during loading, meshes will be empty and clearColor is set to red
         if (this._scene.meshes.length === 0 && this._scene.clearColor.r === 1 && this._scene.clearColor.g === 0 && this._scene.clearColor.b === 0) {
             this._canvas.style.opacity = "0";
-            this.props.globalState.onError.notifyObservers({scene: this._scene, message: "No mesh found in your scene"});
-        }
-        else {
+            this.props.globalState.onError.notifyObservers({ scene: this._scene, message: "No mesh found in your scene" });
+        } else {
             if (Tools.errorsCount > 0) {
-                this.props.globalState.onError.notifyObservers({scene: this._scene, message: "Scene loaded but several errors were found"});
+                this.props.globalState.onError.notifyObservers({ scene: this._scene, message: "Scene loaded but several errors were found" });
             }
-        //    this._canvas.style.opacity = "1";
+            //    this._canvas.style.opacity = "1";
             let camera = this._scene.activeCamera! as ArcRotateCamera;
             if (camera.keysUp) {
                 camera.keysUp.push(90); // Z
@@ -160,7 +162,7 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
                 camera.keysRight.push(69); // E
                 camera.keysRight.push(68); // D
             }
-        }      
+        }
     }
 
     prepareLighting() {
@@ -172,8 +174,7 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
             if (this._scene.environmentTexture) {
                 this._scene.createDefaultSkybox(this._scene.environmentTexture, true, (this._scene.activeCamera!.maxZ - this._scene.activeCamera!.minZ) / 2, 0.3, false);
             }
-        }
-        else {
+        } else {
             var pbrPresent = false;
             for (var i = 0; i < this._scene.materials.length; i++) {
                 if (this._scene.materials[i].transparencyMode !== undefined) {
@@ -186,8 +187,7 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
                 if (!this._scene.environmentTexture) {
                     this._scene.environmentTexture = EnvironmentTools.LoadSkyboxPathTexture(this._scene);
                 }
-            }
-            else {
+            } else {
                 this._scene.createDefaultLight();
             }
         }
@@ -198,7 +198,7 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
 
         this._scene.skipFrustumClipping = true;
 
-        this.props.globalState.onSceneLoaded.notifyObservers({scene: this._scene, filename: filename});
+        this.props.globalState.onSceneLoaded.notifyObservers({ scene: this._scene, filename: filename });
 
         this.prepareCamera();
         this.prepareLighting();
@@ -213,24 +213,26 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
         let assetUrl = this.props.assetUrl!;
         let rootUrl = Tools.GetFolderPath(assetUrl);
         let fileName = Tools.GetFilename(assetUrl);
-        SceneLoader.LoadAsync(rootUrl, fileName, this._engine).then((scene) => {
-            if (this._scene) {
-                this._scene.dispose();
-            }
+        SceneLoader.LoadAsync(rootUrl, fileName, this._engine)
+            .then((scene) => {
+                if (this._scene) {
+                    this._scene.dispose();
+                }
 
-            this._scene = scene;
+                this._scene = scene;
 
-            this.onSceneLoaded(fileName);
+                this.onSceneLoaded(fileName);
 
-            scene.whenReadyAsync().then(() => {
-                this._engine.runRenderLoop(() => {
-                    scene.render();
+                scene.whenReadyAsync().then(() => {
+                    this._engine.runRenderLoop(() => {
+                        scene.render();
+                    });
                 });
+            })
+            .catch((reason) => {
+                this.props.globalState.onError.notifyObservers({ message: reason.message });
+                //TODO sceneError({ name: fileName }, null, reason.message || reason);
             });
-        }).catch((reason) => {
-            this.props.globalState.onError.notifyObservers({ message : reason.message});
-            //TODO sceneError({ name: fileName }, null, reason.message || reason);
-        });
     }
 
     loadAsset() {
@@ -249,13 +251,13 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
 
         // This is really important to tell Babylon.js to use decomposeLerp and matrix interpolation
         Animation.AllowMatricesInterpolation = true;
-    
+
         // Setting up some GLTF values
         GLTFFileLoader.IncrementalLoading = false;
-        SceneLoader.OnPluginActivatedObservable.add((plugin) =>{
+        SceneLoader.OnPluginActivatedObservable.add((plugin) => {
             this._currentPluginName = plugin.name;
             if (this._currentPluginName === "gltf") {
-                (plugin as GLTFFileLoader).onValidatedObservable.add((results) =>{
+                (plugin as GLTFFileLoader).onValidatedObservable.add((results) => {
                     if (results.issues.numErrors > 0) {
                         this.props.globalState.showDebugLayer();
                     }
@@ -277,9 +279,8 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
     public render() {
         return (
             <div id="canvasZone" className={this.props.expanded ? "expanded" : ""}>
-                <canvas id="renderCanvas" touch-action="none" 
-                    onContextMenu={evt => evt.preventDefault()}></canvas>
+                <canvas id="renderCanvas" touch-action="none" onContextMenu={(evt) => evt.preventDefault()}></canvas>
             </div>
-        )
+        );
     }
-}
+}

tests/es6Modules/minGridMaterial.ts

@@ -21,7 +21,7 @@ var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
 camera.setTarget(Vector3.Zero());
 
 // This attaches the camera to the canvas
-camera.attachControl(canvas, true);
+camera.attachControl(true);
 
 // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
 var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);

tests/es6Modules/minStandardMaterial.ts

@@ -20,7 +20,7 @@ var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
 camera.setTarget(Vector3.Zero());
 
 // This attaches the camera to the canvas
-camera.attachControl(canvas, true);
+camera.attachControl(true);
 
 // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
 var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
@@ -39,4 +39,4 @@ var ground = Mesh.CreateGround("ground1", 6, 6, 2, scene);
 
 engine.runRenderLoop(() => {
     scene.render();
-});
+});