Change Material of a babylonJs model with react-babylonjs - reactjs

Question

I load a model coming from Blender (exported with babylon js exporter). The model comes with materials. and has 5 meshes (very simple test model).
I would like to change albedo (color under natural light) of some materials, but don't get how to do, as there is no component related to the material (because imported) and in react, there is usually a function to call to update internal values (then a refresh is triggered).
const onModelLoaded = model => {
model.meshes.forEach(mesh => {
console.log(`mesh... `, mesh.material.albedoColor);
// It shows well albedo of each material
});
};
export const SceneWithLoad = () => {
return (
<div>
<Engine antialias adaptToDeviceRatio canvasId="babylonJS">
<Scene>
<Suspense>
<Model
rootUrl="assets/firstLoco.babylon"
sceneFileName=""
onModelLoaded={onModelLoaded}
/>
</Suspense>
<hemisphericLight ... />
<arcRotateCamera ... />
</Scene>
</Engine>
</div>
);
};
When mesh is loaded, I can see albedo of each material with onModelLoaded (that's great), now I would like to update albedo on a regular basis (setInterval(() => {changeAlbedo()}, 1000)), but ref to Material objects change on refresh, and I need to call a function for react to know code updated the material albedo.
Cant find the trick here, Thanks for advices !

Answer 1

Following numerous tests
Here the ids of the materials are known. They are used to set albedo on them through the lodash filter function. In this case, it alternates red / white lights in front / back of a locomotive.
boolBal is a value set to true or false every sec. SwapMaterial doesn't display anything and is simply an entry point for the scene modification code.
What is not really "react way of working" is that scene are mutable (you can update a scene item without generating a new reference), react in principle is not (state change = new ref to the state object)
Any better suggestion please comment.
import _ from "lodash";
import { Engine, Scene, Model, useScene } from "react-babylonjs";
import { Vector3, Color3 } from "#babylonjs/core";
import "#babylonjs/loaders";
const colorWhite = new Color3(1, 1, 1);
const colorRed = new Color3(1, 0, 0);
const SwapMaterial = ({ boolVal }) => {
const scene = useScene();
_.filter(
scene.materials,
r => ["FrontLeft-mat", "FrontRight-mat"].indexOf(r.id) >= 0
).forEach(m => {
m.albedoColor = boolVal ? colorRed : colorWhite;
});
_.filter(
scene.materials,
r => ["RearLeft-mat", "RearRight-mat"].indexOf(r.id) >= 0
).forEach(m => {
m.albedoColor = !boolVal ? colorRed : colorWhite;
});
return null;
};
export const SceneWithLoad = () => {
const [boolVal, boolValSet] = useState(false);
const ref = useRef({});
ref.current.boolVal = boolVal;
ref.current.boolValSet = boolValSet;
useEffect(() => {
const intId = setInterval(() => {
ref.current.boolValSet(!ref.current.boolVal);
}, 1000);
return () => {
clearInterval(intId);
};
}, []);
return (
<div>
<Engine antialias adaptToDeviceRatio canvasId="babylonJS">
<Scene>
<Suspense>
<Model rootUrl="assets/firstLoco.babylon" sceneFileName="" />
</Suspense>
<hemisphericLight ... />
<hemisphericLight ... />
<arcRotateCamera ... />
<SwapMaterial {...{ boolVal }} />
</Scene>
</Engine>
</div>
);
};