# Can you have 2 controllers?

**URL:** <https://discourse.threejs.org/t/can-you-have-2-controllers/39910>\
**Category:** Questions\
**Tags:** transform, gltf-loader, camera, animation, geometry\
**Created:** [July 2, 2022, 8:52pm UTC](https://discourse.threejs.org/t/can-you-have-2-controllers/39910 "2022-07-02T20:52:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sylviamakowiec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sylviamakowiec/32/27571_2.png) [@Sylviamakowiec](https://discourse.threejs.org/u/Sylviamakowiec)\
**Post date:** [July 2, 2022, 8:52pm UTC](https://discourse.threejs.org/t/can-you-have-2-controllers/39910/1 "2022-07-02T20:52:13Z")

</div>

Hello,

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](https://codesandbox.io/s/mixing-html-and-webgl-w-occlusion-9keg6?file=/src/App.js:1634-1641)

Which uses an orbital controller.

How can I achieve this ?

Hope someone can help

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 2, 2022, 10:08pm UTC](https://discourse.threejs.org/t/can-you-have-2-controllers/39910/2 "2022-07-02T22:08:02Z")

</div>

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

```nohighlight
<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

```nohighlight
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
        e.stopPropagation()
        e.target.setPointerCapture(e.pointerId)
      }}
      onPointerUp={e => {
        controls.enabled = true
        e.stopPropagation()
        e.target.releasePointerCapture(e.pointerId)
      }}
      onPointerMove={e => {
        // you need to store deltas in here and figure out how to rotate the model
        ref.current.rotation.y = ???
    }}
  />
```

---

<div class="post-metadata">

**Author:** ![Sylviamakowiec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sylviamakowiec/32/27571_2.png) [@Sylviamakowiec](https://discourse.threejs.org/u/Sylviamakowiec)\
**Post date:** [July 3, 2022, 7:16pm UTC](https://discourse.threejs.org/t/can-you-have-2-controllers/39910/3 "2022-07-03T19:16:05Z")

</div>

Thank you for this ! makes a lot of sense