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?