Confuse situation when using 'onBeforeCompile' in react three fiber

Questions
, , ,
1

I have some question about using onBeforeCompile in react three fiber, I want to assign the custom MeshBasicMaterial to the mesh, so I used ‘onBeforeCompile’ to do it but I got some issue when creating the custom material, here’s two cases that really confuse me.

First case:

const alphaMaterial = new THREE.MeshBasicMaterial();
alphaMaterial.transparent = true;
alphaMaterial.onBeforeCompile = (shader) => {
    shader.uniforms.baseMap = { value: alphaTex1.current };
    shader.uniforms.brightMap = { value: alphaTex2.current };
    shader.uniforms.mixFactor = { value: 0.5 };
    shader.vertexShader = 'varying vec2 vUv;\n' + shader.vertexShader;
    shader.vertexShader = shader.vertexShader.replace(
      '#include <uv_vertex>',
      `vUv = uv;`
    )
    shader.fragmentShader = 'varying vec2 vUv;\n'+ shader.fragmentShader;
    shader.fragmentShader = 'uniform sampler2D baseMap;\n' + shader.fragmentShader;
    shader.fragmentShader = 'uniform sampler2D brightMap;\n' + shader.fragmentShader;
    shader.fragmentShader = 'uniform float mixFactor;\n' + shader.fragmentShader;
    shader.fragmentShader = shader.fragmentShader.replace(
      '#include <map_fragment>',
      `
      vec4 texA = texture2D(baseMap, vUv);
      vec4 texB = texture2D(brightMap, vUv);
      vec4 mixColor = mix(texA, texB, mixFactor);
      diffuseColor = texA;
      `
      );
    };
})

useEffect(()=>{
    if(alphaMaterial.uniforms && alphaTex1.current && alphaTex2.current) 
    {
        alphaMaterial.uniforms.baseMap.value = alphaTex1.current;
        alphaMaterial.uniforms.brightMap.value = alphaTex2.current;
        alphaMaterial.uniforms.mixFactor.value = 0.5;
    }
},[alphaMaterial, alphaTex1.current, alphaTex2.current])



return (
    <>
          <mesh
               geometry={nodesMemo.mesh_2.geometry}
                material={alphaMaterial}
                castShadow
                receiveShadow
          >
    </>
)

I got an error of alphaMaterial.uniforms is undefined.

Second cases:
I use useRef() hook to reference the shader in onBeforeCompile, and assign shaderRef.current to mesh it doesn’t work, BUT when i sign ‘alphaMaterial’ to the mesh, it WORK!!?? I just don’t know how

const shaderRef = useRef();
const alphaMaterial = new THREE.MeshBasicMaterial();
alphaMaterial.transparent = true;
alphaMaterial.onBeforeCompile = (shader) => {
    shader.uniforms.baseMap = { value: alphaTex1.current };
    shader.uniforms.brightMap = { value: alphaTex2.current };
    shader.uniforms.mixFactor = { value: 0.5 };
    shader.vertexShader = 'varying vec2 vUv;\n' + shader.vertexShader;
    shader.vertexShader = shader.vertexShader.replace(
      '#include <uv_vertex>',
      `vUv = uv;`
    )
    shader.fragmentShader = 'varying vec2 vUv;\n'+ shader.fragmentShader;
    shader.fragmentShader = 'uniform sampler2D baseMap;\n' + shader.fragmentShader;
    shader.fragmentShader = 'uniform sampler2D brightMap;\n' + shader.fragmentShader;
    shader.fragmentShader = 'uniform float mixFactor;\n' + shader.fragmentShader;
    shader.fragmentShader = shader.fragmentShader.replace(
      '#include <map_fragment>',
      `
      vec4 texA = texture2D(baseMap, vUv);
      vec4 texB = texture2D(brightMap, vUv);
      vec4 mixColor = mix(texA, texB, mixFactor);
      diffuseColor = texA;
      `
      );
    shaderRef.current = shader;
    };
})

useEffect(()=>{
    if(shaderRef.current.uniforms && alphaTex1.current && alphaTex2.current) 
    {
        shaderRef.current.uniforms.baseMap.value = alphaTex1.current;
        shaderRef.current.uniforms.brightMap.value = alphaTex2.current;
        shaderRef.current.uniforms.mixFactor.value = 0.5;
    }
},[alphaMaterial, alphaTex1.current, alphaTex2.current])



return (
    <>
          <mesh
               geometry={nodesMemo.mesh_2.geometry}
                material={alphaMaterial} 
                //It works when assign to alphaMaterial and shaderRef.current.uniforms has value
                material={shaderRef.current}
                //It doesn't work when assign to shaderRef.current and the shaderRef.current.uniforms will be undefined
                castShadow
                receiveShadow
          >
    </>

It’s weird and really confused me, even though I tried useMemo to store alphaMaterial, and still get wrong result with undefined uniforms, the only work case is the above case2, can someone help me with the issue?

Really appreciate, Thank you