2013-02-16 33 views
0

嗨,我有一个webgl和使用requestAnimationFrame的问题,如果我继续调试动画是好的,但只要我让脚本自由运行我得到一个从浏览器的反应迟钝的脚本错误webGL无法响应的脚本与请求动画帧

这里是我的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> 

我的地球脚本文件

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; 
} 

和循环代码:

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; 
    } 
} 

回答

1

你打电话的递归强似只是回调函数solarLoop:

requestAnimationFrame(loopRef.solarLoop());

应be

requestAnimationFrame(loopRef.solarLoop);