Hi !
First things first, I recently started Babylon.js (I’m coming from three.js), so sorry for being a newbie on this framework 
. 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<{},{}> {
el:HTMLCanvasElement
engine:BABYLON.Engine
scene:BABYLON.Scene
camera:BABYLON.FreeCamera
sphere:BABYLON.Mesh
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)
this.camera.setTarget(BABYLON.Vector3.Zero())
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
this.engine.runRenderLoop(this.animLoop)
this.createModel()
window.addEventListener('resize',this.handleResize)
}
async createModel():Promise<void>{
const boxModel = await BABYLON.SceneLoader.ImportMeshAsync('','./models/','boxModel.glb',this.scene)
boxModel.meshes[0].position.x -= 5
//boxModel.meshes[0].scaling.set(50,50,50)
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 = () => {
if(this.scene){
this.scene.render()
}
}
handleResize = () => {
if(this.engine){
this.engine.resize()
}
}
componentWillUnmount = () => {
window.removeEventListener('resize', this.handleResize)
}
render() {
return (
<canvas
ref={ref=>{this.el=ref!}}
style={{width:'100%',height:'100%'}}
/>
)
}
}
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 )
Thanks in advance.
It might be something on how your React scene is set up. You can add the Inspector 
) and you are creating two engines, two scenes, and 2 everything - on the same canvas.