First Layout
Build your first layout with uikit.
The first step for building a layout is to install the dependencies.
npm i three @react-three/fiber @react-three/uikit @react-three/drei
The @react-three/drei
dependency is not necessary but allows us to add OrbitControls
.
Next, we create the index.jsx
file and import the necessary dependencies.
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import { Root, Container } from '@react-three/uikit'
Now, we can start defining the actual layout. Every layout must start with a Root
element (or an element that wraps the Root
element, such as the Fullscreen
component). In this example, the Root
is of size 8 by 4 (three.js units). The Root
has a horizontal (row) flex-direction, with 2 Container
children, filling its width equally with a margin around them.
More in-depth information on the Flexbox properties can be found here.
export default function App() {
return (
<Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
<OrbitControls />
<Root backgroundColor="red" sizeX={8} sizeY={4} flexDirection="row">
<Container flexGrow={1} margin={32} backgroundColor="green" />
<Container flexGrow={1} margin={32} backgroundColor="blue" />
</Root>
</Canvas>
)
}
The final result will look like this: