TrackballControl for Objects

[philworthy]

I've been looking for a way to spin an object around with my mouse, exactly like TrackballControls, but controlling the object, not the camera (this is necessary for instance if you want some objects in the scene to remain static)
eg. TrackballObjectControls

There is a library called spin-controls that attempts to do this, but I've struggled to get it working inside react-three/fiber.

Note: If there is a better way to do this (ie. to use a regular TrackballControls and 'lock' some objects to the rotation of the camera so they appear static) that would also solve this need so any tips much appreciated (also tried and failed to get that working)

Thank you and amazing work with r3f!

[drcmda]

this is not a library or a module, just a blob of code. but in any way, if it works in threejs it works in r3f, too: https://codesandbox.io/s/basic-demo-forked-xsehy?file=/src/App.js

[drcmda]

btw threejs has a transform control inbuilt: https://codesandbox.io/s/mixing-controls-forked-0g7cd?file=/src/App.js

edit:

found a way to trick it so that you get spin without the UI:

  useFrame(() => {
    transform.current.traverse((obj) => (obj.visible = false))
  }, -1)

[philworthy]

Thank you so much @drcmda !
Your first example is perfect. I can't say I fully understand every nuance of it, but it works :)
(using TransformControls is not good for this sort of thing as it doesn't rotate in a very natural way - thanks for the alternate idea though)

👍

[drcmda]

not much to it, i just took the api description on their readme.md and stick it into useEffects and useFrames. thats how you can make everything work, its all just side effects and render loop ops.