Como usar Leva para Debugar em tempo real sua UI

    felipebdn
    há 10 meses
    0

    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.