GLTF to USDZ exporter issues

I have encountered issue when I’am trying to use USDZ exporter.
My application require support for exporting scene to USDZ and GLTF.
GLTF exporter works as expected(screenshot, code and file below):
example-scene (2).gltf (6.3 MB)

const scene = this._prepareSceneForExport(lt, false, true);

    this._gltfExporter.parse(scene, (gltf) => {
      const output = JSON.stringify(gltf, null, 2);
      const blob: Blob = new Blob([output]);
      const link = document.createElement('a'); = 'none';

      link.href = URL.createObjectURL(blob); = 'scene.gltf';;
    }, () => {})

Note: method prepareSceneForExport simply deep clones existing scene and removes some unnecessary objects.
As I understood example from library, first I need to convert scene to gltf and then export it as usdz, so I tried this:

      (gltf) => {
        const output = JSON.stringify(gltf, null, 2);
        const blob: Blob = new Blob([output]);
        const link = URL.createObjectURL(blob);

        const gltfLoader = new GLTFLoader();
        const dracoLoader = new DRACOLoader();
        gltfLoader.load(link, (gltf) => {
          const exporter = new USDZExporter();
          exporter.parse(gltf.scene).then((uintArray) => {
            const blob = new Blob([ uintArray ], { type: 'application/octet-stream' });
            const link = document.createElement('a');
   = 'none';
            link.href = URL.createObjectURL(blob);
   = 'scene.usdz';

      (error) => console.log(error)

When I load exported USDZ scene to threejs editor, I get this:

However, if I will upload GLTF exported scene to threejs editor, export it as USDZ, and then upload it to threejs editor again, I will get this:

model (2).usdz (4.1 MB)
Question is, how to update my code, to get same result as if I used threejs editor, and if it possible, how to fix coloring of USDZ result scene?

@evgenyshaikovskiy maybe try doing both exports in a single code and slightly change terminology, similar to this:

	this._gltfExporter.parse( scene.clone(), json => {
		const string = JSON.stringify( json, null, 2 );
		const blob = new Blob( [ string ], { type: 'text/plain' } );
		const url = URL.createObjectURL(blob);

		// save GLTF file and then proceed with loading url with GLTF Loader and export with USDZ Exporter

	}, function( error ) { console.log( error ); }, { binary: false } );

Your final scene should already have some lighting in order to improve the looks of the model.

Another option might be to also parse the scene.clone() directly with USDZ Exporter instead of loading it with GLTF Loader.

1 Like

Thank you for idea. I removed cloning and directly exported scene to USDZ and received some result. However I found that very odd, because cloning before exporting doesn’t affect gLTF exporter, but does affect USDZ exporter.
Basically, if I clone scene and then export it with USDZ - I receive empty file, if I don’t clone scene and then export it - I receive normal scene(some objects are removed, but that’s due to the fact that USDZ exporter doesn’t support some materials)
Here is my cloning mechanism:

 let sceneClone: Scene = _.cloneDeep(this._config.scene);