White Albedo Color on loaded Model?

Hi !

First things first, I recently started Babylon.js (I’m coming from three.js), so sorry for being a newbie on this framework :sweat_smile: . I have a problem while loading a .glb model through SceneLoader.ImportMeshAsync : every models that I load are rendering with a white material.

So I’m trying to use Babylon.js with React.js (Just wanted to mention it, but I don’t think the problem come from here). I tried to simplify my scene as much as possible, here is my code :

import React, { Component, ContextType } from 'react'
import * as BABYLON from 'babylonjs'
import 'babylonjs-loaders'

export class BabyScene extends Component<{},{}> {


    componentDidMount = () => {

        this.engine = new BABYLON.Engine(this.el)
        this.scene = new BABYLON.Scene(this.engine)
        this.camera = new BABYLON.FreeCamera('Camera',new BABYLON.Vector3(0,3,5),this.scene,true)
        const light = new BABYLON.PointLight('PointLight', new BABYLON.Vector3(3,4,2),this.scene)
        this.sphere = BABYLON.MeshBuilder.CreateSphere('Sphere',{diameter:2,segments:32},this.scene)
        this.sphere.position.x += 5





    async createModel():Promise<void>{
      const boxModel = await BABYLON.SceneLoader.ImportMeshAsync('','./models/','boxModel.glb',this.scene)

      boxModel.meshes[0].position.x -= 5

      console.log('lonely Cube  :   ',boxModel.meshes[1].material )

      const geometriesModel = await BABYLON.SceneLoader.ImportMeshAsync('','./models/Scene/','Scene3.glb',this.scene)

      console.log('Cube from 3 models glb  :   ', geometriesModel.meshes[1].material)

    animLoop = () => {

    handleResize = () => {

    componentWillUnmount = () => {
        window.removeEventListener('resize', this.handleResize)

    render() {
      return (

export default BabyScene

To summarize, I have in my scene :

      -   A sphere in [5,0,0]
      -   My boxModel in [-5,0,0]
      -   My geometriesModel in [0,0,0]
      -   A PointLight in [3,4,2]
      -   My Camera in [0,3,5], looking at [0,0,0]

And here is the result :

As you can see, the sphere created with the MeshBuilder looks fine but my models are full bright.

And here is what my models should looks like (In the sandbox) :

Since I saw many topics about the blender export doing something wrong, I wanted to see if my issue was coming from my models, so I tried with the Avocado.glb provided by Khronos and it had the same issue.

After diving into my console.log() , I noticed two things :

  • In the log of my boxModel.meshes[1].material , the _albedoColor parameter is set to 1,1,1; if i change it from the console my model’s color change (eg. _albedoColor set to 1,0,1) :

  • But if I try to change the _albedoColor of one of the mesh material of my second model (geometriesModel), nothing happen (notice that the albedo color is already set to the good color) :


Does anyone have any idea from where it come from ? (This is probably a stupid oversight from me, as I said i’m a newbie :sweat_smile:)

Thanks in advance.

Hi and welcome to BJS,
You don’t have to apologize for being a newbie that has “found the light” converting from three.js to bjs :grinning:
To be honest, I’m not an expert using the loader to import blender files and materials in bjs. I mostly work all my materials in bjs (or from substance). Anyways, what I spotted here is that your imported meshes have no material assigned.

And then, may be for the future, it would be best if you could post a PG (one of the most obvious advantages of BJS vs three.js). A playground can help us spot the exact issue and correct it for you.
Best way to get instant fixes for your issues.

May be @labris can quickly help you defining your materials correctly on import, would you?

Again, a warm welcome to the BJS community and I shall wish you a great day :sunglasses: :sun_with_face:


Let us see your model first.
Put is somewhere - Using External Assets In the Playground | Babylon.js Documentation - and make a simple PG.
Then it will be much easier to help with your question.

Well, it is working on the playground, so this is kinda embarrassing …

1 Like

No need to feel embarrassed, that happens! And it gives useful information to help us isolate your issue. :smiley: It might be something on how your React scene is set up. You can add the Inspector The Inspector | Babylon.js Documentation (babylonjs.com) to your React scene to examine the materials and maybe spot something.

1 Like

Ok, after adding the inspector, two things are popping off :

  • There are 2 inpectors rendered;
  • It looks like the model I load in 2nd is loaded twice (in this case the model with 3 geometries)

What properties of the materials should I share to you ?

And do you think using an AssetContainer can fix the issue that the 2nd model is loaded twice ?

Haha, I’m trying to convert my whole company to switch to bjs from threejs. Slowly throwing breadcrumbs of how Babylon is amazing xD

@Loulou Hey. In your project can you spot the material on the meshes? Using inspector you can select the mesh you want to debug, and look for “activeMaterial”. You can try changing this to a different material if you have them in the scene to see if it will change anything.

If you don’t have any material in there, you need to create material and assign it to the mesh. If you on the other hand have the material in place, try to share a screenshot with that material detials, as shown below, the more you can, the more we have to look into :smiley:


1 Like

Every materials seems to be applied, and if i change them to my sphere material it render correctly.

Here are the materialCube properties :

No. It must be an error in the script. The AssetContainer will not help with this.
Also 2 inspectors. Again, I can only think of an error in the script. It looks like you are running some sort of loop. Like what is ‘animLoop’ that renders the scene? Looks kinda weird to me? Sadly I have no experience with react. At this point, let me just quickly call in @RaananW on your case.

Edit: I believe you would need to delay the scene rendering while waiting for the promise on your import mesh. Next, on ready, render the scene. The exact script to do this from react (as I said I do not know) but surely @RaananW will be able to explain how it’s done. I am about 90 something percent sure that the issue comes from that. Hope it won’t be too long before you get your fix. Meanwhile, have a great day :sun_with_face: :sunglasses:

1 Like

Would you be able to share a reproduction or the actual project? I will be happy to debug it with you and see if we can find the culprit

Here’s a link to a git repo : GitHub - LouisCuenot/TestsReactBabylonjs

1 Like

The problem is that componentDidMount is called twice (I will let you debug this issue :slight_smile: ) and you are creating two engines, two scenes, and 2 everything - on the same canvas.

A simple fix can be adding this.engine.dispose() in componentWillUnmount . Then I get this:

The lighting on the models is very low, but that’s a whole different thing


Thanks you very much !

By the way, do you have any idea why the fact that everything was created twice made the models material looks bright like this?

That’s a good question. My assumption is that the gl commands that were sent to the gl context somehow did that, but I haven’t debugged that. There is a render loop, and it was running two times, so i assume the first loop was rendering correctly, and the second one (which is the one you see) caused the issue.

But! this is just an assumption.