Blue material instead of proper materials applied on mesh when importing GLTF

Greetings Babylon!

Upfront I should say I am using the ES6 npm package version of the lib.

For some reason when I import my GLTF mesh, instead of displaying the proper materials I get a blue material applied on the mesh:

It looks like the problem does not come from my GLTF file since the sandbox displays my mesh properly:

Any idead of what’s going on?

Here is my code:

import { SceneLoader } from “@babylonjs/core/Loading/sceneLoader”;
import { Vector3 } from “@babylonjs/core/Maths/math”;

import “@babylonjs/loaders/glTF/2.0”;

export default class Player {

constructor(scene) {

    SceneLoader.ImportMeshAsync(null, "assets/models/", "kid.gltf", scene)
        .then(
            (result) => {
                result.meshes[0].receiveShadows = true;
                result.meshes[0].position.x = -10;
                result.meshes[0].position.y = -10;

                console.log(` * * * The player mesh is now loaded.`);
                console.log(result);


                result.meshes[0].scaling = new Vector3(4, 4, 4);
            }
        );
}

}

And here is the GLTF file:
kid.gltf.zip (119.4 KB)

Pinging @bghgary

can you make sure that there is no network error on your example (check the f12 console)

Maybe the texture files are not found? can you try with a glb?

Hey Delta,
There is no texture associated with the mesh. Only several coloured materials applied to different faces. Tried loading a GLB, same issue. The console shows no errors either.

It is funny because it used to work. I removed the GLTF import for some time to implement collisions with basic shapes and now that I am reincluding the GLTF import, it misbehaves…

For clarity, I am using this version of the npm package:
"@babylonjs/core": "^4.0.0-alpha.18"

hopefully this will be resolved in the release version.

EDIT: here is the GLB file:
kid.glb.zip (89.8 KB)

can you jsut try to use latest RC (should be rc3)

When I run
npm uninstall @babylonjs/core && npm i @babylonjs/core@latest

the version ^4.0.0-alpha.18 gets installed and not rc3

Is there a way of installing rc3 that uses ES6 imports? What is the npm command to do so?

Try npm i @babylonjs/core@preview

1 Like

This isn’t supposed to be this way though. We’re looking at it. I’m also investigating your issue.

The npm versions will be all good tomorrow when we release 4.0. Latest is required by npm and this package didn’t exist in v3.3 so latest just pointed to the first version we published.

1 Like

thanks @bghgary for your support

When switching to rc3 for @babylonjs/core and @babylonjs/loaders
the mesh doesnt get loaded and here is the error shown in the console:

I’ll live with it until tomorrow. Will try with the official release and get back to you with the results.

What kind of lights are in your scene? Can you put up a server that I can debug? I can’t repro what you are seeing.

If there is an issue, it would be good to fix it before we release tomorrow. :slight_smile:

give me a sec I send you a zip file.

1 Like

okay run :
npm i && npm start
this is gonna open chrome canary on port 3000 that uses a self-signed certificate. if this messes up on your machine, just open localhost:8080 (3000 is just a browser-sync proxy)

the file where I load the mesh is in src/Player/Player.js

EDIT: upload failed, here is a google drive link:

The mesh DOES get loaded. its just really small and intercepts the box.

The error has to do with the GLTF being animated. But it’s still blue.

I’m not able to build:

gyp ERR! configure error
gyp ERR! stack Error: Command failed: C:\Users\garyhsu\AppData\Local\Programs\Python\Python37-32\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                                ^
gyp ERR! stack SyntaxError: invalid syntax

Any chance you can put up a server I can access? It’s hard to help if there is a lot of setup involved.

sorry for that.
I added sourcemaps to a github-pages repo so that you can see my code using the
“Sources” tab of Chrome dev tools :https://wwwonka.github.io/blueMaterial/

This might not be the best of examples. Since I switched to rc3 the “kid.gltf” mesh is not animated nor positioned & scaled anymore which makes it harder to see in the viewport…

tell me if this remains unsufficient.


1 Like

hey and here is the same using Babylon.js v4.0.0-alpha.17 :

https://wwwonka.github.io/blueMaterial-alpha/

:upside_down_face: (at least you can move in scene with arrow keys in this one)


@sebavan is working on this.

As for the original issue, it looks like the blue hue is coming from the fog which lerps between the final color and fog color. The spot light that’s in the scene is not strong enough to light the PBR material for model, so it’s all black if I turn off the fog.

1 Like

Wow my apologies, I just added a HemisphericLight to my scene and everything shows up properly!

1 Like