React-babylonjs using modelLoader , the imported mesh doesent react to scene light

Questions
,
1

Hi there, thanks in advance for any help here.
Im importing a model using a Suspense with Fallback and 

 return(
       <Suspense
       fallback={<ProgressFallback progressRotation={props.progressRotation} center={props.center} scaleTo={props.scaleTo} loadProgress={loadProgress} progressBarColor={props.progressBarColor} />}
       >
            <Model
            scaleToDimension={props.scaleTo}
            onLoadProgress={(evt) => {
                let modelLoadProgress = evt.lengthComputable ?
                  evt.loaded / evt.total :
                  evt.loaded / (props.estimatedFileSize * 0.085) /* provided fileSize is not for 'view' manifest, a bad guess often, but generally factor ~0.085 smaller  */
                setLoadProgress(modelLoadProgress);
              }}
              onModelLoaded={(model) => {
                let mesh = model.meshes[1];
                setLoadProgress(1);
                if (props.onModelLoaded) {
                  props.onModelLoaded(model);
                }
              }}
            position={props.position}
            rootUrl={props.rootUrl}
            sceneFilename={props.sceneFilename}
            
            
            />
       </Suspense>
    )

But the material in my mesh doesn’t react to the Scene lights.

  
    if(model){
     let mesh = model.meshes[1];
     console.log('loaded mesh:', mesh);
    }else{
     console.log('Error Not loaded mesh:');
    }
   }
   
return(
 <Engine adaptToDeviceRatio={true} antialias={true} engineOptions={{preserveDrawingBuffer:true, stencil:true}}  canvasId="galeria-canvas">
                <Scene>
                    <pointLight name='omni' position={new Vector3(0, 50, 0)} />
                   
                    <arcRotateCamera name='camera' alpha={0} beta={0} radius={10} target={Vector3.Zero()} setPosition={[new Vector3(20, 200, 400)]}
                    lowerBetaLimit={0.1} upperBetaLimit={(Math.PI / 2) * 0.99} lowerRadiusLimit={150}
                    />
                      <ModelLoader
                        rootUrl={props.url} 
                        scaleTo={50} 
                        center={new Vector3(-150,10,0)}
                        onModelLoaded={onModelLoaded}
                        progressBarColor={Color3.FromInts(255, 165, 0)}
                        
                      ></ModelLoader> 
                        <ground name="ground1" width={100} height={100} subdivisions={6} />
                </Scene>
            </Engine>
    )

I don’t know if I have to Enable something more.

Thanks !

2

Adding @brianzinn for the react part.

1 Like
3

Hi Camila,

I suspect this could be resolved with a regular Playground - are you able to share your model on github or another CORS enabled location? If not - with the inspector on and if you set the mesh grid on then you may see something with face normals or lighting/camera position why your materials aren’t working as expected? It does not look related to react-babylonjs usage, so if we can reproduce would be helpful! :smiley:

4

Hello @Camila_Santacruz just checking in, do you still have any issues?