Materials not rendering when using GLTFLoader

[iAtomPlaza]

before i start, this other topic was the closest i came across, i did loads of searching but still came up empty and now I’m posting my official question.

I am *trying to use GLTFLoader to load a model I have created within blender 2.82a, however, the model does render in the scene, but without any materials. The material in question contains a not so complex node tree. Using an online renderer (gltf-viewer.donmccurdy.com) to test my model and materials has no effect as the materials are not displayed.

here is a screenshot of my (not wanted) actual result…

and here is what i’m expecting…

I’ve been led to believe that the issue is with my .glb file rather than the loader?

class Sun{


    static init(scene) {

        // glb loader
        const glbLoader = new THREE.GLTFLoader();
        glbLoader.setPath("/blender_exports/sun/");

        // load object
        glbLoader.load("sun.glb", glb => {
            scene.add(glb.scene);
            return glb.scene;
        });
        
        return null;
    }

}

i simply call Sun.init(scene); in my main file

const scene = new THREE.Scene();
const sun = Sun.init(scene);

i have not included my whole project code…
if you wanna have a look at my blender settings ill include my .blend file

sun.blend

[donmccurdy]

If you test this model in a standalone glTF viewer (https://gltf-viewer.donmccurdy.com/, https://sandbox.babylonjs.com/) I think you’ll see the same result — that the materials have not been exported with the file.

Blender’s material system allows pretty complex arrangements of nodes, must of which cannot be exported to other software. To get the model to export to glTF, you’ll need to review the Blender glTF addon’s documentation: https://docs.blender.org/manual/en/2.82/addons/import_export/scene_gltf2.html

In particular, you’ll want a Principled BSDF material, or perhaps an Emissive material. You’ll also need to bake the gradient into a Texture. Blender has tools for that, but I’m not an expect on texture baking.

[iAtomPlaza]

@donmccurdy

Blender’s material system allows pretty complex arrangements of nodes, must of which cannot be exported to other software. To get the model to export to glTF, you’ll need to review the Blender glTF addon’s documentation: https://docs.blender.org/manual/en/2.82/addons/import_export/scene_gltf2.html

In particular, you’ll want a Principled BSDF material, or perhaps an Emissive material. You’ll also need to bake the gradient into a Texture. Blender has tools for that, but I’m not an expect on texture baking.

Thanks for clearing that up, with that in mind, i was able to look up resources that helped me learn how to fix my materials.

However… is still doesnt work quite right, it load perfectly in the online viewer, but the texture is different on my website.

(*left = viewer) (*right = my page)

[donmccurdy]

That difference looks related to gamma. You may need renderer.outputEncoding = THREE.sRGBEncoding. See the GLTFLoader docs for a bit more on that.

[iAtomPlaza]

@donmccurdy

That difference looks related to gamma. You may need renderer.outputEncoding = THREE.sRGBEncoding . See the GLTFLoader docs for a bit more on that.

this is how my renderer is setup… doesn’t fix the texture

const renderer = new THREE.WebGLRenderer( {antialias:true} );
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;

[Heiddo]

I don’t know if it helps - but I had some similar issues regarding color management and my problem was solved in this thread:

Over saturated GLTF texture

Hello, I created this model in blender: [Screen Shot 2020-03-08 at 01.56.01] [Screen Shot 2020-03-08 at 02.00.01] I imported it into my project using the GLTFLoader but It renders like this in my project: [Screen Shot 2020-03-08 at 01.58.26] So far I have read responses from @donmccurdy & @Mugen87 on a couple of similar posts. From this I tried including: physically correct lights sRGBEncoding gammaOutput: true gammaFactor at 2.2 I currently do all of this at the top of my file like thi…

[iAtomPlaza]

I dont really understand how it became fixed, all i did was rewrite my code to use modules instead of linking a cdn and the colors appear to be correctly encoded.