Updating colors programatically without using state?

[ggomaeng]

I am trying to update the colors programatically frame by frame without using state for performance reasons, and it seems like I can't access uniforms of the material. It seems like I can't access the getters and setters of the shaderMaterial as well.

https://github.com/ruucm/shadergradient/blob/650f8e14581bbbc69171333af01a165ee477ddaa/packages/shadergradient/src/Gradient/comps/Mesh/shaderMaterial.ts#L70C5-L70C5

Any pointers would be greatly appreciated!

Here are my efforts below without any luck

three.current?.scene.traverse(function (object) {
  if (
    object instanceof Mesh &&
    object.material instanceof MeshPhysicalMaterial
  ) {
    object.material.userData.colors = ["#0000FF", "#00FF00", "#000000"];
    object.material.needsUpdate = true;
    const shaderMaterial =
      object.material as unknown as ShaderMaterial & {
        colors: Color[];
      };

    console.log(shaderMaterial);
    console.log(shaderMaterial.colors); // this throws an error
    console.log(shaderMaterial.uniforms); // this throws an error
  }
});

[ruucm]

hello @ggomaeng I've exported r3f hooks to use it outside from v1.2.5. (like useFrame or useThree)

here is an example to change the userData outside of the package.

https://codesandbox.io/p/sandbox/github/ruucm/shadergradient/tree/main/apps/example-cra?file=%2Fsrc%2FApp.tsx

but I think there will be more modifications needed to update the colors in this hook.