Passing uniforms to shader about three-customshadermaterial HOT 11 CLOSED

export const vertex =`
      precision mediump float;
      uniform float uTime;

      void main(){
        vec4 pos = vec4(position, 1.0);
        vec4 modelPosition = modelMatrix * pos;
        vec4 viewPosition = viewMatrix * modelPosition;
        vec4 projectedPosition = projectionMatrix * viewPosition;

        csm_Position = position;
      }
    `
export const fragment = `
      precision mediump float;
      uniform float uTime;

      void main() {

        vec3 color = vec3(0.0, 0.0, sin(uTime));

        csm_DiffuseColor = vec4(color, 1.0);
      }
    `

export const LandingPage = ():JSX.Element => {
    return <div className="landing-container">
        <div className='canvas-container'>
            <Canvas>
                <ambientLight/>
                <pointLight position={[2, 0, 0]} intensity={10}/>
                <Box position={[1.2, 0, 0]} />
            </Canvas>
        </div>
    </div>
}

function Box(props: JSX.IntrinsicElements['mesh']) {
  const materialRef = useRef<CustomShaderMaterialType | null>(null)

  const texture = new THREE.TextureLoader
  const projects = texture.load('/1.jpg')

  console.log(projects)



  useFrame(({clock}) => {
    if (materialRef.current) {
      materialRef.current.uniforms.uTime.value = clock.getElapsedTime()
    }
  })

  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <CustomShaderMaterial
        ref={materialRef}
        baseMaterial={MeshPhysicalMaterial}
        vertexShader={vertex}
        fragmentShader={fragment}
        uniforms={{
          uTime: {
            value: 0,
          },
          uTexture: {
            value: projects
          }
        }}
        flatShading
        map={projects}
        // ...
      />
    </mesh>
  )
}

export const vertex =`
      precision mediump float;
      uniform float uTime;
      varying vec2 vUv;

      void main(){
        vUv = uv;
        csm_Position = position;
      }
    `
export const fragment = `
      precision mediump float;
      uniform float uTime;
      uniform sampler2D uTexture;

      varying vec2 vUv;


      void main() {

        vec3 color = vec3(0.0, 0.0, sin(uTime * 0.1));

        csm_DiffuseColor = texture2D(uTexture, vUv);
      }
    `

export const vertex =`
      precision mediump float;
      uniform float uTime;

      varying vec2 v_uv;
      varying vec3 v_position;


      void main(){
        v_position = position;
        v_uv = uv;
        csm_Position = position;
      }
    `
export const fragment = `
      precision mediump float;
      uniform float uTime;
      uniform sampler2D uTexture;

      varying vec2 v_uv;
      varying vec3 v_position;


      void main() {

      float inCircle = 1.0 - step(0.5, length(v_position.xy));
      vec3 color = vec3(1.0, 1.0, 0.0) * inCircle;

      csm_DiffuseColor = texture2D(uTexture, v_uv) * vec4(color, 1.0);
      }
    `

const AddText = () => {
    return <mesh>
        <Text 
          color="red" 
          anchorX="center" 
          anchorY="middle"
          material={CustomShaderMaterial}
        >
          HELLO
        </Text>
    </mesh>
  }

Type 'ForwardRefExoticComponent<Pick<iCSMAllProps, "attach" | "attachArray" | "attachObject" | "attachFns" | "args" | "children" | "key" | "onUpdate" | "dispose" | "type" | "id" | "uuid" | "name" | ... 116 more ... | "uniforms"> & RefAttributes<...>>' is not assignable to type 'Material | Material[] | undefined'.
  Type 'ForwardRefExoticComponent<Pick<iCSMAllProps, "attach" | "attachArray" | "attachObject" | "attachFns" | "args" | "children" | "key" | "onUpdate" | "dispose" | "type" | "id" | "uuid" | "name" | ... 116 more ... | "uniforms"> & RefAttributes<...>>' is missing the following properties from type 'Material[]': pop, push, concat, join, and 28 more.ts(2322)

The expected type comes from property 'material' which is declared here on type 'IntrinsicAttributes & Pick<Omit<ExtendedColors<Overwrite<Partial<Mesh<BufferGeometry, Material | Material[]>>, NodeProps<Mesh<BufferGeometry, Material | Material[]>, typeof Mesh>>>, NonFunctionKeys<...>> & { ...; } & EventHandlers & { ...; }, "attach" | ... 111 more ... | "debugSDF"> & RefAttributes<...>'