Leva
Import
import { useControls } from 'leva'
Video Lecture
Section | Video Links | |
---|---|---|
Leva | ![]() |
![]() |
Description
Leva is a GUI component that you can add to your React Three Fiber application and interact with your scene.
We need to install the dependency.
npm install leva
To create a GUI that modifies some state in our component, we also need to import useControls
.
import { useControls } from 'leva'
And create a useControls
hook.
const color = useControls({
value: 'green',
})
And then use it. E.e.,
<Canvas>
<color attach="background" args={[color.value]} />
</Canvas>
The Leva GUI will show a color picker, and when you change the color, it will update the background color of the canvas in real time.
Note that options created within the useControls
hook, will be persisted between React re-renders. This is similar to how useState
works.
If you created your control options outside the useControls
hook, and passed them in as a variable or object, such as I have in the below example, then you may need to consider using useMemo
since every time any control is used, it will cause react to re-render the component where the useControls
hook was declared.
There are many Leva GUI controls, such as text input, checkbox, sliders, radio buttons and more. You can even add folders and subfolders and hide/show them.
In this lesson we will demonstrate a few controls, but we will see Leva quite a lot during the course, so you will see many other examples of how to use it.
./src/App.jsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
|
./src/Polyhedron.jsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
Useful Links
Leva | github.com/pmndrs | |
Object3D | threejs.org | sbcode.net |
MeshBasicMaterial | threejs.org | sbcode.net |
OrbitControls | threejs.org | sbcode.net |
Working Example
GitHub Branch
git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
git checkout leva
npm install
npm start