GLB Model not exporting

Questions
,
1

Hi there, I have a model that I want to export to be abled to display on a dashboard. The issue is that after exporting the model when I am sending the model as a blob to the flask server the downloaded .glb file has a size of 15 bytes and the content of the file is:

[object Object]

Here’s my code through which I am exporting my model:

const exporter = new GLTFExporter();

            exporter.parse(
                scene,
                function (result) {
                    console.log(result);

                    const blob = new Blob([result], { type: 'application/octet-stream' });
                    const formData = new FormData();
                    formData.append('file', blob, 'model.glb');

                    fetch('http://127.0.0.1:5000/upload', {
                        method: 'POST',
                        body: formData,
                    })
                        .then((response) => response.json())
                        .then((data) => {
                            console.log('File uploaded successfully:', data);
                        })
                        .catch((error) => {
                            console.error('Error uploading file:', error);
                        });
                },
                { binary: true },
            );
2

I think you’re missing an error function callback before the options object, the structure for the parse method should be of the following format…

exporter.parse(
	scene,
	function ( gltf ) {
		console.log( gltf );
		downloadJSON( gltf );
	},
        // you're missing the following function
	function ( error ) {
		console.log( 'An error happened' );
	},
	options \\ {binary: true} 
);
1 Like
3

I dont think thats the issue, cause the model itself is downloading just fine. Although I will add it and try again.

4

The code above looks reasonable to me, I would check the result.byteLength property to make sure it’s the size you expect before the upload, and perhaps also check your browser’s Network tab in dev tools to see that the POST request has the expected size.

If both of those look good, it might be something on the server side. If not, that might help narrow things down.

1 Like
5

Maybe I’m mistaken but the documentation on the .parse method of GLTFExporter is outlined as the following…

Screenshot_20241108_181239
Screenshot_20241108_1812391080×520 85.5 KB

I’ve had this issue before in a previous migration and it made sense that if an {object} is passed in rather than a (function) the options object is simply not recognised as it should be the 4th parameter in the arguments list, as can be seen here…

To add to this, writer.writeAsync requires the options object as seen here…

Eg… If options is not the 4th argument it is not recognised by 'writer.writeAsync`…

3 Likes
6

Okay I also added the error function callback as well as set binary to true, but still the .glb I am receiving from the response is same.

It’s not even binary, just some plain text.

Should I make a live share VSCode window with the backend and an example scene to mess around with, through which you can also see what the issue actually is?

7

Here is what works for me, try to ignore variables that might have been declared earlier in the code and the functions that handle errors and complete the export:

async function export_glb() {
	const { GLTFExporter } = await import( "three/addons/exporters/GLTFExporter.min.js" );

	let gltf_exporter = new GLTFExporter( manager );

	let options = {	binary: true };

	gltf_exporter.parse( skeletonUtils.clone( gltf_obj ), async json => {
		try {
			const blob = new Blob( [ json ], { type: 'application/octet-stream' } );
			const formData = new FormData();
			formData.append( 'file', blob, 'model.glb' );

			fetch('http://localhost:5000/handle_uploads', {
				method: 'POST',
				body: formData
			}).then( ( response ) => { console.log( 'response ', response ); finish_export(); } );
		} catch (error) {
			handle_export_error( error );
			return;
		}
	}, function( error ) { handle_export_error( error ); }, options);
}

And here is the flask setup:

import os
from flask import Flask, Response, send_from_directory, send_file, render_template, request, make_response
from flask_cors import CORS, cross_origin

app = Flask( __name__ )
cors = CORS( app )
app.config[ 'CORS_HEADERS' ] = 'Content-Type'

uploaded_file = None

uploads_dir = os.path.join( app.root_path, 'uploads' )
os.makedirs( uploads_dir, mode=0o777, exist_ok=True )

@app.route('/handle_uploads', methods=['POST'])
def handle_uploads():
    uploaded_file = request.files.get('file')

    if uploaded_file:
        uploaded_file.save( os.path.join( uploads_dir, uploaded_file.filename ) )

    return make_response( 'Form Data Processed' )

This worked for loading a GLTF file and exporting it as a GLB which appeared in the uploads folder.

2 Likes
8

Yep this worked for me, thanks for that!