Here is a code snippet where I am trying to replace all main references in animate with this references, in order to avoid using a global variable inside the Main class:
class Main {
constructor(idDiv) {
this.div = document.getElementById(idDiv);
this.sceneManager = new SceneManager(this.div);
}
animate() {
console.log('Main::animate::this', this);
console.log('Main::animate::main', main);
requestAnimationFrame(main.animate);
main.sceneManager.animate();
}
execute() {
new ManageEvents(this.div, this.sceneManager);
const atla = new Atla();
const repository = new Repository();
const loadData = new LoadData(atla, repository);
loadData.load(this.sceneManager);
console.log('Main::execute::this', this);
console.log('Main::execute::main', main);
this.animate(main.sceneManager);
}
}
const main = new Main('original');
main.execute();
The existing code creates an animation loop that utilizes THREEjs' animate to render a scene.
The current logs are as follows:
In execute:
Main::execute::this Main {div: div#original.column, sceneManager: SceneManager}div: div#original.columnsceneManager: SceneManager {div: div#original.column, camera: PerspectiveCamera, scene: Scene, controls: T…E.TrackballControls, renderer: WebGLRenderer}__proto__: Object
Main::execute::main Main {div: div#original.column, sceneManager: SceneManager}
In animate, first call:
Main::animate::this Main {div: div#original.column, sceneManager: SceneManager}
Main.js:16 Main::animate::main Main {div: div#original.column, sceneManager: SceneManager}
In animate, subsequent calls:
Main::animate::this null
Main.js:16 Main::animate::main Main {div: div#original.column, sceneManager: SceneManager}
As observed, in the initial call both this and main are identical in both execute and animate functions. However, in subsequent calls, 'this' becomes null in animate while 'main' remains an instance of the Main class. This could be due to the line:
requestAnimationFrame(main.animate);
Which causes the loss of 'this.'
In an attempt to replace main references, I made the following changes:
class Main {
constructor(idDiv) {
this.div = document.getElementById(idDiv);
this.sceneManager = new SceneManager(this.div);
}
animate(main) {
console.log('Main::animate::this', this);
console.log('Main::animate::main', main);
requestAnimationFrame(main.animate);
main.sceneManager.animate();
}
execute() {
new ManageEvents(this.div, this.sceneManager);
const atla = new Atla();
const repository = new Repository();
const loadData = new LoadData(atla, repository);
loadData.load(this.sceneManager);
console.log('Main::execute::this', this);
console.log('Main::execute::main', main);
this.animate(this);
}
}
const main = new Main('original');
main.execute();
The output is as below:
First call:
Main::execute::this Main {div: div#original.column, sceneManager: SceneManager}
Main.js:34 Main::execute::main Main {div: div#original.column, sceneManager: SceneManager}
Main.js:15 Main::animate::this Main {div: div#original.column, sceneManager: SceneManager}
Main.js:16 Main::animate::main Main {div: div#original.column, sceneManager: SceneManager}
Second call:
Main::animate::this null
Main.js:16 Main::animate::main 697.568
Main.js:17 Uncaught TypeError: Failed to execute 'requestAnimationFrame' on 'Window': The callback provided as parameter 1 is not a function.
at animate (Main.js:17)
This issue seems to be related to the line:
requestAnimationFrame(main.animate);
To resolve this, I attempted:
...
requestAnimationFrame(main.animate(main));
...
However, this resulted in an infinite loop and obscured visibility to the scene. The logs also showed:
Main::execute::this Main {div: div#original.column, sceneManager: SceneManager}
Main.js:34 Main::execute::main Main {div: div#original.column, sceneManager: SceneManager}
Main.js:15 Main::animate::this Main {div: div#original.column, sceneManager: SceneManager}
Main.js:16 Main::animate::main Main {div: div#original.column, sceneManager: SceneManager}
Main.js:15 Main::animate::this Main {div: div#original.column, sceneManager: SceneManager}
Main.js:16 Main::animate::main Main {div: div#original.column, sceneManager: SceneManager}
Main.js:15 Main::animate::this Main {div: div#original.column, sceneManager: SceneManager}
Main.js:16 Main::animate::main Main {div: div#original.column, sceneManager: SceneManager}
Main.js:15 Main::animate::this Main {div: div#original.column, sceneManager: SceneManager}
Main.js:16 Main::animate::main Main {div: div#original.column, sceneManager: SceneManager}
Please assist me with what I might be doing wrong or how I can rectify this issue?