How to use WebIO to export .gltf file?

[neciszhang]

Hi,
I can use writeBinary to write glb files, and I can use writeJSON to convert gltf json files, but how should I export the bins and textures in webIO?

[donmccurdy]

Once you've got the JSON and resources from WebIO's export, you don't need glTF Transform to work with them anymore. Then it would depend on what you want to do with the files ... to download everything as a ZIP, you could do something like this:

import { BlobWriter, BlobReader, ZipWriter, TextReader } from '@zip.js/zip.js';


// Create ZIP archive.
const basename = 'my-model';
const { json, resources } = await io.writeJSON(document, {basename});

const blobWriter = new BlobWriter('application/zip');
const writer = new ZipWriter(blobWriter, { level: 0 });

await writer.add(`${basename}.gltf`, new TextReader(JSON.stringify(jsonDocument.json)));

for (const uri in jsonDocument.resources) {
	const resource = jsonDocument.resources[uri];
	const ext = FileUtils.extension(uri);
	const resourceBlob = new Blob([resource], {
		type: ext === 'bin' ? 'application/octet-stream' : ImageUtils.extensionToMimeType(ext),
	});
	await writer.add(uri, new BlobReader(resourceBlob));
}

await writer.close();
const blob = await blobWriter.getData();

// Download the ZIP.
await downloadBlob(blob, `${basename}.zip`);

async function downloadBlob(blob, filename) {
	const anchorEl = window.document.createElement('a');
	anchorEl.style.display = 'none';
	window.document.body.appendChild(anchorEl);

	anchorEl.href = URL.createObjectURL(blob);
	anchorEl.download = `${filename}`;
	anchorEl.click();

	setTimeout(() => {
		URL.revokeObjectURL(anchorEl.href);
		anchorEl.remove();
	}, 1000);
}