Best way to efficiently use useFrame?

[milenazuccarelli]

Hey guys,
I'm using useFrame and need to check a few conditional statements something like this:

useFrame(() => {
  if (ref.current) {
    if (desktop) {
      ref.current.rotation.z = (mouseY / aspect) * -0.04
    } else {
     ref.current.rotation.z = (touchY / aspect) * 5
    }
  }
})

It seems like it would be hugely expensive to do this on every frame. What would be the best way to do this?
thanks!

[drcmda]

it says useRef, but i assume you mean useFrame, there's nothing in there that would be expensive. if you want to animate something frame by frame, using mouse coordinates or whatever, this is the way to do it.

btw, normalized (-1 / 0 / 1) mouse coords are inbuilt:

useFrame(state => {
  ref.current.rotation.z = state.mouse.y * Math.PI / 2
})

or if you wanna animate it:

useFrame(state => {
  ref.current.rotation.z = THREE.Math.lerp(
    ref.current.rotation.z, state.mouse.y * Math.PI / 2, 0.1
  )
})

[milenazuccarelli]

Ah wow that's great, thank you so much!
Changed it to useFrame

[milenazuccarelli]

What would you recommend as the best way to get touch coordinates?

[gsimone]

Since Paul already answered, here's a simple demo for future reference:
https://codesandbox.io/s/r3f-basic-demo-jutwd?file=/src/index.js

[shawn-mty]

Since Paul already answered, here's a simple demo for future reference:
https://codesandbox.io/s/r3f-basic-demo-jutwd?file=/src/index.js

Demo is giving 404

[drcmda]

i dont know what demo that was, but you have pointer events. i think theyre still stored under "mouse" in that case, but you can fetch them any way you like otherwise.