0 
    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());
                            }
});

你能告诉我为什么这在浏览器中不起作用，尽管我认为这是在屏幕上移动网格而不被撕裂（撕裂动画）的正确方法？

它开始正确移动网格，但过了一会儿，网格在没有逻辑的情况下四处飞行。设置和清除时间间隔对浏览器来说是个问题吗？

谢谢你。

4

1 回答 1

0 
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>
于 2015-06-17T17:26:48.383 回答