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