How to change glb model material color at runtime?

[sabuhiteymurov]

Hi, I'm trying to change the color of a glb model's material at runtime using react-native-filament, but I'm having trouble figuring out how to do it. There is setDefaultFloat4Parameter method of Material interface in the docs. I just can’t figure out how to access Material.

[hannojg]

I think you could look at this (to get a general idea)

• https://margelo.github.io/react-native-filament/docs/guides/images#applying-textures

and also peak into the implementation of EntitySelector:

• react-native-filament/package/src/react/EntitySelector.tsx

  Line 45 in 5c77764

  return entities.find((e) => nameComponentManager.getEntityName(e) === byName)

The main idea is to select the correct entity, get the material and change its attributes (I think you also need to reapply the material then, let me double check on that …)

[hannojg]

See this for reference, you can also get the entity from an asset:

const { renderableManager } = useFilamentContext()

const entity = asset.getFirstEntityByName("yourEntitysNameSeeDocLinkIShared")
// There is probably just one material, otherwise check which index to select
renderableManager.getMaterialInstanceAt(entity, 0).setFloat4Parameter('baseColorFactor', [1, 1, 1, 1]) // in sRGB

[hannojg]

Ideally we would like to expose a declarative react API for this, probably in EntitySelector. Would def appreciate a PR for this (should be javacsript/typescript changes only!)

[sabuhiteymurov]

Ideally we would like to expose a declarative react API for this, probably in EntitySelector. Would def appreciate a PR for this (should be javacsript/typescript changes only!)

Thank you, appreciated. I'll try to create a PR for this.