Getting list of vertices using gltf loader?

I have a function that receives JSON data on surface mesh from a server end-point and it looks this way and works perfectly.

public getSurfaceMeshJSON(componentId: number, decimate: number): Observable<any> {
        let activeUrl = new URL(this.serverAddress);
        let surfaceMeshKey: string = componentId.toString() + "." + decimate.toString();
        let targetUrl = new URL(activeUrl.origin + environment.apiBasePath + '/surface_mesh/' + componentId + "?decimate=" + decimate);
        let params:{ [name: string]: string }  = {};

        if (this.customLookupAddress != "") {
            params['lookup']=this.customLookupAddress;
        }
        if (this.customGatewayAddress != "") {
            params['gateway']=this.customGatewayAddress;
        }
        if (params){
            Object.keys(params).forEach(key => targetUrl.searchParams.append(key, params[key]))
        }

        const data$ = new Observable(observer => {
            fetch(targetUrl.toString(), {headers: { 'responseType': 'json'}, method: 'GET'})
              .then(response => response.json()) 
              .then(surfaceMesh => {
                observer.next(surfaceMesh);
                observer.complete();
              })
              .catch(err => observer.error(err));
          });

        return data$.pipe(
            map((surfaceMesh) => {
                this.surfaceMeshes.set(surfaceMeshKey, surfaceMesh);
            }
        )
       
        )    
    }

The above function works perfectly fine. I need to create a similar function that instead of receiving JSON data format, it receives GLTF data format (octet-stream) from the end-point. I was wondering how would that be looking? I created something like this but I don’t think it’s fully correct.

 public getSurfaceMeshGLTF(componentId: number, decimate: number): Observable<any> {
        let activeUrl = new URL(this.serverAddress);
        let surfaceMeshKey: string = componentId.toString() + "." + decimate.toString();
        let targetUrl = new URL(activeUrl.origin + environment.apiBasePath + '/surface_mesh_gltf/' + componentId + "?decimate=" + decimate);
        let params:{ [name: string]: string }  = {};

        if (this.customLookupAddress != "") {
            params['lookup']=this.customLookupAddress;
        }
        if (this.customGatewayAddress != "") {
            params['gateway']=this.customGatewayAddress;
        }
        if (params){
            Object.keys(params).forEach(key => targetUrl.searchParams.append(key, params[key]))
        }

         const gltfLoader = new GLTFLoader();
        return from(fetch(targetUrl.toString(), {headers: { 'responseType': 'application/octet-stream'}, method: 'GET'})).pipe(
            map((surfaceMesh) => {
                this.surfaceMeshes.set(surfaceMeshKey, surfaceMesh);
            }
        )
        
    )
   
       
        )    
    }

The thing is that, since the server is giving the response as a stream, I need to extract the vertices and the trig faces from the stream. I was wondering how do I do that using the GLTF loader?

for (let i = 0, l = scene.children.length; i < l; i++) {
                const object = scene.children[i];
                t = 0, v = 0, o = 0;
                object.traverseVisible(function (object) {
                    if ((object as THREE.Mesh).isMesh) {
                        const geometry = (object as any).geometry;
                        v += geometry.attributes.position.count;
                        if (geometry.index !== null) {
                            t += geometry.index.count / 3;
                        } else {
                            t += geometry.attributes.position.count / 3;
                        }
                        o = o + 1;
                    }
                })
            }

try this piece of code you can get triangles, vertices and objects

Hi Gundeep. Thank you so much for this piece of code. Can I know how do I implement it within my code base? I have written in the question what I currently have. It would mean a lot to me if you could help me out a little with this?

Hi Gundeep,

Thank you so much for responding to me. As you can see what I currently have, I was wondering what do I do to integrate your piece of code into it? I am sorry it’s just that I am very new to three.js and it would mean a lot to me if you help me out here to integrate your piece of code with mine.