I am working on incorporating the THREE JSONLoader into a "Scenemanager" Object that manages the addition and removal of objects and models. My main goal is to deepen my understanding of OOP, JS, and Threejs.
Within App3D (which oversees the scene), I call the function to load the resource with the appropriate path and add it to both the scene and the objects array defined in the constructor. However, I keep encountering an 'undefined' error when using this.scene, leading me to believe that I may be overlooking a fundamental concept regarding how enclosures work in OOP/JS. Any assistance would be greatly appreciated.
app.js
window.onload = () => {
let app = new App3D();
app.loadModel('/assets/models/model.json');
}
In app3D, all the initializations for Threejs are carried out; scenes, lights, camera, renderer, and an array called actors are created to store all added objects.
app3D.js
class App3D{
constructor() {
this.loader = new THREE.JSONLoader();
this.scene = new THREE.Scene();
this.objects = [];
this.createScene();
}
createScene(){
// handles camera and renderer initialization, etc.
}
loadModel(model){
this.loader.load(model, function(geometry, materials){
let material = new THREE.MultiMaterial( materials );
let mesh = new THREE.Mesh( geometry, material );
this.scene.add(mesh);
this.objects.push(mesh);
});
}
render() {
// includes request animation frame render logic, etc.
}