webGL unresponsive script with requestAnimationFrame

StackOverflow https://stackoverflow.com/questions/14914338

题

Hi, I have a problem with webgl and using requestAnimationFrame, if i continue in debug the animation is fine but as soon as i let the script run freely i get an unresponsive script error from the browser

here is my html : 

<!DOCTYPE html>
<html>
<head>
    <title>Earth to WebGL</title>
    <script type="text/javascript" src="../Rec/three.min.js"></script>
    <script type="text/javascript" src="../Rec/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="../Rec/RequestAnimationFrame.js"></script>
    <script type="text/javascript" src="ex_loop.js"></script>
    <script type="text/javascript" src="Earth.js"></script>
    <script>

    var loopProg = null;
    var renderer = null;
    var scene = null;
    var camera = null;
    var mesh = null;
    var earth = null;

    $(document).ready(
            function() {
                var container = document.getElementById("container");
                renderer = new THREE.WebGLRenderer({ antialias: true } );
                renderer.setSize(container.offsetWidth,container.offsetHeight);
                container.appendChild(renderer.domElement)
                scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera( 45,
                        container.offsetWidth / container.offsetHeight, 1, 4000 );

                earth = new Earth();
                scene.add(earth.getEarth);
                camera.position.set( 0, 0, 3 );

                loopProg = new loopProgram();
                loopProg.add(function(){earth.update()});
                loopProg.add(function(){renderer.render( scene, camera );});
                loopProg.solarLoop();
            }
    );


</script>

my earth script file

function Earth()
{


   this.getEarth = init();

function init()
{
    var map = {map:THREE.ImageUtils.loadTexture("images/earth_surface_2048.jpg")};
    var material = new THREE.MeshBasicMaterial(map);
    var geometry = new THREE.SphereGeometry(1,32,32);
    return new THREE.Mesh(geometry, material);
}

this.update = function()
{
    this.getEarth.rotation.x += .01;
}

    return this;
}

and the loop code : 

function loopProgram()
{
    this.functionsToRun = new Array();
    this.solarLoop= function()
    {
        jQuery.each(this.functionsToRun, function(index,value)
        {
            value ? value() : null;
        });
        var loopRef = this;
        requestAnimationFrame(loopRef.solarLoop());
    }

    this.add = function(func)
    {
        this.functionsToRun[this.functionsToRun.length] = func;
    }
}
有帮助吗？

解决方案

You're calling solarLoop recursively instead of passing just the callback function:

requestAnimationFrame(loopRef.solarLoop());

should be

requestAnimationFrame(loopRef.solarLoop);

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top