First Layout

The first step for building a layout is to install the dependencies.

npm i three @react-three/fiber @react-three/uikit @react-three/drei

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:

import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { Root, Container } from "@react-three/uikit";

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>
)
}