Javascript类中的递归调用(requestanimationframe)
我有一个简单的类,用于管理three.js中的场景。我在requestAnimationFrame循环查找函数引用时遇到问题。我知道我错过了一些基本的东西,被困在噩梦中。我是否需要使用bind或call将此引用传递给requestAnimationFrameJavascript类中的递归调用(requestanimationframe),javascript,three.js,this,Javascript,Three.js,This,我有一个简单的类,用于管理three.js中的场景。我在requestAnimationFrame循环查找函数引用时遇到问题。我知道我错过了一些基本的东西,被困在噩梦中。我是否需要使用bind或call将此引用传递给requestAnimationFrame var THREE = THREE || {}; var SceneBuddy = SceneBuddy || {}; SceneBuddy = function(scene, camera) { this.scene = sce
var THREE = THREE || {};
var SceneBuddy = SceneBuddy || {};
SceneBuddy = function(scene, camera) {
this.scene = scene;
this.camera = camera;
this.sceneClock = new THREE.Clock();
this.renderer = {};
this.resolution = {};
this.controls = {};
};
//Start Animate
SceneBuddy.prototype.startAnimate = function() {
requestAnimationFrame(this.startAnimate); //this does not work, type error
this.render.call(this);
};
//Render Function
SceneBuddy.prototype.render = function() {
var delta = this.sceneClock.getDelta();
this.controls.update(delta);
this.renderer.render(this.scene,this.camera);
};
//Setup Renderer
SceneBuddy.prototype.initRenderer = function(resolution) {
if (!Detector.webgl) {
Detector.addGetWebGLMessage();
return;
}
else {
var renderer = new THREE.WebGLRenderer({
antialias: true,
preserveDrawingBuffer: true
});
renderer.setSize(resolution.x, resolution.y);
renderer.shadowMapEnabled = true;
this.resolution = resolution;
this.renderer = renderer;
}
};
我当前使用的SceneBuddy如下所示:
var camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000);
var scene = new THREE.Scene();
var sceneBuddy = new SceneBuddy(scene, camera);
sceneBuddy.initRenderer({x: 940, y: 400});
sceneBuddy.attachRenderer(container); //attaches renderer to dom element
sceneBuddy.initControls();
sceneBuddy.startAnimate(); // broken.
传递函数时使用
bind
指定调用函数时此将是什么:
SceneBuddy.prototype.startAnimate = function() {
requestAnimationFrame(this.startAnimate.bind(this));
this.render();
};
如何实例化SceneBuddy?能否添加如何在全局对象上设置
requestAnimationFrame
函数的完整代码?另外:我希望startAnimate
函数接受时间戳参数。requestanimationframe是由three.js中包含的垫片提供的。我不确定我是否遵循您关于提供时间戳的建议?这很有效,谢谢。出于好奇,有必要这样做:this.render.call(this);或者这是多余的?以前,除非我像上面那样调用,否则this.render()不起作用。在render函数中,this上下文没有定义。可能是requestAnimationFrame中断引起的故障。我想不出一个例子,当this.render()
不起作用时,this.render.call(this)
会起作用-它们做同样的事情。如果不绑定rAF回调,则此
将是全局对象/窗口,它可能没有渲染
函数