useFrame bug with GLB mesh objects and ShaderMaterial

[jhancock532]

I've imported a 3D model of multiple meshes using gltfjsx.

I've successfully added a basic shader material to a mesh using the below jsx, where TestShader is an external JS file as in this example.

<mesh
   geometry={nodes.LeftEye.geometry}
   position={[0.03, 0.13, 0.08]}
   rotation={[3.14, -0.14, 3.14]}
   scale={[0.02, 0.01, 0.01]}
>
   <shaderMaterial
       ref={ref}
       attach="material"
       args={[TestShader]}
    />
</mesh>

However, when I try to follow the above example updating the shader uniforms with useFrame, I get the following error:

TypeError: Object(...) is not a function
UserModel
.... src/UserModel.js:20

  17 | const [hovered, setHover] = useState(false);
  18 | const { nodes } = useGLTF('/user.glb');
  19 | 
> 20 | useFrame(() => {
     | ^  21 |   ref.current.material.uniforms.time.value += 0.1;
  22 | });

How do I update the uniforms? I want to pass a time variable that updates each frame.

I'd also like to add another transition variable (where 0 is off and 1 is on, and 0.5 is midway through the transition) that can be controlled via the objects props. Is this the right approach? Any good examples of shaders controlled via props?

Can I use one reference object ref and assign that to multiple meshes so as to update shader materials of multiple objects simultaneously?

I've seen examples using memos to help performance, should I be doing this as well?

Sorry for all the questions, I'm very new to this - what I've learned so far is based on the tutorials I've found.

More code context ->

import React, { useRef, useState } from "react";
import { useFrame } from "react-three-fiber";
import { useGLTF } from '@react-three/drei'
import { TestShader } from "./shaders/TestShader";

export default function UserModel(props) {
  const group = useRef();
  const ref = useRef();
  const [hovered, setHover] = useState(false);
  const { nodes } = useGLTF('/user.glb');

  useFrame(() => {
    ref.current.material.uniforms.time.value += 0.1;
  });
...

  return (
    <group ref={group} {...props} dispose={null}>
      <group position={[0, -6.59, 0]} scale={[6.51, 6.51, 6.51]}>

....

      </group>
    </group>
    )
  }

useGLTF.preload('/user.glb');

[drcmda]

Did you import useframe?

[jhancock532]

Yep - updating code sample now...

[jhancock532]

Fixed! Make sure you

import { useFrame } from "@react-three/fiber";

and don't

import { useFrame } from "react-three-fiber";

🙄 🤦‍♂️