Leva é um componente GUI que é usado manipular os valores das propriedades do sua aplicação React Three Fiber

Como usar

Antes de tudo adicionar leva nas suas dependências do projeto.

yarn add leva

Aqui está um exemplo simples de como deve importar e usar o useControls

import { Canvas } from 'react-three-fiber'
import { Box, OrbitControls } from '@react-three/drei'
import { useControls } from 'leva';

export function App(){
const {color, position} = useControls('box',{
    position: {
      x:1,
      y:1,
      z:1
    },
    color: "#ffffff"
  })
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <OrbitControls />
      <Box position={[position.x,position.y,position.z]} material-color={color} />
    </Canvas>
  )
}

Ao executar esse código aparecerá um cubo em tela e um seletor pra alterar a posição e a cor do cubo. Existem muitos controles Leva GUI, como entrada de texto, caixa de seleção, controles deslizantes, botões de opção e muito mais. Você pode até adicionar pastas e subpastas e ocultá-las/mostrá-las.