Can you have 2 controllers?

Questions
, , , ,
1

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

Which uses an orbital controller.

How can I achieve this ?

Hope someone can help

2

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
        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 = ???
    }}
  />
1 Like
3

Thank you for this ! makes a lot of sense