Search the Community
Showing results for tags 'modelkey'.
Found 1 result
-
Hi! First time posting. I ran in to an issue I've battled with for a several days. When calling the canvas2d.dispose the error: "Uncaught TypeError: Cannot read property 'modelKey' of null" sometimes occur. I did a fair bit of research but I don't see that I am calling anything incorrecly. While posting I realised that I can probably circumvent the problem by creating a "RepositionGUI" function but I would like to understand the problem. In the example the error occurs in chrome after the button is pressed. <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <!--- link to the last version of babylon ---> <script src="babylon.2.5-alpha.js"></script> <style> html, body { overflow: hidden; width : 100%; height : 100%; margin : 0; padding : 0; } #renderCanvas { width : 100%; height : 100%; touch-action: none; } </style> </head> <body> <canvas id="renderCanvas"></canvas> <script> window.addEventListener('DOMContentLoaded', function() { // get the canvas DOM element var canvas = document.getElementById('renderCanvas'); // load the 3D engine var engine = new BABYLON.Engine(canvas, true); var scene; var canvas2d; var createScene = function() { scene = new BABYLON.Scene(engine); var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene); var cam = new BABYLON.ArcRotateCamera("ArcRotateCamera", Math.PI / 3, Math.PI / 3, 200, new BABYLON.Vector3(-10, 30, 10), scene); cam.attachControl(canvas); scene.executeWhenReady(createGUI); return scene; }; var createGUI = function() { canvas2d = new BABYLON.ScreenSpaceCanvas2D(scene, { id: "ScreenCanvas", enableInteraction: true }); //buttons var button1 = new BABYLON.Rectangle2D({ parent: canvas2d, id: "button1", x: canvas.width /2 - 150, y: canvas.height / 2 , width: 300, height: 80, fill: "#ffffffff", border: "#DADDDEFF", borderThickness: 8, children: [new BABYLON.Text2D("Button 1", { fontName: "32pt Arial", defaultFontColor: new BABYLON.Color4(0.2, 0.2, 0.2, 2), marginAlignment: "h: center, v: center", fontSuperSample: true })] }); var text1 = new BABYLON.Rectangle2D({ parent: canvas2d, id: "text1", x: canvas.width /2 - 125, y: canvas.height / 2 - 300, width: 250, height: 80, fill: "#e4e4e4ff", border: "#DADDDEFF", borderThickness: 8, children: [ new BABYLON.Text2D("Text 1", { fontName: "24pt Arial", defaultFontColor: new BABYLON.Color4(0.2, 0.2, 0.2, 2), marginAlignment: "h: center, v: center", fontSuperSample: true }) ] }); var text2 = new BABYLON.Rectangle2D({ parent: canvas2d, id: "text2", isVisible: false, x: canvas.width /2 - 125, y: canvas.height / 2 - 300, width: 250, height: 80, fill: "#e4e4e4ff", border: "#DADDDEFF", borderThickness: 8, children: [ new BABYLON.Text2D("TempText2", { fontName: "24pt Arial", defaultFontColor: new BABYLON.Color4(0.2, 0.2, 0.2, 2), marginAlignment: "h: center, v: center", fontSuperSample: true }) ] }); /*specific button function*/ button1.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPickTrigger, text1, "levelVisible", false)); button1.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPickTrigger, text2, "levelVisible", true)); }; // call the createScene function scene = createScene(); // run the render loop engine.runRenderLoop(function() { scene.render(); }); // the canvas/window resize event handler window.addEventListener('resize', function() { engine.resize(); canvas2d.dispose();//this is not working, some of the canvas is not disposed, textfield disapears bottommenu does not createGUI(); }); }); </script> </body> </html>
