HTML elements zooming with GLTF model zoom. How to prevent it?

<head>

    <title>3D Animation</title>

    <script src="Script/jquery-3.3.1.min.js"></script>

    <script src="Script/babylon.js"></script>

    <script src="Script/babylonjs.loaders.min.js"></script>

    <script src="Script/pep.js"></script>

    <script type="text/javascript" src="Script/Animate.js"></script>

    <meta name = "FrontEnd" content="3D Animation">

    <meta id="myMeta" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <style>

    html{width: 100%;height: 100%; padding: 0;margin: 0;overflow: hidden;}

   body {width: 100%;height: 100%;margin: 0; padding: 0;background: url("Images/bg_learn.jpg") center; background-size: cover; font-family: Trebuchet MS;overflow: hidden;}

    /* Footer Container Code starts */

    .tda_container{width: 100%;height: 100%;}

    /* Footer Container Code ends */

    /* Footer Code Starts */

    .tda_footer{display:inline-block;position: relative;bottom: 15%;height: 8%;width: 100%; background: url("Images/sliderBG.png"); background-size: contain;background-repeat: no-repeat;}

    /* Footer Code Ends */

    /* Play/Pause Button Code Starts */

    .tda_playBtn{width: 5%; pointer-events: all;cursor: pointer;margin-left: 10px; float: left;}

    .tda_playBtn img{width: 100%;height: auto;}

    /* Play/Pause Button Code Ends */

    /* Drop up Code starts */

    .tda_drop-up-btn{float: left;cursor: pointer;pointer-events: all;}

    .tda_drop-up-btn{width: 5%;position: relative;}

    .tda_drop-up-btn img{width: 100%;}

    .tda_drop-up-content{display: none;  position: absolute;background-color: white; width: 55px; left: 5px; text-align: center;}

    .tda_drop-up-content.active{display: block; top: -120px;background-color: white; width: 55px; left: 7px; text-align: center;}

    .tda_speed_option{ border-style: outset;border-color: azure;padding: 2px 2px;}

    .tda_speed_option:hover{color: rgb(97, 11, 105);}

    /* Drop up Code ends */

    /* Slider code starts */

    .tda_slider_container{float: left;}

    .tda_slider{width: 60%;}

    /* Slider code ends */

    /* Babylon Code starts */

    

    #renderCanvas {

            width: 100%;

            height: 100%;

            touch-action: none;

        }

    /* Babylon Code ends */

   

    </style>

</head>

<body>

    <canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->

    <div class="tda_container">

        <div class="tda_footer">

            <div class="tda_playBtn">

                <img class="tda_pauseImg" src="Images/PlayButton.png">

            </div>

            <div class="tda_slider_container">

            <input class="tda_slider" type="range" min="0" max="9.83" step="any" value="0" oninput="SetAnimationTime(this.value)">

            </div>

                <div class="tda_drop-up-btn">

                    <img class="tda_drop-up-btn-img" src="Images/Speed_Button.png" alt="CloseList">

                    <div class="tda_drop-up-content">

                        <div class="tda_speed_option" onclick="ChangeAnimSpeed(this.innerHTML)">2x</div>

                        <div class="tda_speed_option" onclick="ChangeAnimSpeed(this.innerHTML)">1.5x</div>

                        <div class="tda_speed_option" onclick="ChangeAnimSpeed(this.innerHTML)">1x</div>

                        <div class="tda_speed_option" onclick="ChangeAnimSpeed(this.innerHTML)">0.5x</div>

                    </div>

                </div>

        </div>

    </div>
    <script>
        const canvas = document.getElementById("renderCanvas"); // Get the canvas element
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        // Add your code here matching the playground format

        var createScene = function() {

        var scene = new BABYLON.Scene(engine);

        // Add a camera to the scene and attach it to the canvas

        const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);

        camera.attachControl(canvas, true);

        // Add a lights to the scene

        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

        // Load hero character and play animation

        BABYLON.SceneLoader.ImportMesh("", "Animation/", "Bee.glb", scene, function (newMeshes, particleSystems, skeletons, animationGroups) {
            var hero = newMeshes[0];

            console.log(animationGroups);

            //Scale the model down        

            hero.scaling.scaleInPlace(0.1); 

            animationGroups[0].pause();

            animationGroups.forEach(element => {

                animationTime.push(element._to); //_to gives us animation clip's playing time

            });

            CurrentAnimation = animationGroups[0];

            CurrentAnimation.speedRatio = 1.5; //Set playing speed to default 1.5

            CurrentAnimation.loopAnimation = false; //set loop to false initially

            $('.tda_slider').attr('max',animationTime[0]);

           

            //Lock camera on the character 

            camera.target = hero;

            

        });

        return scene;

        };

        const scene = createScene(); //Call the createScene function

        // Register a render loop to repeatedly render the scene

        engine.runRenderLoop(function () {

                scene.render();

        });

        // Watch for browser/canvas resize events

        window.addEventListener("resize", function () {

                engine.resize();

        });

    </script>

</body>

Blockquote

I have imported a GLTF model in the scene and have some HTML elements as UI. When I zoom in/out the model my HTML elements also zoom and go out of screen. I have added my HTML and Babylon.js code above. Kindly help.

Could you host a repro somewhere ?

Also what device are you experincing the issue with ? and how are you zomming in/out ?

Experiencing the issue on a laptop device. Using touch pad to zoom in/out

@bghgary Can you help me with this?

Here is a repo : GitHub - meitheli61/3D-Animation-Babylon.js

I have made the Babylon.js background transparent. And I have applied a background to HTML body. But it is not displayed. Also the HTML elements(button,input sliders,etc) resize when I zoom in/out on 3D model.

Can you put this in a codepen or something? It would be a lot easier to help.

Here’s a JS fiddle : https://jsfiddle.net/9d48qk13/15/

Try something like this on your HTML, body, and container:

{
	-webkit-text-size-adjust: none;
	touch-action: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: auto;
	width: auto;
}

You can also use flexbox on the children of this to position the footer, rather than relative positioning. The top container would need flex: 1 0 0 to take up the remaining height.

First of all, your canvas element has 100% height in body tag. You need either include it into container div or give to your UI main element absolute position (and maybe rewrite HTML a bit too).

This definitely seems like an HTML issue. I am no HTML expert, so I’ll let others chime in. :slight_smile: