donmccurdy / three-gltf-viewer

Drag-and-drop preview for glTF 2.0 models in WebGL using three.js.
https://gltf-viewer.donmccurdy.com/
MIT License
2.09k stars 534 forks source link

Exporting and importing does not give the same texture. #310

Closed Muhammad-Adam closed 1 year ago

Muhammad-Adam commented 1 year ago

I have use tons of models from mixamo.com (FBX). I use FBXLoader and it loads correctly. When I try exporting it via GLTFExporter and then load it using GLTFLoader the texture seems to have change. Below is the snapshot of both the original FBX model and the exported GLB model.

image

image

Note that the scene (lighting, etc) did not change at all. Below is my function that handle the file upload by the user.

beforeUpload: (file: File) => {
      const { name } = file;
      const isFBX = name.match(/\.(fbx)$/);
      const isGLB = name.match(/\.(gltf|glb)$/);
      const isEitherFBXorGLB = isFBX || isGLB;

      setFilename(name);
      if (isEitherFBXorGLB) {
        const path = URL.createObjectURL(file);
        const loader = isFBX ? new FBXLoader() : new GLTFLoader();
        loader.setCrossOrigin('anonymous');

        if (loader instanceof GLTFLoader) {
          const dracoLoader = new DRACOLoader();
          const ktx2Loader = new KTX2Loader();
          dracoLoader.setDecoderPath( '/examples/js/libs/draco/' );
          ktx2Loader.setTranscoderPath( 'examples/js/libs/basis/' );
          loader.setDRACOLoader(dracoLoader);
          loader.setKTX2Loader(ktx2Loader.detectSupport(renderer.current));
        }

        loader.load(
          path,
          (gltf) => {
            console.log(gltf);
            if (isFBX) setModel(gltf as Group);
            if (isGLB) setModel((gltf as GLTF).scene);
            if (gltf.animations) setAnimationClips(gltf.animations);
          },
          (event) => setModelLoaded((event.loaded / event.total) * 100),
          (error) => {
            console.error(error);
          },
        );
      }

      return false;
    },

Things to take note 1) I dont see any issue when the original file is already in .glb to begin with. 2) When I try to export FBX to GLB, I got this warning from my console image 3) My exporter function is exactly the same as the one shown in threeJS documentation.

donmccurdy commented 1 year ago

Hi! This issue tracker is for feedback on the website, https://gltf-viewer.donmccurdy.com/. I don't provide three.js help here, but you can try any of the "Community" links on the three.js site (https://threejs.org/).

Aside — different formats represent materials in different ways, and converting between formats is (always) lossy. The difference you see above has to do with converting from the Phong or Lambert materials that THREE.FBXLoader supports to the PBR or Unlit materials that glTF supports. There is no lossless fix for all cases; you may want to switch the materials in advance, using metalness=0, roughness=1 to get close to the original appearance.