How to Rotate GLTF file on click of another object?


I have an Orbital Control in on my Canvas. I have a TV on one side and a GLTF file ( a jacket) on top of a stand on the other side.

I need to get the jacket to rotate onClick, but continuously.

I have this for the onClick:

const handleClick = () => {
if (isClicked) {
gltf.scene.rotation.y += 0.1;
else {
gltf.scene.rotation.y -= 0.1;

Now it will quickly rotate but will not continuously rotate as if I were to use : useFrame((state, delta) => (ref.current.rotation.y += 0.01))

For some reason, I cannot use Use Frame. The error I get is : React Hook “useFrame” is called in function “handleClick” that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word “use”.

Hope someone can help me out!

Hello did you get any help on this?

Not yet ! hope someone can help!

hooks can only be called inside a components function body

function ThisIsAComponet() {
  useFrame((state) => {
    // This will run every frame

as for making the jacket turn, isn’t this just a state problem?

function TV({ onClick }) {
  const { ... } = useGLTF(...)
  return <mesh geometry={...} onClick={onClick} />

function Jacket({ spin }) {
  const ref = useRef()
  const { ... } = useGLTF(...)
  useFrame((state, delta) => {
    if (spin) ref.current.rotation.y += delta
    else ref.current.rotation.y = 0
  return <mesh geometry={...} ref={ref} />

function App() {
  const [spin, set] = useState(false)
  return (
      <TV onClick={() => set(!spin)} />
      <Jacket spin={spin} />

Thank you for this ! Definitely a state issue here.
I was trying to use an event handler --hence why it was not working.

I’m not sure if there is another way to do this perhaps using orbital controls for the TV. Just don’t know if that is possible as I have other Orbital Controls for the entire room.

~sorry ahead of time, I’ve been only doing this for a week !


1 Like