Рекурсивный вызов в классе Javascript (requestanimationframe)


У меня есть простой класс, который я использую для управления сценами в трех.JS. У меня возникли проблемы с циклом requestAnimationFrame, который находит ссылку на функцию. Я знаю, что упускаю что-то фундаментальное здесь, пойманный в ловушку какого-то этого кошмара. Мне нужно, чтобы использовать bind или позвонить, чтобы пройти это ссылка на метод requestAnimationFrame?

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

Я использую в настоящее время using 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.
1 6

1 ответ:

Используйте bind при передаче функции, чтобы указать, что this будет при вызове функции:

SceneBuddy.prototype.startAnimate = function() {
    requestAnimationFrame(this.startAnimate.bind(this));
    this.render();
};