Currently, I am utilizing three.js to exhibit some 3D-meshes within the browser. However, I am facing a challenge where I need to execute a specific function only after certain elements have finished loading. While some models just require importing, others necessitate additional operations to be performed on them. The standard loading code incorporates adding the object to the scene. Nevertheless, for a particular mesh, I need to include panels internally (where the panel is a submesh of the fbx) utilizing a duplicate function that I have crafted. It appears that declaring an observer at load start may be necessary, yet no event exists for this purpose, and the load function only returns void.
My query is: How can I append a function to the onLoad callback (via observable or any other method) where I can access the object, specifically the THREE:Group created in the load function.
Desired process: Ideally, I wish to establish an observable for each mesh being loaded, so that once the loading process is complete, I can execute a predefined function designated for that particular observable.
UPDATE: I have modified the code to align better with my goals. Although the current functionality is operational, it does not feel optimal.
load( url: string, onLoad: ( object: Group ) => void, onProgress?: ( event: ProgressEvent ) => void, onError?: ( event: ErrorEvent ) => void ) : void;
loadFBX = (name: string, materials: TextureMapper[], onComplete, raycastable: boolean = true) => {
MeshLoader.loader.load('../../assets/meshes/' + name + '.fbx', (object: THREE.Group) => {
// irrelevant loader code...
onComplete();
});
}
The desired behavior might resemble the following code snippet, where the object is captured to enable function execution. However, I am grappling with finding a feasible solution.
this.loader.loadFBX('Loggia-panel', [
{ meshName: 'Loggia-frame', material: 'aluminium' },
{ meshName: 'Loggia-board', material: 'woodLight' }],
() => {
const mesh = this.scene.getObjectByName('Loggia-board');
for (const object of MeshManipulator.array(mesh, 33, new Vector3(0, 0, 2))) {
mesh.parent.add(object);
}
mesh.parent.position.set(-70, 0, -55);
this.scene.add(MeshManipulator.duplicate(mesh.parent, new Vector3(70, 0, -55)));
});
UPDATE: I am experimenting with an approach where I can return an observable, although I am unsure about assigning and returning it in this manner. My understanding of observables is still in progress. Nevertheless, I have realized that the observable can be returned, and the observer will manage an event when triggered by the onComplete function.
loadFBX = (fileName: string): Observable<Object3D> => {
MeshLoader.loader.load('../../assets/meshes/' + fileName + '.FBX', (object: THREE.Group) => {
// set the object3D observable and notify the observer to trigger an event
});
}