GLTF Loader Model Orientation Incorrect

Questions
, ,
1

Hi, new to Three.js and React-Three-Fiber. I successfully loaded a model using GLTF loader in React-Three-Fiber, but the orientation for 2 sub-meshes are completely off. Please refer to attached images. Image 1 is a screenshot of the model in Marmoset Toolbag, Image 3 is the same model that I tested in Don McCurdy’s GLTF Viewer, and Image 2 is how it loades in R3F.

I understand I could manually tweek and get these into place, but I would like some help to identify the source of the problem for future reference. Perhaps there are some things missing in model preparation that I’m not aware of.

Following is my process for creating the assets:

  1. Assets are modelled using Marvelous Designer, Modo, Zbrush and Substance Painter, not in Blender if this matters.
  2. Marmoset is used to compose and generate GLB file (Marmoset does not export GLTF format) 3) Following CesiumGS/gltf-pipeline guideline, I used command line to convert GLB file to GLTF format. (gltf-pipeline -i model.glb -o model.gltf) https://github.com/CesiumGS/gltf-pipeline
  3. I tested 3 methods of loading in R3F: 1) GLB file 2) GLTF file 3) GLB + GLTF without using Draco Loader. All of these files can be loaded, alas the same orientation problem

Any help or suggest much appreciated.

1-marmoset
1-marmoset746×874 138 KB
2-r3f
2-r3f752×751 227 KB
3-mccurdy
3-mccurdy699×786 373 KB
loader statement 1
loader statement 2
loader statement 2783×117 6.63 KB

2

I think you have to apply the transforms to your model. Unfortunately I only know how to do it in blender.
Assuming you rotated your object in X direction by 90° in your 3D Software, it keeps that value and export it. When loading into threejs all transforms are reseted. So your rotation.x is 0° again.

Applying the transform will keep the rotation, but sets the value to 0.

Here you can see how to apply transforms in Blender pressing ctrl + A
blender-gif2

3

Hi Fluqz, thanks for your reply. I took the whole day yesterday to troubleshoot, and I can confirm the problem originated at model preparation stage. GLTF loader in Three and R3F useLoader hook are both working beautifully.

For anyone interested, my model is created in a number of softwares and imported into Modo for composite and uv mapping. I discovered the fbx export format for Dress mesh, if in Blender or Unreal Engine configurations will result in orientation problem, but the fbx export format in Maya works nicely. Now I don’t know exactly where in my pipeline creates this problem, as far as I know, it could be either Marvelous Designer, Modo, Zbrush, Marmoset, but at least for now, I have a workflow that works for me.

Thanks for taking the time.