GLTFExporter and GLTFLoader

Questions
,
1

Hey All! I’m very new the Three and WebGL, and having some issues understanding GLTF. I have created a pen to illustrate my problem: https://codepen.io/m13d/pen/WNgqMOw

Basically, I am creating a cube programmatically, using GLTFExporter to export it, then using GLTFLoader to load it. If you open the console, you’ll see that the resulting object is basically empty.

Clearly I’m doing something incorrectly, or miss-understanding something. Any help would be appreceated.

2

when using the parse methods of both GLTFExporter and GLTFLoader you need to feed in the appropriate callbacks and arguments…

const exporter = new GLTFExporter();
const loader = new GLTFLoader();

const options = {
  binary: false,
  maxTextureSize: 1024
};

exporter.parse(cube, (exported) => {

      loader.parse(exported, (loaded) => {
        console.log("loaded", loaded.scene);
      },
      function ( loaded ) {
            scene.add(loaded.scene)
      });
},
  function ( error ) {
  console.log( 'An error happened during parsing', error );
  },
  options
);

you’ll see the console.log("loaded", loaded.scene); is never written to the console as the onLoad function is actually an argument…
there’s not really examples that demonstrate the parsing method of GLTFLoader but it shows this roughly in the documentation three.js docs
the GLTFExporter example does however demonstrate the necessary callbacks and arguments for exporting a gltf, also outlined here three.js docs.

3

Thank you for your help!

1 Like
4

glad to have helped :beers: