GLTF to USDZ exporter issues

evgenyshaikovskiy
Thu, 21 Mar 2024 12:17:23 +0000
Questions

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');
      link.style.display = 'none';
      document.body.appendChild(link);

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

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:

this._gltfExporter.parse(
      scene,
      (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();
        dracoLoader.setDecoderPath('/examples/jsm/libs/draco/');
        gltfLoader.setDRACOLoader(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');
            link.style.display = 'none';
            link.href = URL.createObjectURL(blob);
            link.download = 'scene.usdz';
            link.click();
          });
        },
        );

      },
      (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:

file:
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?

3 posts - 2 participants