Convert file types to .gltf to load models

Questions
1

I’m thinking about converting any type the user uploads into .gltf and load that ( mainly because threejs’ docs says “Where possible, we recommend using glTF” ), does that sound like a good, feasible solution?

Doing something like looeee does in his glTF converter where he loads both original format and in .gltf format, but I’d just load the latter.

I’ve done this by uploading an .fbx file, loading it with the npm pckg three-fbxloader-offical's FBXLoader and instead of adding the object to the scene, I’d use it on npm pckg three-gltf-exporter's GLTFExporter to parse it, create a blob and then load it with npm pckg three-gltf-loader (Note: all packages work great on their own, they do what they have to)

Since I’m actually loading the fbx and then parsing it I’m not sure if it’s really helping performance-wise, but the .gltf does look better so got that going for me.

So, within a React class I have:

imports (just the necessary for the question)

import React from 'react';
import * as THREE from 'three'; //0.103.0
import GLTFLoader from 'three-gltf-loader'; //1.103.0
import GLTFExporter from 'three-gltf-exporter'; //0.0.1
import FBXLoader from 'three-fbxloader-offical'; //1.0.0

The fbx files loader (works great when adding to the scene)

loadFBX = source => {

const onLoad = function(object) {

  this.mixer = new THREE.AnimationMixer(object);
  const action = this.mixer.clipAction(object.animations[0]);
  action.play();
  
  // call this to convert to gtlf before adding to the scene
  this.exportGLTF(object);

  // this.scene.add(object);
}.bind(this);

const onLoaderError = error => {
  console.log(error);
};

const loader = new FBXLoader(this.threeLoadingManager());
loader.load(source, onLoad, null, onLoaderError);
};

The glTF exporter function

exportGLTF = input => {
    const gltfExporter = new GLTFExporter();
    let output;

    const options = {
      trs: false,
      onlyVisible: true,
      truncateDrawRange: false,
      binary: false,
      forceIndices: false,
      forcePowerOfTwoTextures: false
    };

    gltfExporter.parse(
      input,
      function(result) {
        output = JSON.stringify(result, null, 2);
        const blob = new Blob([output], { type: 'text/plain' });
        output = URL.createObjectURL(blob);
        this.loadGTLF(output);
      }.bind(this),
      options
    );
  };

And the glTF loader (works great when adding to the scene)

loadGTLF = source => {
    const loader = new GLTFLoader();
    loader.load(
      source,
      gltf => {
        const model = gltf.scene;

        this.mixer = new THREE.AnimationMixer(model);
        gltf.animations.forEach(clip => {
          this.mixer.clipAction(clip).play();
        });

        this.scene.add(model);
      },
      xhr => {
        console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`);
      },
      error => {
        console.error('An error happened', error);
      }
    );
  };

So the question is, is this worth it? Or should just load the .fbx or any other format independently (I’m already using the respective loader so…)

2 Likes
2

I would load the FBX directly without converting it to glTF. IMO, the conversion make only sense if you do it ahead of the loading process. So in your case, the user would have to do this.

3

Ok! So it only makes sense if I convert the file on the back-end before loading it (not sure how to do that on the front if possible). Cool, thanks! :slight_smile:

1 Like
4

One option you can use:

1 Like
5

Hey, I want this thing for my app but the problem is I am using flutter so how can I use this functionality in my flutter app. I just want to load the user uploaded any format of the file into glTF format. Thanks in advance