TechQA.

Moving mesh on the screen without being in torn animation

402 views Asked by At 
    var leftf;
                    var rightf;
                    $(document).keyup(function() {

                        clearInterval(leftf);
                        clearInterval(rightf);                              
                    });

                        $(document).keydown(function (e) {


                            if (e.which == 37) {
                                // Left Arrow Pushed
                                leftf=setInterval(function(){
                                meshes[0].rotation.y=Math.PI/4;
                                if(meshes[0].position.x>-3.5)meshes[0].position.x-=0.1;
                                console.log(meshes[0].position.x);
                                },1000/engine.getFps());

                            } else if (e.which == 39) {
                                // Right Arrow Pushed
                                meshes[0].rotation.y=3*Math.PI/4;
                                //meshes[0].translate(BABYLON.Axis.X, Math.sin(v), BABYLON.Space.WORLD);
                                rightf=setInterval(function(){                                                          
                                meshes[0].position.x+=0.1;
                                },1000/engine.getFps());
                            }
});

Can you please tell me why this is not working in the browser although it is in my opinion the right way of moving the mesh on the screen without being torn (torn animation)?

It starts moving the mesh correctly but after a while the mesh is flying around without the logic. Is setting and clearing the Interval such a problem for the browsers?

Thank you.

javascript babylonjs
Original Q&A
1

There are 1 answers

0
Jančo Bančo On 
Now it is running, perhaps I have a solution:

<!DOCTYPE html>
<html><head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Babylon.js sample code keyboard arrows</title>
        <!-- Babylon.js -->
        <script src="index_subory/hand.js"></script>
        <script src="index_subory/cannon.js"></script>
        <script src="index_subory/oimo.js"></script>
        <script src="index_subory/babylon.2.0.debug.js"></script>
        <script src="index_subory/jquery.min.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>
    <div id="idecko" style="background-color:grey;color:white;font-weight:bold;margin-left:auto;margin-right:auto;text-align:center;">text </div>
    <canvas height="782" width="1440" id="renderCanvas"></canvas>
    <script>
        var canvass = $('#renderCanvas');   
        // check to see if we can do webgl
// ALERT FOR JQUERY PEEPS: canvas is a jquery obj - access the dom obj at canvas[0]
var dcanvas = canvass[0];
expmt = false;
if ("WebGLRenderingContext" in window) {
    //alert("browser at least knows what webgl is.");
}
// some browsers don't have a .getContext for canvas...
try { 
    gl = dcanvas.getContext("webgl"); 
    }catch (x){ 
        gl = null; 
        }
if (gl == null) {
    try { 
        gl = dcanvas.getContext("experimental-webgl"); 
        }catch (x){ 
            gl = null; 
            }
if (gl == null) { 
    //console.log('but can\'t speak it'); 
    }else { 
        expmt = true; //alert('webgl experimentally.'); 
        }
} else {
    //alert('webgl natively');
}

if (gl || expmt) {
//alert("loading webgl content.");
} else {
alert("CHYBA: Váš prehliadač nepodporuje WebGL, ľutujeme. (ERROR: Your browser does not support WebGL, sorry.)");
canvas.remove();
}


         if (BABYLON.Engine.isSupported()) {
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);
        var scene = new BABYLON.Scene(engine);



        // Skybox
    var skybox = BABYLON.Mesh.CreateBox("skyBox", 800.0, scene);
    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("index_subory/skybox/cubemap", scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skybox.material = skyboxMaterial;




         //var sphere = BABYLON.Mesh.CreateSphere("sphere", 1.0, 1.0, scene);



        var createScene = function () {


            // setup environment
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 10,80), scene);
            var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, -5), scene);
            var light2 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 10, -80), scene);




            var turnLeft = false; var turnRight = false;
            var accelerate = false; var breaking = false;


            BABYLON.SceneLoader.ImportMesh("Cube.001", "index_subory/", "jet2b.babylon", scene,function(meshes){

                meshes[0].position.x = Math.round((Math.random() * 1) + 0);
                meshes[0].position.y = Math.round((Math.random() * 1) + 0);



                var speed = 0;
    scene.registerBeforeRender(function() {
        if (scene.isReady()) {            
            camera.target = sphere.position;   
            speed=0.02;            
           if (turnRight) { 
               meshes[0].rotation.y=3*Math.PI/4;                       
               meshes[0].position.x += speed;
           }                                       
           if (turnLeft) {  
               meshes[0].rotation.y=Math.PI/4;         
               meshes[0].position.x -= speed; 
           }           
           if (breaking) {  
               meshes[0].rotation.y=Math.PI/2;         
               meshes[0].position.y -= speed; 
           }           
           if (accelerate) {
               meshes[0].rotation.y=Math.PI/2;             
               meshes[0].position.y += speed; 
           }                                
        }

    });




                var sphere = BABYLON.Mesh.CreateSphere("sphere", 0.5, 0.5, scene);
                        var simpleMaterial = new BABYLON.StandardMaterial("texture2", scene);
                        simpleMaterial.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green
                        sphere.material=simpleMaterial;
                        sphere.position.x = Math.floor((Math.random() * 2) );
                        sphere.position.y = Math.floor((Math.random() * 2) );
                        sphere.position.z=3;



                var myVar2;

                function myFunction2() {
                    myVar = setInterval(function(){ 
                        //sphere.translate(BABYLON.Axis.Z, -0.1, BABYLON.Space.WORLD);
                        sphere.position.z-=0.1;                     
                        var delta=0.2;

                        if(Math.abs(Math.round(meshes[0].position.x-sphere.position.x))<=delta&&Math.abs(Math.round(meshes[0].position.y-sphere.position.y))<=delta&&Math.abs(Math.round(meshes[0].position.z-sphere.position.z))<=delta){
                            $('#idecko').html('<span style=\'background-color:yellow;color:red;\'>BANG! Červeného trpaslíka trafila zelená planéta! (Red dwarf shot by green planet!)</span>');
                            //$('#idecko').append("<embed src='index_subory/explosion.mp3' hidden=true autostart=true loop=false>");                            
                            if(navigator.userAgent.indexOf("Trident")==-1)var audio = new Audio('index_subory/explosion.mp3');
                            if(navigator.userAgent.indexOf("Trident")!=-1)var audio = new Audio('index_subory/explosion.wav');
                            audio.loop = false;
                            audio.play();
                            simpleMaterial.diffuseColor = new BABYLON.Color3(0, 0, 1);//Green
                            sphere.material=simpleMaterial;
                        }else{
                            $('#idecko').html('<span style=\'background-color:grey;color:white;\'>Unikaj červený trpaslík (šípky na klávesnici)! (Run away red dwarf (keyboard arrows)!)</span>');

                        }


                        if(sphere.position.z<-5){
                                sphere.position.x = Math.floor((Math.random() * 2) );
                                sphere.position.y = Math.floor((Math.random() * 2) );
                                sphere.position.z=3;
                                simpleMaterial.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green
                                sphere.material=simpleMaterial;
                            }
                         }, 50);
                }

                function myStopFunction2() {
                    clearTimeout(myVar2);
                }       


                myFunction2();      




                $(document).keyup(function (evt) {
                    if (evt.keyCode == 37 || evt.keyCode == 39) {
            turnLeft = false;
            turnRight = false;
        }

        if (evt.keyCode == 38 || evt.keyCode == 40) {
            accelerate = false;
            breaking = false;
        }

                   });

                $(document).keydown(function (evt) {
                            if (!scene)
            return;

        //console.log(evt.keyCode);

        if (evt.keyCode == 32) {

        }


        //Key LEFT
        if (evt.keyCode == 37) {
            turnLeft = true;
            turnRight = false;

        }

        //Key RIGHT
        if (evt.keyCode == 39) {
            turnLeft = false;
            turnRight = true;
        }

        //Key UP
        if (evt.keyCode == 38) {
            accelerate = true;
            breaking = false;

        }

        //Key BACK
        if (evt.keyCode == 40) {
            breaking = true;
            accelerate = false;
        }

                  }); 

                });

           return scene;
        }


        var scene = createScene();

    var assetsManager = new BABYLON.AssetsManager(scene);
    //var meshTask = assetsManager.addMeshTask("jet2 task", "", "./index_subory/", "jet2.babylon");
    var textTask0 = assetsManager.addTextFileTask("text task0", "./index_subory/jet2b.babylon");
    var textTask1 = assetsManager.addTextFileTask("text task1", "./index_subory/hand.js");
    var textTask2 = assetsManager.addTextFileTask("text task2", "./index_subory/cannon.js");
    var textTask3 = assetsManager.addTextFileTask("text task3", "./index_subory/oimo.js");
    var textTask4 = assetsManager.addTextFileTask("text task4", "./index_subory/babylon.2.0.debug.js");
    var textTask5 = assetsManager.addTextFileTask("text task5", "./index_subory/jquery.min.js"); 
    var binaryTask1 = assetsManager.addBinaryFileTask("binary task 1", "./index_subory/explosion.mp3");   
    var binaryTask2 = assetsManager.addBinaryFileTask("binary task 2", "./index_subory/explosion.wav");   
    var binaryTask3 = assetsManager.addBinaryFileTask("binary task 3", "./index_subory/skybox/cubemap_nx.jpg");   
    var binaryTask4 = assetsManager.addBinaryFileTask("binary task 4", "./index_subory/skybox/cubemap_ny.jpg");   
    var binaryTask5 = assetsManager.addBinaryFileTask("binary task 5", "./index_subory/skybox/cubemap_nz.jpg");   
    var binaryTask6 = assetsManager.addBinaryFileTask("binary task 6", "./index_subory/skybox/cubemap_px.jpg");   
    var binaryTask7 = assetsManager.addBinaryFileTask("binary task 7", "./index_subory/skybox/cubemap_py.jpg");   
    var binaryTask8 = assetsManager.addBinaryFileTask("binary task 8", "./index_subory/skybox/cubemap_pz.jpg");   



    //engine.displayLoadingUI();
    engine.loadingUIText = "Loading... (Načítavanie...)";
    assetsManager.onTaskSuccess = function (task) {
            // Do something with task.data.
            //engine.hideLoadingUI();
        };
    assetsManager.onTaskError = function (task) {
            // Do something with task.data.
            alert('Error with loading by assetsManager...');                
        };
    assetsManager.onFinish = function (task) {
    //engine.hideLoadingUI();
        engine.setSize($(window).width(), $(window).height());  
        engine.runRenderLoop(function () {
        scene.render();

        });
    };

    assetsManager.load();
        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
        }else{
            alert("Chyba: Nemôžem spustiť WebGL. (Error: Can't run WebGL.)");
        }
    </script>


</body></html>

Related Questions in JAVASCRIPT

Related Questions in BABYLONJS

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions