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.