Blender 3.6 glTF Export - Textures Incorrect in Three.js but Correct on Re-import

Questions
,
1

Hi everyone,

I’m having a texture issue with a glTF model exported from Blender that I can’t seem to solve. When I export my character as a .glb file and re-import it into a blank Blender project, it looks perfect—all textures and materials are correct.

However, when I load the exact same .glb file in my Three.js scene, most of the model renders with a shiny, silver/metallic material instead of its actual textures.

This suggests my Blender export settings are correct? and the issue is somewhere in my Three.js setup? no clue

My Workflow:

  1. Downloaded a character model from Mixamo (FBX format).
  2. Imported the FBX into Blender 3.6.
  3. Made some adjustments and exported as a glTF Binary (.glb ).
  4. Loading the .glb into my Three.js application.

The Issue: Here is a side-by-side comparison. The left is how it looks in Blender (correct), and the right is how it renders in my Three.js app (incorrect textures).

As you can see, only the face and headphones seem to have some color, while the rest of the body is metallic.

brave_YWJamRjZFm
brave_YWJamRjZFm1920×590 45.6 KB

My Code:

Here is the relevant JavaScript code I’m using to set up the renderer and load the model.

Renderer Setup (initRenderer ):

function initRenderer() {
    scene = new THREE.Scene();
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);

    renderer.outputColorSpace = THREE.SRGBColorSpace;
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.0; 

    container.appendChild(renderer.domElement);
}

Model Loading (loadAvatar ):

function loadAvatar() {
    const gltfLoader = new GLTFLoader();
    gltfLoader.load("/models/Human.glb", (glb) => {
        const model = glb.scene;
        model.scale.set(100, 100, 100);
        model.position.set(0, -150, 0);
        scene.add(model);
        console.log("Model loaded:", model);
    });
}

What I’ve Tried:

  • Confirmed the .glb file is valid by re-importing it into Blender.
  • Ensured my materials in Blender use the Principled BSDF shader.
  • Set renderer.outputColorSpace and renderer.toneMapping as recommended for PBR workflows.

I feel like I’m missing something obvious in the Three.js scene setup. Does anyone have any ideas what could be causing the PBR materials to render incorrectly?

Thanks in advance for any help!

2

Do you see any warnings in the JS Console?

And, if you open the model in https://gltf.report/, does it appear correctly? In the “Metadata” tab, what extensions are listed, and in the “Validate” tab are there any warnings/errors?

3

Hey thanks for fast reply! when i import it there i get Errorcode: STATUS_BREAKPOINT actually

Edit: So unfortunately i cant even see the Validate tab, no warnings in my JS console

4

Hm that last part sounds like a Chrome bug discussed in

Possible to test that in a different browser, Safari or Firefox?

1 Like
5

Ah good idea tried all of em same result unfortunately with the white coloring, i tried it with a diffrent model from mixamo now and it displays it correctly within my app so i think its within my blender project so its time to bother the blender forums with my problem haha, thanks for the help!

6

post a screenshot of the blender’s shader node tree.

most likely there’s some node present which blender’s gltf exporter does not support and it’s skipping

1 Like
7

that thing?

image
image1733×1147 192 KB

8

set the metalness to 0 and try exporting
(select the bsdf node and click the reset just to be thorough)

image
image1118×606 69.9 KB

if still broken
disconnect the specular image and try exporting

if still broken
disconnect the normal and try exporting

if still broken
clear custom normals and try exporting

image
image1331×814 114 KB

2 Likes
9

Oh dude such a live saver thanks so much, “clear custom normals and try exporting” seems was the solution

2 Likes