mkadirtan Posted September 4, 2018 Share Posted September 4, 2018 Hello everybody, I'm trying to add a simple GUI to my project. However, as soon as this line of code is inserted: let advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI"); My navigation system is broken, even though I have a free camera, I can't navigate the scene. I have following errors in my console: Quote TypeError: e.isPointerCaptured is not a function[Learn More] Source map error: request failed with status 404 Resource URL: http://localhost:63342/filezillaproject/src/js/babylon.gui.min.js Source Map URL: babylon.gui.min.js.map[Learn More] I've tried: Running on Firefox and Chrome, Local server and Web server. Full source of my application: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Scene Design</title> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> <script src="src/js/babylon.js"></script> <script src="src/js/babylon.gui.min.js"></script> <script src="src/js/TimelineLite.min.js"></script> <script src="src/js/TweenLite.min.js"></script> </head> <body> <canvas id="renderCanvas"></canvas> <script> let scene, tl, sphere, ground, Plane; let slider; let createScene = function(){ // ENGINE, SCENE, CAMERA, LIGHTS let canvas = document.getElementById("renderCanvas"); let engine = new BABYLON.Engine(canvas, true); let scene = new BABYLON.Scene(engine); let camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(2,4,-3), scene); camera.setTarget(BABYLON.Vector3.Zero()); camera.attachControl(canvas, true); let light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1,-1,4), scene); let light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, 4), scene); //OBJECTS sphere = new BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene); sphere.position.y = 1; Plane = new BABYLON.MeshBuilder.CreatePlane("Plane", {width: 6, size: 6}, scene); Plane.position.z = 5; //BACKGROUND, GROUND scene.clearColor = new BABYLON.Color3(0,0.8,0.6); ground = BABYLON.Mesh.CreateGround("ground", 200, 200, 1, scene, false); let groundMaterial = new BABYLON.StandardMaterial("ground", scene); groundMaterial.specularColor = BABYLON.Color3.Black(); ground.material = groundMaterial; //LOOP engine.runRenderLoop(function(){ scene.render(); }); //RESIZE window.addEventListener("resize", function(){ engine.resize(); }); //GUI //PROBLEMATIC CODE HERE let advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI"); //PROBLEMATIC CODE HERE return scene; }; //TIMELINE scene = createScene(); tl = new TimelineLite(); tl.fromTo(sphere.position, 3, {x: -2}, {x: +2}); </script> </body> </html> Quote Link to comment Share on other sites More sharing options...
Guest Posted September 4, 2018 Share Posted September 4, 2018 Hello can you make sure that your babylon.js and babylon.gui.js are from the same version? (latest is 3.3-beta5) mkadirtan 1 Quote Link to comment Share on other sites More sharing options...
mkadirtan Posted September 4, 2018 Author Share Posted September 4, 2018 Yep! This solved my problem, thank you very much! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.