<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.