As the parser in the GLTF loader works asynchronously, I created a promise? What do I do now? It is still not functioning properly

Questions
, , , ,
1

I have a function that needs to be executed. I used the GLTF parser to retrieve the vertices and faces. However it does not execute in the right time. This is the function that I currently have.

public parseGltfBlobs(toAdd: asmTreeNodeScene[]) {
        const loader = new GLTFLoader();

        for (let i = 0; i < toAdd.length; i++) {
            let componentId: number = toAdd[i].componentId;

            let isPart: boolean = toAdd[i].type == "part";
            
            // Handle surface mesh requests for parts for server endpoint in json format
            if (isPart) {       
                let surfaceMeshKey: string = componentId.toString() + "." + this.asmStateServ.decimation.toString();

                // Grab the byte array
                let gltfBytes = <ArrayBuffer>this.assemblyFetchServ.surfaceMeshesGltf.get(surfaceMeshKey)['gltfBytes'];
            
                return new Promise((resolve, reject) => {
                    
                    loader.parse(gltfBytes, "", gltf => {
                    let mesh;
                    let vertices;
                    let faces;
                    
                    mesh = <THREE.Mesh>gltf.scene.children[0];
                    vertices = mesh.geometry.attributes.position.array;
                    faces = mesh.geometry.index.array;

                    let surfaceMesh: Object = {
                        "component_id": componentId,
                        "vertices": vertices,
                        "faces": faces,
                    }
                    resolve(this.assemblyFetchServ.surfaceMeshes.set(surfaceMeshKey, surfaceMesh));
                    console.log("Stored data  in surfaceMeshes map")
                    // Emit finished event
                }
               )
            })}
        }
    }

The function is being called in the following way.

this.requestMissingResources(toAdd, this.isGLTF).subscribe(
            () => {
            },
            (err) => {
                console.log(err);
            },
            async () => {
                if(this.isGLTF) {
                    console.log("Parsing gltf blobs");
                    await this.parseGltfBlobs(toAdd);
                    console.log("End of parsing gltf blobs")
                }

However, I still do not receive the output promise. I was wondering why that is and what I am doing wrong out here? It would mean a lot if the correct code is given to me as that would help me out a lot as I am very new to this. For your information, I need the ‘surfacemesh’ data in the format that is stated.

2

I do this

return fred(file); //initiate load
    async function fred(file) {
        const loader = new GLTFLoader();
        await loader.loadAsync(file)
            .then(function (loadedModel) { //add loaded gltf model asset
                console.log('async completed Model spec: ', loadedModel); 
            });
    }```