PivotControls and leva sync

Questions
,
1

Hi,

I recently started using react-three-fiber, and I have a simple model on the screen. I can nest my model inside PivotControls to rotate, scale, and change its position.

I would to do this with Leva controls, so user is able to do it both using pivot or leva input fields, but I’m not sure how to integrate it with both. I tried searching on Google, but I couldn’t find any examples.

Is there an example of how to do it? Thank you very much!

2

Instead of using PivotControls, I used TransformControls, the idea is you would use one transformcontrols that become visible when you click on any object in the scene.


export const TransformController = () => {
  const scene = useThree((state) => state.scene)
  const selectedName = useStagePanel((state) => state.selectedName)
  const updateItem = useStageObjects((state) => state.updateItem)

  if (!selectedName) {
    return null
  }

  return (
    <TransformControls
      object={scene.getObjectByName(selectedName)}
      mode="translate"
      onMouseUp={() => {
        const object = scene.getObjectByName(selectedName)
        console.log(selectedName, object?.position.toArray())
        updateItem(selectedName, {
          position: object?.position.toArray(),
          scale: object?.scale.toArray()
        })
      }}
    />
  )
}

You would save the pos, scale etc to set those on the object when user is finished updating. This works.