How to move camera without clicking

[Mirzhal95]

Now I have the implementation of project in which camera revolves around its axis https://codesandbox.io/s/r3f-sky-dome-dgbmm?from-embed=&file=/src/index.js. So, I wonder is it possible to ensure that camera moves even without clicking, that is, now by default camera revolves but once we just move mouse camera stops revolving and moves to the direction of mouse pointer. Then, once we stop moving the mouse, after around 2 seconds AGAIN starts revolving around its axis like here https://roundme.com/. I have researched and found out TrackballControls can be of help but cannot find the way how to integrate it into here https://codesandbox.io/s/r3f-sky-dome-dgbmm?from-embed=&file=/src/index.js

[Mirzhal95]

@drcmda pls can you help with camera move when mouse is moved feature only. The other part I will figure out on my own : )

[drcmda]

controls are quite limited in threejs, in the worst case you must fork it to get what you need. but before you do, maybe better ask in threes own discourse forum, they will be able to help you quicker since it's their control not ours.

[Mirzhal95]

@drcmda, thank you for your kind comments. Ok, I have asked three.js community and they gave me this link https://jsfiddle.net/f2Lommf5/14006/. The question is how can I translate it into react using react-three-fiber?

[drcmda]

all that is inbuilt already. you get normalized mouse coordinates (-1 / 1) in the state model. useframe allows you to run frame based ops.

function CameraMovement() {
  useFrame(({ mouse, camera }) => {
    // ...
  })
  return null
}

<Canvas>
  <CameraMovement />