Exporting a GLB file

Questions
1

I want to say this worked a year ago or so. Now it does not…Did this change with the latest release of three?

exportButton.onclick = function download() {
    const exporter = new THREE.GLTFExporter();
    exporter.parse(
        scene,
        function (result) {
            saveArrayBuffer(result, 'scene.glb');
        },
        { binary: true }
    );
}

function saveString( text, filename ) {

    save( new Blob( [ text ], { type: 'text/plain' } ), filename );
}

function saveArrayBuffer(buffer, filename) {
    save(new Blob([buffer], { type: 'application/octet-stream' }), filename);
}

const link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link); // Firefox workaround, see #6594

function save(blob, filename) {
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    link.click();

    // URL.revokeObjectURL( url ); breaks Firefox...
}
2

I forgot to mention this is three in an Electron app.

Why isn’t this working?

3

The exporter was modified so that an error callback is now required, which you’re missing… Try like this…

exportButton.onclick = function download() {
    const exporter = new THREE.GLTFExporter();
    exporter.parse(
        scene,
        function (result) {
            saveArrayBuffer(result, 'scene.glb');
        },
	    function ( error ) {
		console.log( 'An error happened' );
	},
        { binary: true }
    );
}

function saveString( text, filename ) {

    save( new Blob( [ text ], { type: 'text/plain' } ), filename );
}

function saveArrayBuffer(buffer, filename) {
    save(new Blob([buffer], { type: 'application/octet-stream' }), filename);
}

const link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link); // Firefox workaround, see #6594

function save(blob, filename) {
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    link.click();

    // URL.revokeObjectURL( url ); breaks Firefox...
}
4

Thank you for your reply Lawrence. I have been racking my brain with this. I did try that as well after I posted this. but it still does not work.

Should it still work like this even though it is in a Electron.js application? Everything else still works.

5

Also, I notice when I do try and export a GLB model, in the App Data directory the Electron blob storage folder gets updated but there is nothing in it.

6

@J450NP13 I tried to make a minimal reproduction environment in codesandbox but it throws an error when trying to use electron there, have you tried copying the official GLTFExporter example one for one to see if it works as expected?

7

Yes, I have. I had a feeling it was because of Electron…that’s a shame. There has to be a way.

I haven’t thrown any errors…I’m in Visual Studio Code…What error did you receive?

I really appreciate your time Lawrence.

8

Are you just recently porting to electron? Found a good article on how to download files using electron, it’s worth a read, I did assume the href download link may be the issue, it looks like you need to handle the file download in the way a lower level application would to a specified location on a device…

9

Oh, nice find. I will see if this works.

Looks like a lot more involvement…yikes. I’m not even set up like that with an a renderer.

I’ll keep you posted. Thanks Lawrence.

1 Like
10

Lawrence to answer your question though…I am just now discovering Electron and fell down the rabbit hole…was totally unaware of it. I have been a .NET person up till recently. and now am moving more out of my comfort zone and Electron is freaking awesome.

So, this is basically my first project in Electron and of course I need THREE in it and I also have a Unity webGL build working in it.

I will get this app up to standards and that will probably be the solution…now that I am seeing this ICP stuff I need to do.

I will keep you posted.

1 Like
11

Would be cool to see the outcome when you’re done.

Yeah I couldn’t find much on the subject apart from that article, I would have imagined stdlib for react-three-fiber in a native environment would have a handler for a device specific GLTFExporter scenario but again I couldn’t find anything related to the issue…

1 Like
12

I cannot find much either.

I have am getting a run around with the GLTFExporter not defined and not a constructor. No matter when I import it or where the actual js is located.

I will look more into that link from you. That seems to be promising.

13

Interesting, I assume you’re using node with both “electron” and “three” packages installed?

14

Yes.

I believe I have it working now. After some refactoring with the imports and the directories…I believe that is what it was the entire time.

I will keep you posted.

1 Like
15

So I took the entire example into my Electron app…reconnected all the paths for three…and it worked…refactored it exactly the same way in my main.js and I get the same run around with the GLTFExporter being undefined or not a constructor…WTF

16

Got it working.

Had to put the export function in the html page.

Not really sure if that was the issue or if it was just code gremlins.

1 Like