Can you have 2 controllers?


I am very fresh to 3JS.

I have a room with an Orbital Controller.

In this room there is a jacket(not center), which I need it to move with the mouse and spin. Now I think Orbital Control would work, but I already have one controlling the room. My work wants this jacket to rotate like this : Mixing HTML and WebGL w/ occlusion - CodeSandbox

Which uses an orbital controller.

How can I achieve this ?

Hope someone can help

orbit controls are for controlling the camera, add them like this:

<OrbitControls makeDefault />

your jacket is a mesh, in order to spin it you have to create a drag gesture, i won’t get into details but once you detect drag you switch off orbitcontrols so that they dont interfere, you also need to capture the pointer so that it may leave the jacket without ending the event

function Jacket() {
  const ref = useRef()
  const controls = useThree(state => state.controls)
  const { ... } = useGLTF('/jacket.glb')
  return (
    <mesh ref={ref} geometry={...} material={...}
      onPointerDown={e => {
        controls.enabled = false
      onPointerUp={e => {
        controls.enabled = true
      onPointerMove={e => {
        // you need to store deltas in here and figure out how to rotate the model
        ref.current.rotation.y = ???
1 Like

Thank you for this ! makes a lot of sense