Running an animationframe request from a new object

Question

I have problems with animation. This is inside var ob1 = function() {}; . When called, it works for a while, and then I get an Uncaught RangeError: Maximum call stack size exceeded error. However, in the same structure there are no problems performed outside the facility.

 /////////////// Render the scene /////////////// this.render = function (){ renderer.render(scene,camera); if(isControls == true) controls.update(clock.getDelta()); this.animate(); //console.log(true); requestAnimationFrame(this.render()); } /////////////// Update objects /////////////// this.animate = function (){ console.log("!"); } 

Answer 1

You should pass a reference to the requestAnimationFrame function, and not call the function:

 requestAnimationFrame(this.render); 

Since you are using this inside render , you probably need bind :

 requestAnimationFrame(this.render.bind(this)); 

Your version causes a stack overflow (the function calls itself synchronously until the call stack is full).

---