ive been trying to set uTime from my uniforms for my shader but i keep getting this typeset error
HandTOPb.jsx?t=1690643611434:37 Uncaught TypeError: Cannot set properties of undefined (setting 'uTime')
here is my code and what i’ve tried from what i’ve looked up :
function TopHand(props) {
const { nodes, materials, fragmentShader, vertexShader } = useGLTF(
"./modelsGLTF/handTOPb/handTOPb.gltf"
);
const ref = useRef();
useFrame(({ clock, mouse }) => {
ref.current.uniforms.uTime = clock.getElapsedTime();
});
const uniforms = {
uTime: { value: 0 },
coral: { type: "t", value: new THREE.TextureLoader().load(coral) },
iResolution: { value: new THREE.Vector3() },
};
return (
<group
{...props}
dispose={null}
position={[-7, -22, 8]}
rotation={[4, 0, 2]}
>
<mesh
scale={[1, 1, 1]}
geometry={nodes.hand.geometry}
material={nodes.hand.material}
rotation={[Math.PI / 2, 0, 0]}
ref={ref}
>
<shaderMaterial
uniforms={uniforms}
fragmentShader={fragmentShader}
vertexShader={vertexShader}
transparent={true}
/>
</mesh>
</group>
);
}