mkadirtan

GUI Blocks Navigation

Recommended Posts

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");
  1. My navigation system is broken, even though I have a free camera, I can't navigate the scene.
  2. 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:

  1. Running on Firefox and Chrome,
  2. 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>

 

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.