# How do you set uTime inside useFrame in R3F for a shader?

**URL:** <https://discourse.threejs.org/t/how-do-you-set-utime-inside-useframe-in-r3f-for-a-shader/54400>\
**Category:** Questions\
**Tags:** uniforms, threejs, react-three-fiber, shaders\
**Created:** [July 29, 2023, 3:26pm UTC](https://discourse.threejs.org/t/how-do-you-set-utime-inside-useframe-in-r3f-for-a-shader/54400 "2023-07-29T15:26:57Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jo\_DeCore](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jo_decore/32/38251_2.png) [@Jo\_DeCore](https://discourse.threejs.org/u/Jo_DeCore)\
**Post date:** [July 29, 2023, 3:26pm UTC](https://discourse.threejs.org/t/how-do-you-set-utime-inside-useframe-in-r3f-for-a-shader/54400/1 "2023-07-29T15:26:57Z")

</div>

ive been trying to set uTime from my uniforms for my shader but i keep getting this typeset error

```javascript
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 :

```javascript
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>
  );
}

```

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [July 29, 2023, 3:49pm UTC](https://discourse.threejs.org/t/how-do-you-set-utime-inside-useframe-in-r3f-for-a-shader/54400/2 "2023-07-29T15:49:37Z")

</div>

> [@Jo\_DeCore](#):
>
> ```javascript
> useFrame(({ clock, mouse }) => {
> ref.current.uniforms.uTime = clock.getElapsedTime();
> });
> 
> ```

you’re trying to change uniforms on a type of mesh, that doesn’t exist… have you tried modifying the uniforms of the material attached to the mesh instead eg.

```javascript
  useFrame(({ clock, mouse }) => {
    ref.current.material.uniforms.uTime = clock.getElapsedTime();
  });

```

---

<div class="post-metadata">

**Author:** ![Jo\_DeCore](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jo_decore/32/38251_2.png) [@Jo\_DeCore](https://discourse.threejs.org/u/Jo_DeCore)\
**Post date:** [July 29, 2023, 6:02pm UTC](https://discourse.threejs.org/t/how-do-you-set-utime-inside-useframe-in-r3f-for-a-shader/54400/3 "2023-07-29T18:02:24Z")

</div>

cheers thnx ur a big help i thought i tried adding .material earlier but i think something else that i fixed was stopping that from working so i didn’t bother to try it again 🤔 a small quick question to add on but am i using the correct texture loader should i use ‘useTexture’ from react three drei? Cause i i cant seem to see the texture in my model and nothing has changed in my shader since i moved to R3F from normal three js if not it be something else im guessing but thnx alot again otherwise 🙏 👍

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [July 29, 2023, 7:20pm UTC](https://discourse.threejs.org/t/how-do-you-set-utime-inside-useframe-in-r3f-for-a-shader/54400/4 "2023-07-29T19:20:29Z")

</div>

Hey, np, yes ifaik it’s best to use `useTexture()` if using r3f as it’s made to preload textures before trying to render them which is likely the issue

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 29, 2023, 7:32pm UTC](https://discourse.threejs.org/t/how-do-you-set-utime-inside-useframe-in-r3f-for-a-shader/54400/5 "2023-07-29T19:32:49Z")

</div>

Also, drei shader material creates auto setter getters [ThreeJS Journey Portal - CodeSandbox](https://codesandbox.io/s/ni6v4)

Ps nothing imo wrong with textureloader it’s probably just a as wrong path, but useTexture integrates the component into suspense and preloads

---

<div class="post-metadata">

**Author:** ![Jo\_DeCore](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jo_decore/32/38251_2.png) [@Jo\_DeCore](https://discourse.threejs.org/u/Jo_DeCore)\
**Post date:** [July 29, 2023, 7:37pm UTC](https://discourse.threejs.org/t/how-do-you-set-utime-inside-useframe-in-r3f-for-a-shader/54400/6 "2023-07-29T19:37:01Z")

</div>

cheers thnx a million 👍

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [July 29, 2023, 10:02pm UTC](https://discourse.threejs.org/t/how-do-you-set-utime-inside-useframe-in-r3f-for-a-shader/54400/7 "2023-07-29T22:02:48Z")

</div>

Oh you can `useRef()` on materials that’s cool, is that only for shader materials? when you say “creates auto setter getters”?

---

<div class="post-metadata">

**Author:** ![sammael\_art](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sammael_art/32/47645_2.png) [@sammael\_art](https://discourse.threejs.org/u/sammael_art)\
**Post date:** [May 9, 2024, 10:06am UTC](https://discourse.threejs.org/t/how-do-you-set-utime-inside-useframe-in-r3f-for-a-shader/54400/9 "2024-05-09T10:06:44Z")

</div>

`uTime` is an Uniform object. You have to change its `value`, but not `uTime` itself

```javascript
useFrame(({ clock }) => {
    if (ref.current) {
      ref.current.uniforms.uTime.value = clock.elapsedTime
    }
  })

```

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [May 10, 2024, 7:10am UTC](https://discourse.threejs.org/t/how-do-you-set-utime-inside-useframe-in-r3f-for-a-shader/54400/10 "2024-05-10T07:10:37Z")

</div>

You can put refs on anything, you will get the underlying object. The helper, shaderMaterial(…) creates auto setter/getters for all uniforms so you don’t have to write these long paths, then it’s just shaderRef.current.uTime = foo