Lately, I've been working on creating a versatile SceneManager class that not only manages scenes but also handles rendering.
class SceneManager {
constructor() {
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera( 60, window.innerWidth/window.innerHeight, 0.1, 10000 );
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize( window.innerWidth, window.innerHeight );
}
CreateScene(){
document.body.appendChild( this.renderer.domElement );
this.scene.add(new THREE.AmbientLight(0x777777));
}
RenderCycle(){
requestAnimationFrame(this.RenderCycle());
this.renderer.render(this.scene, this.camera);
}
}
I have been implementing the methods like this:
var sceneManager = new SceneManager();
sceneManager.CreateScene();
sceneManager.RenderCycle();
Unfortunately, an error has popped up:
scenemanager.class.js:18 Uncaught RangeError: Maximum call stack size exceeded
at SceneManager.RenderCycle (scenemanager.class.js:18)
at SceneManager.RenderCycle (scenemanager.class.js:19)
at SceneManager.RenderCycle (scenemanager.class.js:19)
at SceneManager.RenderCycle (scenemanager.class.js:19)
at SceneManager.RenderCycle (scenemanager.class.js:19)
My understanding is that it's due to the immediate invocation of RenderCycle(), but I'm unsure how else to approach it.
Any assistance or advice on this matter would be highly appreciated. Thanks!