Currently, I am in the process of constructing a ThreeJS scene and coding it as a class:
export class RenderCanvas {
#scene; // THREE.Scene()
// Other properties and methods
loadGeometries() {
/* #scene is initialized before loadGeometries is called */
var modelLoader = new FBXLoader();
for (let path of listOfObjects) {
modelLoader.load(path,
function (obj) {
obj.traverse(function (child) { /* did nothing */ });
this.#scene.add(obj);
},
function (xhr) {
console.log((xhr.loaded / xhr.total * 100) + "% loaded")
},
function (err) {
console.error("Error loading the object")
}
)
}
}
In a separate JS file, an instance of the RenderCanvas class is created and the loadGeometries() method is invoked.
The issue arises when the console shows that the model has been loaded to 100%, yet the Error loading the object message is displayed.
Upon further investigation, I observed that if I utilize the procedural approach instead of Object-Oriented Programming (OOP) and declare scene as a global variable, then the model loader functions correctly. This leads me to believe that there might be an issue with this.#scene.add(obj); not having the proper context, though I am uncertain if this hypothesis is accurate or how to resolve it.
Can you pinpoint what caused this problem and provide guidance on how to rectify it?